对于没有 link 任何内容的子导航项，正确的 HTML 标签是什么？

Question

我正在考虑一个导航菜单，其中一些项目只是子导航的标签。例如：

    <ul>
      <li><a href="#">Item 1</a>
        <ul>
          <li><a href="/subitem1.html">Subitem 1</a></li>
          <li><a href="/subitem2.html">Subitem 2</a></li>
          <li><a href="/subitem3.html">Subitem 3</a></li>
        </ul>
       </ul>
      </li>
      ...
    </ul>

在这种情况下，"Item 1" 只是一个触发器，它在 hover 上显示 subnav 列表，但它实际上不会 link 到任何页面。我经常看到这种结构（通常 e.preventDefault() 应用于 click 事件）。

这里使用锚标签合适吗？还是使用另一个标签更正确，例如 span 标签？或者别的什么？

一个锚标签可以通过按Tab键获得焦点，但它实际上不会link到一个页面。另一方面，span 标签没有聚焦在 Tab 键上，因此它不会为子导航锚点提供上下文。

Answer 1

遵循您在问题中发布的统一 html 结构是一种很好的做法。如果 "Item 1" 不是 link，您可以使用 tabindex=-1 attr 锚标记来避免焦点在选项卡按钮按下上。

<a class="yourclassname" href="#" tabindex=-1 rel="nofollow">Item 1</a>

在javascript中，你可以有这么一小段代码来避免hash出现在浏览器地址栏中。

addEventListener('click', function (e) {
    if (e.target.classList.contains('yourclassname')) {
        e.preventDefault();
    }   
});

Answer 2

您应该注意“#”不是有效的 URL：https://www.webaccessibility.com/best_practices.php?best_practice_id=946

但是您可以完美地使用子菜单的锚点，因为它反映了您的导航

<ul>
  <li><a href="#subnav1">Item 1</a>
    <ul id="subnav1" tabindex="-1">
      <li><a href="/subitem1.html">Subitem 1</a></li>
      <li><a href="/subitem2.html">Subitem 2</a></li>
      <li><a href="/subitem3.html">Subitem 3</a></li>
    </ul>
   </ul>
  </li>
  ...
</ul>

编辑：正如评论所指出的，应该在 ul 元素上设置 tabindex=-1 属性，以便键盘可访问。

Answer 3

我认为，在您的情况下，使用 <button> 元素可提供最佳的语义和键盘导航。

但是，经过大量实验后，我得出结论，最好的屏幕 reader 支持来自 Open Ajax 人员和 Terril Thompson 展示的结构类型。他们的例子得到了 ARIA 最好的语音反馈。您会注意到他们不使用 <a> 或 <button> 来切换子导航列表。参见 Terrell's sample。

注意“关于”<li>:

<ul id="nav" class="menubar root-level" role="menubar">
   <li class="menu-parent" role="menuitem" tabindex="0" aria-haspopup="true" title="About Menu">
      About
        <ul id="about" role="menu" class="menu" aria-hidden="true">
           <li role="menuitem" class="menu-item" tabindex="-1">
// etc. //

<li> 通过 tabindex 属性和 JavaScript 事件侦听器变得可聚焦和可点击。

我看到的优势是，当焦点位于子列表的父元素上时，ARIA 效果最佳。

对于没有 link 任何内容的子导航项，正确的 HTML 标签是什么？

What's the right HTML tag for a subnav item that doesn't link to anything?

html

navigation

accessibility