Question

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

    <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>

在这种情况下，“第1项”只是一个触发器，在hover上显示subnav列表，但它实际上并未链接到任何页面。我经常看到这种结构（通常将e.preventDefault()应用于click事件。）

在这里使用锚标签是否正确？或者使用另一个标签更合适，例如span标签？或其他什么？

锚标签可以按Tab键，但它实际上不会链接到页面。另一方面，span标记没有关注tab键，因此它不为subnav锚点提供上下文。

Answer 1

你应该注意到＆＃34;＃＆＃34;不是有效的网址：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>

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

Answer 2

按照您在问题中发布的统一html结构，这是一种很好的做法。如果“第1项”不是链接，您可以使用tabindex=-1 attr锚标记来避免关注按下标签按钮。

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

在javascript中，您可以使用这一小段代码来避免哈希出现在浏览器地址栏中。

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

Answer 3

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

然而，经过大量的实验，我得出的结论是，最好的屏幕阅读器支持来自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效果最佳。

什么是没有链接到任何东西的subnav项目的正确HTML标记？

3 个答案: