如何使用 ARIA 标记让你的菜单更具可访问性
在现代 Web 开发中，提供无障碍访问的用户体验已经成为一项越来越重要的任务。ARIA（Accessible Rich Internet Applications）标记是一组可以帮助开发者改善可访问性的属性和角色。在本文中，我们将学习如何使用 ARIA 标记让菜单更具可访问性。
什么是 ARIA？
ARIA 是由 Web 开发社区定义的一组标记，旨在改善可访问性，使有特殊需求的用户能够更轻松地使用 Web 应用程序。使用 ARIA 标记可以增强 HTML 元素的行为和性能，提高用户体验，包括配合使用辅助技术，如屏幕阅读器。
菜单的可访问性问题
在许多 Web 应用程序中，菜单是一项关键功能，却也是可访问性挑战最多的部分之一。一些菜单的问题包括：
- 没有足够的语义标记： 不正确标记菜单，如使用纯 div 或 span 标记，会使得辅助技术无法正确地处理菜单。
- 缺乏键盘导航支持： 如果菜单无法通过键盘访问，则用户就需要手动点击菜单，这对于使用屏幕阅读器或笔势控制器的人来说可能非常困难。
- 缺乏上下文感知： 使用屏幕阅读器时，用户需要了解菜单当前显示的是什么，但通常会遇到没有上下文感知的问题。
如何使用 ARIA 改善菜单的可访问性
添加语义标记
使用 ARIA 标记可以为开发者提供更加丰富的语义和角色，帮助有特殊需求的用户理解和交互您的菜单。HTML 元素具有自己的一组角色和属性，但是它们并不总是足够。例如一个 div 元素可能会用于包含多个按钮，但是无法确定这些按钮是否为同一菜单的一部分或者是单独的命令。
下面是一个使用 ARIA 标记的简单菜单示例，其中使用了两个角色：menu 和 menuitem：
<div role="menu"> <button role="menuitem">Item 1</button> <button role="menuitem">Item 2</button> <button role="menuitem">Item 3</button> </div>
该示例中，我们将 div 元素的 role 属性设置为“menu”，表示该元素包含的是一个菜单，而每个按钮的 role 属性均为“menuitem”，表示这些按钮均属于该菜单的一部分。
支持键盘导航
使用 ARIA 标记可以帮助支持键盘导航，特别是当菜单有多个层级时。下面是一个基本级别的多层级菜单，其中使用了 role 和 aria 属性：
-- -------------------- ---- -------
-----
--- ----------- --------------- ----- ------
--- --------------- ----------------------- ------------- ---- -----
--- ----------- ---------------------
--- ------------------ ---------------- ---- ----------
--- ------------------ ---------------- ---- ----------
--- ------------------ ---------------- ---- ----------
-----
-----
--- ------------------ ------------- ---- ----------
--- ------------------ ------------- ---- ----------
-----
------该示例中，我们首先设置了一个 nav 元素，然后创建了一个 ul 元素，带有角色“菜单”，以及一个描述该菜单的 aria-label 属性。每个菜单项目都是一个 li 元素，包含一个链接元素和一个具有“菜单项目”角色和“aria-haspopup”属性的 ul 元素。这告诉屏幕阅读器该链接有一个下拉菜单。
提供上下文信息
菜单中的上下文信息是非常重要的，因为它能帮助有特殊需求的用户正确地理解和使用菜单。当菜单打开时，在屏幕阅读器中提供足够的上下文信息，可以让用户更容易地了解当前显示的菜单项目。
以下是一个可以提供菜单上下文信息的 ARIA 示例。当菜单打开时，屏幕阅读器会提供描述性信息，以辅助用户确定其当前位置：
-- -------------------- ---- -------
-----
--- ----------- ------------------- ------
--- --------------- ----------------------- ------------- -----
--- ----------- ------------------- - ---- ---
--- ------------------ ---------------- ----------
--- ------------------ ---------------- ----------
--- ------------------ ---------------- ----------
-----
-----
--- --------------- ----------------------- ------------- ----------
--- --------------- ----------------------- ------------- ----------
-----
------在该示例中，我们为每个下拉菜单提供了一个 aria-label 属性，以便在打开菜单时告诉屏幕阅读器菜单的上下文关系。
结论
通过添加 ARIA 标记，我们可以帮助菜单变得更具可访问性，提高用户体验。通过正确的语义标记，支持键盘导航，以及提供上下文信息，我们可以使菜单变得无障碍，并能够为所有用户提供更好更友好的体验。
接下来，如果您还没有在菜单中使用 ARIA 标记，我建议您尝试一下，并观察您的用户的反馈。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f143666fbf96019738ca52