7. 可访问性

最佳实践

核心模块

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

通用资源

7.1 可访问性基础知识

学习成果

理解可访问性的要点——提高所有人的可用性、更好的 SEO 和更广泛的目标受众。另外，请注意法律要求。
理解可访问性应在项目开始时就予以考虑，而不是在最后才进行补充。
理解 Web 内容可访问性指南 (WCAG) 的符合性标准。
使用语义化 HTML，也称为“正确的元素用于正确的工作”，因为浏览器提供了许多内置的可访问性钩子。好的例子是 <a> 和 <input> 元素。
可访问性的最佳实践
- Alt 文本（另见 2.6 媒体）。
- 良好的链接文本（另见 2.5 链接）。
- 表单元素的 <label>（另见 2.7 其他交互式元素）。
- 移动浏览器为特定的 <input> 类型（如 number 或 tel）提供特定的可用性优势。
- 使用 <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 是适用于这种情况的桥接技术。
基本语法——角色、属性和状态。
地标和指示。
增强键盘可访问性。
使用实时区域宣布动态内容更新。

资源