使用 WAI-ARIA 的网站无障碍性指南-JavaScript中文网-JavaScript教程资源分享门户

无障碍性旨在确保 Web 内容和应用程序能够被每个人理解、访问和使用。在 Web 开发中，我们需要为用户提供可访问的组件和内容，以便他们能够与我们的网站进行交互。WAI-ARIA（Web 无障碍和可访问性倡议 — 应用程序界面）是一种技术，可帮助我们构建可访问的 Web 组件。

什么是 WAI-ARIA？

受 WAI-ARIA 标准约束的组件使辅助技术工具可以理解并为其提供适当的标记。这意味着，组件的行为和状态可以传达给屏幕阅读器等辅助技术工具，这使得那些不能看到屏幕的用户也可以与网站进行交互。

WAI-ARIA 定义了几个角色，例如“按钮”、“对话框”和“菜单”，这些角色描述了组件的类型和作用。此外，还有一些状态和属性，例如“打开状态”、“选定值”和“选项卡”等，用于描述组件的更细致的行为和状态。

WAI-ARIA 的指导原则

为了确保 Web 网站能够达到最佳的无障碍性标准，我们需要遵循一些指导原则：

明确定义角色和状态

为所有组件定义适当的角色和状态，这些角色和状态应该能够准确地描述组件的意义和功能。例如，将一个单独的区域标记为“搜索框”而不是一个“文本框“，对于屏幕阅读器用户来说更清晰易懂。

避免重复标记

避免在一个组件上重复标记相同的角色和状态，这些信息可能已经在其父级或祖先元素中定义了。这样做可以减少屏幕阅读器阅读过程中的混乱。

使用语义化 HTML

使用语义化 HTML 标记，这有助于组件在没有 WAI-ARIA 支持的环境中正确渲染。例如，使用相应的标签结构来标记网站的导航栏。

为键盘用户考虑

确保所有交互元素可以通过键盘访问，键盘用户应该能够使用 Tab 键、方向键和特定键来交互。

WAI-ARIA 的应用

下面是一些使用 WAI-ARIA 的示例：

自定义下拉菜单

自定义下拉菜单可以通过以下方式构建：

<button aria-haspopup="true" aria-expanded="false" aria-controls="dropdown-menu">下拉菜单</button>
<div id="dropdown-menu" role="menu" aria-activedescendant="">
  <a href="#" role="menuitem">选项 1</a>
  <a href="#" role="menuitem">选项 2</a>
  <a href="#" role="menuitem">选项 3</a>
</div>

在此示例中，aria-haspopup 指定打开下拉菜单的按钮，并使用 aria-expanded 在打开和关闭菜单时向屏幕阅读器指示其状态。下拉菜单使用带有 role="menu" 属性的 DIV 元素，每个选项都是一个链接元素，其角色设置为 role="menuitem"。 aria-controls 属性指定控制其下拉菜单显示/隐藏的元素。

自定义警告框

以下是如何使用 WAI-ARIA 构建自定义警报框：

<div role="alert" aria-live="assertive" aria-atomic="true" aria-relevant="all" class="alert alert-danger">
  <strong>错误！</strong> 这是一条错误消息。
</div>

在此示例中，警报框使用带有 role="alert" 属性的 DIV 元素。使用 aria-live 和 aria-atomic 将警报框的可见性和可访问性与页面关联起来，这两个属性组合用于确保警报框在插入元素时可以被及时更新，并且更新包含警报框本身的内容。 aria-relevant 属性指定更新警报框的任何部分哪些部分应向屏幕阅读器发出通知。

结论

使用 WAI-ARIA 可以帮助开发人员更好地构建可访问、可操作的组件和内容。在开发网站时，一定要遵循 WAI-ARIA 的指导原则，将角色、状态和属性分配给组件，并考虑键盘用户和语义化 HTML，以确保最佳的可访问性。

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