WAI-ARIA | 如何使用 WAI-ARIA 实现无障碍访问-JavaScript中文网-JavaScript教程资源分享门户

在现代化的 Web 应用程序中，为了满足人类的多样化需求，Web 功能必须适应各种不同的使用情形，包括支持视力、听力和身体上的各种障碍。随着互联网技术的不断发展，这些需求已经变得越来越普遍，并且越来越多的 Web 开发者开始认识到提供无障碍访问是一个必不可少的组成部分，因此 WAI-ARIA 作为一个标准化的技术，被广泛地使用在前端开发中。

什么是 WAI-ARIA？

WAI-ARIA 是 Web 无障碍倡议的一个标准，定义了一组标准化的属性和角色，目的是帮助 Web 开发者在构建现代 Web 时提供有用的语义信息，以提高可访问性。这些角色和属性可以为所有的 HTML 元素添加额外的语义信息，以准确地描述 Web 应用程序中的各种功能和交互。这些角色和属性可以描述关于各种结构、行为、状态和关系的信息。WAI-ARIA 不断演变，目前最新的版本是 WAI-ARIA2.1，其中包含了一些新的角色和属性，以及一些重要的更新和改进。

虽然 WAI-ARIA 提供了很多有用的功能和信息，但只有在正确使用时它才能真正发挥作用，因此在进行无障碍访问时，充满细节和问题需要被处理和解决。接下来，我们就来看一些具体的实例和指南。

如何使用 WAI-ARIA？

角色

WAI-ARIA 定义了大量的属性和角色，这些角色有助于为许多有关功能和交互的重要信息提供描述。以下是一些常用的角色：

Alert：一个需要特别关注的信息
Button：与按钮相同的聚焦性质，可以被单击
Checkbox：表示可选项的复选框
Dialog：表示一种可以引起注意的信息或者供资料输入的表单
Grid：表示包含文本或者界面控件的二位表
ListBox：表示可用的选项列表，包含一到多个选项
Menu：与下拉菜单相同的下拉表
RadioGroup：集中显示选项的单选钮
Slider：表示拉杆、滑动条或控制调节的组件
SpinButton：表示数值调节的组件
Tab：基于 Tab 的导航和 UI 组件
Toolbar：用于包含程序上方的操作按钮
Tooltip：表示提示框以解释 UI 控件的功能或信息内容
TreeGrid：表示由结构化控件组成的类似网格的控件

不同的角色组合可以描述不同的组件，例如，菜单可以由菜单项和菜单选项组成，这些组件都有不同的角色，可以用来说明它们的用途、状态、集中点等等。在为 HTML 元素定义 WAI-ARIA 属性时，可以使用 role 属性来描述它们的角色。

<nav role="navigation">
   <ul>
      <li><a href="#home">首页</a></li>
      <li><a href="#about">关于我们</a></li>
      <li><a href="#more">更多</a></li>
   </ul>
</nav>

在这个例子中，nav 元素的 role 属性被设置为 "navigation"，以便屏幕阅读器等其他弱化设备可以识别它为 nav 元素，而不是其他普通的 div 元素。

属性

WAI-ARIA 也提供了一些属性，以描述不同功能和交互的状态和关系。以下是一些常用的属性：

aria-checked：被用于表示一个复选框或单选钮的选定状态
aria-disabled：被用于表示一个无法交互的元素或组件，例如按钮
aria-expanded：被用于表示折叠内容的当前状态
aria-haspopup：被用于表示当一个主导元素被激发时会出现子菜单、下拉框等其他选项
aria-label：被用于提供一个元素或组件的文字描述或说明，从而改善无障碍使用体验
aria-level：被用于表示一个标头元素的重要性和层级关系
aria-selected：被用于表示一个选项卡或列表选项的选中状态

对于每个 HTML 元素，可以使用这些属性来描述它们的状态和功能。下面是一个使用了 aria-checked 和 aria-disabled 属性的例子：

<label>
   <input type="checkbox" aria-checked="false" aria-disabled="false">
   此条目尚未完成
</label>

在这个例子中，“此条目尚未完成” 文本旁边有一个复选框，被设置为未选中的状态（ aria-checked="false"）。这个复选框也没有被禁用（aria-disabled="false"）。

注意事项

虽然使用 WAI-ARIA 技术可以大大提高无障碍访问的水平，但是在使用之前，需要考虑和解决一些问题。以下是一些注意事项：

如果有可行的 HTML 元素和标准文本格式，应该优先使用它们，而不是使用 WAI-ARIA 来提供额外的语义信息。
不要依赖 "aria-hidden" 或者 "display:none;" 来隐藏元素。
如果当前容器的"role"属性是"table","row","column","list","listitem","menu","menubar","navigation","progressbar","tablist","toolbar","region",则不要在子级中使用该容器名开头的"role"属性。
避免使用相同的文字描述来标识多个不同的组件。
如果需要提供更复杂的功能和交互，建议使用辅助技术，例如 JavaScript 和键盘快捷键等。

值得注意的是，虽然 WAI-ARIA 可以帮助提高无障碍访问，但是它还不足以解决所有的问题。它只是提供了一个机制，将额外的语义信息添加到 HTML 元素中，以便弱化设备和人类用户可以更好地理解 Web 应用程序，并且进行合适的交互。因为每个 Web 应用程序对于人类用户的需求是不同的，所以对于 WAI-ARIA 技术的正确使用需要考虑到很多因素。

总结

WAI-ARIA 技术在前端开发中被广泛使用，由于它提供的可以为所有 HTML 元素添加额外的语义信息，以准确地描述 Web 应用程序中的各种功能和交互，因此，它需要被正确地应用，以便帮助实现无障碍访问。在实际应用中，需要根据具体情况来决定是否使用和如何使用 WAI-ARIA 技术，并考虑到一些注意事项。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64dd07e8f6b2d6eab381ac85