在前端开发中，我们经常需要设计复杂的交互组件，比如下拉菜单、模态框等等。然而，这些组件在设计时往往只考虑了视觉效果，却忽略了可访问性，导致一些用户无法使用这些组件。为了解决这个问题，我们可以使用 WAI ARIA 标准提升复杂交互组件的可访问性。
什么是 WAI ARIA？
WAI ARIA（Web Accessibility Initiative - Accessible Rich Internet Applications）是一个由 W3C 组织推出的标准，旨在提高 Web 应用程序的可访问性。它为开发人员提供了一组属性和角色，用于描述 Web 应用程序中的交互组件，从而使残障用户能够更好地使用这些组件。
WAI ARIA 的作用
WAI ARIA 标准的作用在于描述 Web 应用程序中的交互组件，这些组件可能无法通过 HTML 标签和属性来描述。WAI ARIA 提供了一组属性和角色，用于描述这些交互组件的行为和状态，从而使残障用户能够更好地使用这些组件。
WAI ARIA 标准的使用可以提升 Web 应用程序的可访问性，包括：
- 视觉障碍用户：使用屏幕阅读器等辅助技术访问 Web 应用程序时，可以通过 WAI ARIA 描述的属性和角色来了解交互组件的行为和状态。
- 身体障碍用户：使用键盘等辅助设备访问 Web 应用程序时，可以通过 WAI ARIA 描述的属性和角色来操作交互组件。
- 认知障碍用户：通过 WAI ARIA 描述的属性和角色，可以使交互组件更加可预测和易于理解。
WAI ARIA 的属性和角色
WAI ARIA 标准提供了一组属性和角色，用于描述 Web 应用程序中的交互组件。下面是一些常用的属性和角色：
属性
- aria-label：为交互组件添加一个描述性文本，用于提供给屏幕阅读器等辅助技术使用。
- aria-describedby：指定一个元素或多个元素的 ID，用于提供给屏幕阅读器等辅助技术使用，描述交互组件的详细信息。
- aria-disabled：指定交互组件是否禁用。
- aria-checked：指定复选框或单选框的选中状态。
- aria-selected：指定选项卡或列表中的选中状态。
- aria-expanded：指定下拉菜单或折叠面板的展开状态。
角色
- button：按钮。
- link：链接。
- checkbox：复选框。
- radio：单选框。
- textbox：文本框。
- combobox：下拉菜单。
- listbox：列表框。
- menu：菜单。
- menuitem：菜单项。
- dialog：模态框。
使用 WAI ARIA 提升可访问性
下面我们以一个下拉菜单为例，来介绍如何使用 WAI ARIA 提升交互组件的可访问性。
HTML 结构
首先，我们需要为下拉菜单添加一个角色和一些属性：
<button id="dropdownButton" aria-haspopup="true" aria-expanded="false" aria-controls="dropdownMenu"> 下拉菜单 </button> <ul id="dropdownMenu" role="menu" aria-labelledby="dropdownButton" tabindex="-1"> <li role="menuitem"><a href="#">选项一</a></li> <li role="menuitem"><a href="#">选项二</a></li> <li role="menuitem"><a href="#">选项三</a></li> </ul>
aria-haspopup属性指定下拉菜单的类型为弹出式菜单。aria-expanded属性指定下拉菜单的展开状态，默认为关闭状态。aria-controls属性指定下拉菜单的控制元素为按钮。role="menu"属性指定下拉菜单的角色为菜单。aria-labelledby属性指定下拉菜单的标签为按钮。role="menuitem"属性指定下拉菜单中的选项为菜单项。
CSS 样式
接下来，我们需要为下拉菜单添加一些 CSS 样式，以使其更加易于使用：
-- -------------------- ---- ------- ------------- - -------- ----- --------- --------- -------- -- ----------- ----- -------- -- ------- -- ----------------- ------ ------- --- ----- ----- ----------- - --- --- ------- -- -- ----- - ----------------------------------- - -------- ------ - ------------- -- - ------- -- - ------------- -- - - -------- ------ -------- --- ----- ---------------- ----- ------ ----- - ------------- -- ------- - ----------------- -------- -
display: none属性指定下拉菜单默认隐藏。position: absolute属性指定下拉菜单的位置为绝对定位。z-index: 1属性指定下拉菜单的层级为最高。list-style: none属性去除下拉菜单的列表样式。background-color: white属性指定下拉菜单的背景色为白色。border: 1px solid #ccc属性指定下拉菜单的边框为灰色。box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)属性指定下拉菜单的阴影效果。#dropdownMenu[aria-expanded="true"]选择器指定下拉菜单展开时显示，关闭时隐藏。#dropdownMenu li属性指定下拉菜单中的选项无间距。#dropdownMenu li a属性指定下拉菜单中的选项为块级元素，添加内边距和颜色。#dropdownMenu li a:hover属性指定下拉菜单中的选项在鼠标悬停时添加背景色。
JavaScript 交互
最后，我们需要为下拉菜单添加一些 JavaScript 交互，以使其更加易于使用：
-- -------------------- ---- ------- ----- -------------- - ------------------------------------------ ----- ------------ - ---------------------------------------- ---------------------------------------- ---------- - ----- -------- - -------------------------------------------- --- ------ -- ------ -------------------------------------------- ----------- --------------------- --- ------------------------------------- ---------- - -------------------------------------------- --------- ---
dropdownButton变量获取按钮元素。dropdownMenu变量获取下拉菜单元素。click事件监听按钮的点击事件，切换下拉菜单的展开状态。getAttribute('aria-expanded')方法获取下拉菜单的展开状态。setAttribute('aria-expanded', !expanded)方法切换下拉菜单的展开状态。focus()方法使下拉菜单获取焦点。blur事件监听下拉菜单的失焦事件，关闭下拉菜单。
总结
使用 WAI ARIA 标准可以提升 Web 应用程序的可访问性，使残障用户能够更好地使用复杂交互组件。在设计交互组件时，我们应该考虑到可访问性，并使用 WAI ARIA 标准来描述交互组件的行为和状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6634828cd3423812e4205524