构建包容性网络：WordPress 可访问性初学者指南（第2部分）

Source: Dev.to

选择可访问的主题

主题是站点的基础。如果主题构建不佳，你将不断面对可访问性问题。

需要关注的点

• WordPress 主题目录中的 “Accessibility‑ready” 标签
• 清晰的焦点状态（在使用 Tab 键时能看到当前所在位置）
• 良好的颜色对比度
• 合理的标题结构

快速测试（≈ 30 秒）

1. 打开你的网站。
2. 把鼠标收起来。
3. 反复按 Tab 键。

自问：

• 你能看到自己所在的位置吗？
• 能到达菜单吗？
• 能用 Enter 键激活按钮吗？

如果不能，考虑更换主题。屏幕阅读器极度依赖正确的标题层级——把标题想象成目录。

标题结构

正确的层级

H1 → 页面标题
H2 → 主要章节
H3 → 子章节

不该做的事

• 不要因为“看起来更好”而直接从 H2 跳到 H4。
• 不要把加粗的文字当作标题。

在 Gutenberg 中，使用 Heading 块，而不是对普通文本进行样式处理。

清晰的结构既提升可访问性，也有助于 SEO。

替代文本（Alt Text）

Alt 文本不是要描述每一个像素，而是传达图像的用途。

自问： 如果有人看不到这张图片，他们需要了解什么信息？

• ❌ “一位女性的图片”（太笼统）
• ✅ 描述用途，而不是装饰性。

如果图片纯粹是装饰性的，可以将 alt 属性留空 (alt="")。

颜色对比度

低对比度是最常见的问题之一（例如浅灰色文字在白色背景上）。

简易检查

• 避免在浅色背景上使用非常浅的文字。
• 确保链接明显可见（不仅仅是稍深一点的文字）。
• 绝不要仅靠颜色来传递意义。

键盘导航

许多用户无法使用鼠标，他们依赖键盘、辅助开关或其他输入方式。

测试你的网站

• 用 Tab 键遍历菜单。
• 打开下拉菜单。
• 提交表单。
• 关闭弹出层。

如果你卡住了，用户也会卡住。键盘可访问性不是可选项。

表单

表单是常见的挫败来源。

确保：

• 每个字段都有可见标签。
• 必填字段标记清晰。
• 错误信息说明出错原因。
• 错误提示出现在出问题的字段附近。

清晰、可访问的表单可以降低放弃率。

插件：有帮助，但不是魔法解决方案

有些插件可以：

• 添加跳过链接。
• 高亮焦点状态。
• 扫描常见问题。

它们很有用，但 没有插件能保证完整的可访问性。插件只能辅助良好实践，不能取代它们。

媒体（视频、播客、音频）

嵌入媒体时，务必提供：

• 字幕或文字稿。

好处

• 帮助聋人用户。
• 便利非母语使用者。
• 改善 SEO。
• 为嘈杂环境中的用户服务。

字幕不是“额外的好处”，而是包容性的一部分。

测试清单

从低成本检查开始，逐步迭代：

• 仅键盘导航。
• 放大到 200 %（捕捉缩放问题）。
• 移动端测试。
• 浏览器可访问性工具（如 Lighthouse）。

先解决明显的问题。可访问性是一个进步的过程，而非一次性完美；不必一次性修复所有问题。

优先级

1. 改善标题。
2. 改善替代文本。
3. 改善对比度。
4. 键盘测试。

小的改进会随时间累积产生大效果。

最后思考

在第 1 部分我们讨论了构建一个人人都能使用的“游乐场”。现在，你已经拥有实际构建它的工具。可访问性并不是要做到完美；每一次改进都让之前被排除在外的人能够上网。这一点非常重要。