当下拉项是跨度标签时如何应用键盘可访问性？

如何解决当下拉项是跨度标签时如何应用键盘可访问性？

我在制作自定义下拉菜单时遇到了困难。我正在尝试使其键盘可访问，但我对列表框选项不太走运。我正在按照我在 WCAG 页面下找到的说明进行操作，但我没有任何运气。这是我页面上的下拉菜单之一：

<ul class="custom__options dropdown story-selector" id="storyFilter">
  <li class="custom__option selected" data-type="all" tabindex="0">All</li>
  <li class="custom__option" data-type="news" tabindex="0">News and media</li>
  <li class="custom__option" data-type="analysis" tabindex="0">Analysis</li>
  <li class="custom__option" data-type="press" tabindex="0">Press releases</li>
</ul>

这是一个可以使用的Codepen。

解决方法

您的 Codepen 示例使用 WAI-ARIA 属性，但缺少角色和预期的键盘行为。

为了可访问，所有元素必须至少具有角色和名称。

您的角色向用户承诺该事物是哪种元素，并对该事物的行为方式设定期望。考虑“滑块”的角色。用这个词，您已经向用户传达了很多关于该组件是什么以及它的行为方式的信息。

名称有助于用户理解元素的用途。音量幻灯片的名称将是“音量”。

相关属性和属性通常应用于一个元素，或者通过编码关系隐含（例如使用 aria-labelledby）。您不会在 HTML 中执行以下操作，例如：

<span alt="My image's text alternative">
<img src="image.png">
</span>

然而，我经常在 ARIA menubar 实现中看到这样的事情：

<li role="menuitem">
<a href="#" aria-haspopup="true">Home</a>
</li>

此处有选项，但使用类似的标记，以下内容更适合交互式菜单项：

<li role="none">
<button role="menuitem" aria-haspopup="true">Home</button>
</li>

最好使用语义最接近您希望实现的 HTML 元素，因此使用上面的 <button> 元素。当您采用这种方法时，可以免费获得很多可访问性，因为浏览器添加了用户期望的许多（或全部）行为。

如果您要使用 <div> 和 <span> 元素执行上述操作，则需要启用适当的键盘焦点并处理鼠标和键盘事件。

<div role="menuitem" aria-haspopup="true" tabindex="0">Home</div>

W3C 的 WAI-ARIA Authoring Practices 详细说明了常见设计模式的方法和期望。例如，如果您有多个顶级项目可供选择，您可能需要使用 Navigation Menubar。

基于 Codepen 示例，您要查找的内容 可能类似于 Menu Button（或此 alternative Menu Buttons tutorial），因为您只需要一个下拉菜单而不是比整个菜单栏。这将产生如下内容：

<button aria-expanded="false" aria-haspopup="true">Story type</button>
<div role="menu">
  <button role="menuitem">Home</button>
  <button role="menuitem">All</button>
  <button role="menuitem">News and media</button>
  <button role="menuitem">Analysis</button>
  <button role="menuitem">Press releases</button>
</div>