每位Web开发者都应了解的辅助功能基础知识
你已经用现代框架构建了一个精美的网站，但当依赖屏幕阅读器的用户尝试导航时，却迷失了方向。或者，无法使用鼠标的人发现你的自定义下拉菜单根本无法打开。辅助功能不仅仅是一个检查项——它是高质量Web开发的基本组成部分。在本文中，你将学习核心原则和实用技巧，让你的网站对所有人都可用。
为什么辅助功能很重要
辅助功能（通常缩写为a11y）确保残障人士能够感知、理解、导航和与Web交互。这包括视觉、听觉、运动和认知障碍的人士。除了道德责任之外，无障碍网站通常在搜索引擎中排名更好，能触达更广泛的受众，并符合ADA或WCAG等法律要求。
此外，辅助功能的改进惠及所有用户。清晰的标题、键盘快捷键和高对比度帮助人们在明亮的阳光下、慢速连接下或手部暂时受伤时使用。这关乎通用设计。
核心原则：POUR
Web内容无障碍指南（WCAG）建立在四个原则之上，方便记忆为POUR：
- 可感知：信息必须以所有用户都能感知的方式呈现。为图片提供文本替代方案，为视频提供字幕，并确保足够的颜色对比度。
- 可操作：用户必须能够操作界面。确保所有功能都可通过键盘使用，并给用户足够的时间阅读内容。
- 可理解：内容和操作必须可理解。使用清晰的语言、可预测的导航和输入辅助。
- 健壮：内容必须与当前和未来的辅助技术兼容。编写有效的语义化HTML。
从语义化HTML开始
辅助功能的基础是为任务使用正确的HTML元素。屏幕阅读器依赖元素的语义来传达含义。<button>会被宣布为按钮，并且默认可以获得焦点；而带有点击处理程序的<div>则不会。
你应该使用的常见语义元素：
- 用于导航块的
<nav> - 用于主要内容区域的
<main> - 按逻辑顺序用于标题的
<h1>–<h6> - 用于可点击操作的
<button> - 用于链接的
<a> - 用于列表的
<ul>、<ol>、<li> - 与表单输入关联的
<label>
例如，不要使用：
<div>Submit</div>而应该使用：
<button type="button">Submit</button>这个简单的更改使控件可获得焦点，宣布其角色，并允许通过键盘激活。
键盘导航和焦点管理
许多用户无法使用鼠标。他们依赖Tab键在交互元素之间移动。确保：
- 所有交互元素都可以通过Tab键到达。
- Tab顺序遵循逻辑顺序。
- 焦点始终可见（不要在没有替代方案的情况下移除轮廓）。
- 自定义组件（如模态框或下拉菜单）适当地捕获焦点，并在关闭时返回焦点。
通过拔掉鼠标并仅使用键盘导航来测试你的网站。你能访问每一个功能吗？
ARIA：谨慎使用
当原生HTML无法满足需求时，ARIA（无障碍富互联网应用）属性可以增强辅助功能。然而，ARIA的第一条规则是：如果可以改用原生HTML，就不要使用ARIA。例如，使用<button>而不是<div role="button">。
当你确实需要ARIA时，常见属性包括：
aria-label在没有可见文本时提供标签。aria-expanded指示可折叠部分是否打开。aria-hidden="true"对屏幕阅读器隐藏装饰性元素。role在不存在语义标签时定义元素的用途。
不正确的ARIA可能会让情况变得更糟，因此始终要使用辅助技术进行测试。
颜色和对比度
足够的颜色对比度确保低视力或色盲人士能够阅读文本。WCAG建议普通文本的对比度至少为4.5:1，大文本（18pt以上或14pt粗体）为3:1。使用WebAIM对比度检查器等工具进行验证。
此外，切勿仅依靠颜色来传达信息。例如，如果你使用红色表示错误，还应包括图标或文本消息。
图像的文本替代方案
每个图像都应该有一个alt属性。其值取决于上下文：
- 如果图像传达信息，请简洁地描述：
alt="A red warning triangle"。 - 如果是装饰性的，请使用空alt：
alt=""。 - 如果是复杂的图表，请在附近提供更长的描述或通过
aria-describedby提供。
缺少alt文本是最常见的辅助功能问题之一。它也很容易修复。
测试网站的辅助功能
自动化工具可以捕获大约30%的问题。手动测试至关重要。以下是一个实用的工作流程：
- 运行自动化审计：使用axe DevTools、Lighthouse或WAVE查找明显的问题。
- 键盘测试：仅使用Tab、Shift+Tab、Enter和箭头键导航你的网站。
- 屏幕阅读器测试：尝试VoiceOver（Mac）、NVDA（Windows）或Orca（Linux）。听听内容是如何被宣布的。
- 缩放和对比度：放大到200%，检查内容是否仍然可用。验证对比度。
- 用户测试：尽可能让残障人士参与可用性测试。
要避免的常见陷阱
- 使用
div或span作为按钮和链接。 - 移除焦点轮廓而不提供替代方案。
- 将
aria-hidden="true"添加到可聚焦元素。 - 使用占位符文本作为输入的唯一标签。
- 自动播放带声音的媒体。
- 颜色对比度不足。
快速参考：该做与不该做
| 该做 | 不该做 |
|---|---|
| 使用语义化HTML元素 | 为所有内容使用div |
| 提供文本替代方案 | 为信息性图像保留空的alt属性 |
| 确保键盘可操作性 | 仅依赖鼠标事件 |
| 保持足够的对比度 | 在白底上使用浅灰色文本 |
| 为表单输入添加标签 | 使用占位符作为标签 |
常见问题
WCAG A、AA和AAA有什么区别？
WCAG符合性级别表示递增的辅助功能水平。A级是最低级别，AA是大多数法律引用的标准，AAA是最高级别，通常对所有内容不切实际。以AA为目标。
我可以使用ARIA修复所有辅助功能问题吗？
不能。只有在原生HTML无法提供所需语义时才应使用ARIA。不正确的ARIA可能会损害辅助功能。始终优先使用语义化HTML。
如何测试我的网站的辅助功能？
将自动化工具（如axe或Lighthouse）与手动检查相结合：键盘导航、屏幕阅读器测试和颜色对比度分析。尽可能让残障用户参与。
准备好改善你网站的辅助功能了吗？首先验证你的HTML结构并检查常见问题。如需快速JSON格式化和验证，请尝试我们的JSON格式化工具，确保你的数据干净且结构良好。