无障碍性对于前端开发来说是一个重要的主题。HTML 中可访问性属性 (A11y) 可以帮助开发者为残障人士和使用辅助技术的人提供更好的用户体验。
aria-haspopup 是一种可访问性属性，用于告知屏幕阅读器和其他辅助技术一个元素是否具有下拉菜单或下拉列表的功能。这个属性可以帮助用户更好地使用网站，并在需要时提供有关下拉菜单的上下文信息。
如何使用 aria-haspopup 属性
aria-haspopup 属性支持四种值：menu、listbox、tree 和 dialog。下面是一个示例：
<button aria-haspopup="menu">Open Menu</button> <ul class="menu"> <li><a href="#">Menu Item 1</a></li> <li><a href="#">Menu Item 2</a></li> <li><a href="#">Menu Item 3</a></li> </ul>
在这个例子中，我们将 aria-haspopup 属性设置为 "menu"，因为下拉菜单是通过一个带有其中的选项列表的菜单触发的。
使用 aria-haspopup 属性的其他示例包括：
- 使用 aria-haspopup="listbox" 属性展示提供一个可用于筛选的选项
- 使用 aria-haspopup="tree" 属性展示一个带有分支和节点的层次结构
- 在 aria-haspopup="dialog" 属性上附加一个弹出窗口
总之，无论你使用哪个值，所有这些属性都将在屏幕阅读器或其他辅助技术表明哪些元素具有下拉菜单或下拉列表功能，并告知用户如何使用它们。
如何优化 aria-haspopup 属性的使用
aria-haspopup 使得下拉菜单的使用变得更加友好，但是，我们可以在进一步优化使用这个属性的同时来提高无障碍性。
以下是一些有助于提高无障碍性的技巧：
1. 使用 aria-expanded 属性
aria-expanded 属性用于标识元素是否处于展开或收起的状态。如果下拉菜单是展开的，我们可以将 aria-expanded 设置为 "true"，如果下拉菜单是收起的，我们将其设置为 "false"。这可以帮助屏幕阅读器可以更好地为用户提供上下文信息。
<button aria-haspopup="menu" aria-expanded="false">Open Menu</button> <ul class="menu"> <li><a href="#">Menu Item 1</a></li> <li><a href="#">Menu Item 2</a></li> <li><a href="#">Menu Item 3</a></li> </ul>
2. 使用 tabindex 属性
使用 tabindex 属性可以使用户更容易地访问和使用下拉菜单。 tabindex 属性用于指定页面元素的 tab 键顺序。当它的值为 "0" 时，用户可以使用 tab 键聚焦到元素上。
<button aria-haspopup="menu" aria-expanded="false" tabindex="0">Open Menu</button> <ul class="menu"> <li><a href="#">Menu Item 1</a></li> <li><a href="#">Menu Item 2</a></li> <li><a href="#">Menu Item 3</a></li> </ul>
3. 提供提醒或键盘快捷键
提供提醒或键盘快捷键可以更好地帮助用户使用下拉菜单。对于键盘用户，可以使用键盘快捷键来扩展和关闭下拉菜单。例如，按下空格键可以展开菜单，按下 esc 键可以关闭菜单。对于鼠标用户来说，可以为下拉菜单提供一个提醒，以告知用户，点击下拉菜单将展开选项。
-- -------------------- ---- ------- ------- -------------------- --------------------- ------------ ------------------ -- -------- ---- ---- ----- ------------------------- --------------------------- --------- --- ------------- ------ -------- ------------------ ---- ---------- ------ -------- ------------------ ---- ---------- ------ -------- ------------------ ---- ---------- -----
在这个例子中，我们提供了一个 "Select an option" 的 aria-label，它为屏幕阅读器提供了上下文信息，使得用户可以更好地了解下拉菜单的功能。
4. 确保下拉菜单在键盘焦点内
确保下拉菜单在键盘焦点内也是非常重要的。对于键盘用户，必须能够使用 tab 键将焦点移动到下拉菜单中。如果下拉菜单在视觉上隐藏或不可见，确保菜单的 z-index 值是适当的使得焦点可以进入。
.menu {
position: absolute;
top: 100%;
left: 0;
display: none;
z-index: 1;
}在这个 CSS 样式中，我们将下拉菜单的 display 设置为 none 以使其视觉上隐藏（可以通过 JavaScript 将它们展开）。在菜单中设置了一个适当的 z-index 值以确保当菜单展开时，焦点可以正确保持在它内部。
结论
使用 aria-haspopup 属性可以大大提高无障碍性上，但是有很多其他的技术和技巧可以使用来提高用户的可访问性。了解如何使用这些属性是非常重要的，也可以继续探索其他的 a11y 相关的技术和无障碍性的最佳实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671d35829babaf620fb50248