随着网络的普及，越来越多的人开始通过电子设备访问网站。对于一些有视觉、听力等障碍的用户，能否用流畅的方式访问网站是一种权利。为了保障这些用户的权利，现代网站已经开始实施无障碍设计。
ARIA（Accessible Rich Internet Applications）是一种用于提高残障用户访问 Web 应用程序的技术。然而，ARIA 标签在使用时也可能存在一些无障碍问题，本文将介绍如何识别和修复这些问题。
识别 ARIA 无障碍问题
要识别 ARIA 标签中的无障碍问题，可以使用浏览器开发者工具中的覆盖视图（overlay）功能。以 Chrome 浏览器为例，在开发者工具中，点击 Elements 标签页，然后选择 Show Rendering 组下的 Show Layout Shift Regions 或 Show Scroll Anchoring Regions 选项。这样可以高亮出那些因为无障碍问题而需要重绘的区域。
这样做后，如果页面上红色区域比较多，那么就说明该页面存在较多的无障碍问题。接下来，我们就要来修复这些问题。
修复 ARIA 无障碍问题
1. 使用正确的 ARIA 标签
ARIA 规范提供了多种标签用于实现无障碍交互效果。要让无障碍用户正确理解页面中所展示的信息，我们必须根据实际情况选择正确的标签。
例如，在一段菜单中，我们经常使用 li 和 ul 标签实现。但对于残障用户来说，这些标签并无实际含义，他们需要使用 tabindex 和 aria-haspopup 属性，并将菜单项设为按钮标签，以表明这些元素是一个菜单，并且能够展开子菜单。
-- -------------------- ---- -------
----
----
------- ------------ ----------------------------------
----
------ --------------------------
------ --------------------------
-----
-----
-----2. 确保 ARIA 标签使用正确
除了选择正确的 ARIA 标签外，还必须确保标签使用正确。例如，role 属性必须与元素类型的 role 相匹配。如果 role 属性所指定的 role 与元素实际的 role 不符合，那么这个 role 属性就没有意义。
<div role="menu"> <div role="menuitem">Menu Item 1</div> <div role="menuitem">Menu Item 2</div> <div role="menuitemcheckbox" aria-checked="false">Checkbox 1</div> <div role="menuitemcheckbox" aria-checked="false">Checkbox 2</div> </div>
3. 使用正确的 ARIA 状态
ARIA 状态用于表示元素的状态或属性。与 role 属性类似，aria 前缀必须与使用的状态相匹配。如果 aria 前缀与状态不符合，那么无障碍用户可能无法正确理解这些状态。
<select aria-expanded="false"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select>
4. 避免过度使用 ARIA
虽然 ARIA 可以帮助我们实现无障碍效果，但是过度使用或滥用 ARIA 可能会导致无障碍问题。
例如，在大多数情况下，我们都不需要对按钮和链接元素添加 role 属性，因为这些元素本身就有明确的 role（button 和 link）。在这种情况下，添加不必要的 role 属性可能会导致无意义的冗余信息。
<button role="button">Click Me</button> <a role="link" href="#">Link</a>
总结
无障碍设计已经成为现代设计的重要组成部分，它有助于提高残障用户的访问体验，使网站变得更加包容。在实现无障碍设计时，我们必须正确地使用 ARIA 标签，并确保这些标签被正确地使用。要确保 ARIA 标签没有无障碍问题，我们可以使用浏览器开发工具中的覆盖视图功能来识别问题。有了这些知识，我们就可以在现有网站上实现无障碍设计，以及在新的网站设计中融入无障碍设计。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ee93e1f6b2d6eab388abed