7. 无障碍性

最佳实践

核心模块

访问公共服务、教育、电子商务网站和娱乐等 Web 内容是人权。任何人都不应该因残疾、种族、地理位置或其他人类特征而被排除在外。本模块讨论了您应该学习的最佳实践和技术，以使您的网站尽可能地可访问。

一般资源

7.1 无障碍性基础

学习成果

了解无障碍性的目的——提高所有人的可用性、改善 SEO 和更广泛的目标受众。此外，还要了解法律要求。
了解无障碍性应该从项目的开始就考虑，而不是在最后才添加。
了解 Web 内容无障碍指南 (WCAG) 符合性标准。
使用语义化 HTML，即“为正确的工作使用正确的元素”，因为浏览器提供了许多内置的无障碍性挂钩。良好的示例是 <a> 和 <input> 元素。
无障碍性最佳实践
- 替代文本（另请参见 2.6 媒体）。
- 良好的链接文本（另请参见 2.5 链接）。
- 表单元素的 <label>（另请参见 2.7 其他交互式元素）。
- 提供特定可用性优势的移动浏览器，例如 number 或 tel 等特定 <input> 类型。
- 使用 <th>、<thead>、<tbody>、<tfoot>、<caption> 和 scope 属性使表格可访问（另请参见 2.8 HTML 表格）。
- 使用简单的普通语言，尽可能避免使用俚语和缩写，并在无法避免的情况下提供定义。
了解音频转录本和文本轨道（字幕、旁白等）在使音频和视频内容可访问方面的作用（我们并不期望您精通如何创建它们；这本身就是一个高级主题）。
键盘可访问性
- 了解为什么应用程序需要是键盘可访问的——许多人难以使用鼠标或其他指向设备。
- 了解内置的浏览器键盘控件。
- 了解何时使用 accesskey 和 tabindex 是合适的。

资源

学习成果

文本大小和布局
- 确保您的文本布局良好、一致且易读。
- 考虑为视力障碍者提供大字体界面。
- 另请参见 4.1 文本和字体样式。
颜色对比度
- 使用在线工具，例如 WebAIM 的颜色对比度检查器或 TPGi 颜色对比度分析器来检查您的颜色对比度是否符合相关的 WCAG 符合性标准。
- 注意色盲或视力障碍者；提供适合他们的高对比度模式。
:focus 和 :hover 样式
- 这些对于鼠标和键盘用户来说是重要的提示。
- 另请参见 4.2 样式化列表和链接。
明智的动画使用——以微妙的方式使用动画并提供关闭它的控件
- 考虑患有某些认知障碍者的需求。
- prefers-reduced-motion 媒体查询专门用于帮助解决此问题。
隐藏内容以防止其变得不可访问的最佳实践。例如，display: none 使内容无法被屏幕阅读器读取，因此需要谨慎使用。

资源

学习成果

了解过多的 JavaScript 也会造成问题。更简单的方法通常更容易访问，而且通常对每个人来说都更好。
了解非侵入式 JavaScript 的价值
- 如果可能，将 JavaScript 作为可用性增强，这对于应用程序的功能并不是必需的。
- 一个很好的例子是表单输入的客户端验证。
明智地使用事件，这样您就不会锁定特定的控件类型。例如，鼠标特定事件，如 mouseover 和 mouseout，可能会锁定键盘或触摸屏用户。

资源

学习成果

资源

学习成果

了解 WAI-ARIA 的目的——为原本没有语义的 HTML 提供语义，以便 AT 用户能够理解向他们呈现的界面
- ARIA 的第一条规则：“如果您可以使用带有您需要的语义和行为的原生 HTML 元素或属性，而不是重新使用元素并添加 ARIA 角色、状态或属性使其可访问，那么就使用它。”
- 换句话说，使用语义化 HTML 是理想选择，但并非所有时候都可行。WAI-ARIA 是一种针对此类情况的桥接技术。
基本语法——角色、属性和状态。
地标和指路。
增强键盘可访问性。
使用动态区域宣布动态内容更新。

资源