WAI-ARIA-选定/当前菜单项/页面，如何在菜单栏中设置正确的状态？

Question

我正在网站上进行一些代码清理/验证，但遇到了问题。该站点有一个主菜单（菜单），应在其中显示当前页面。

菜单结构如下：

<nav role="navigation">
    <ul role="menubar">
        <li role="menuitem" aria-selected="true">
            <a href="currentpage">Current page</a>
        </li>
        <li role="menuitem">
            <a href="anotherpage">Another page</a>
        </li>
    </ul>
</nav>

根据WAI-ARIA规范，角色选单项上不允许使用aria-selected状态：http : //www.w3.org/TR/wai-aria/states_and_properties#aria-selected。我也找不到菜单项的任何状态，这些状态似乎将菜单项标记为已选中：http : //www.w3.org/TR/wai-aria/roles#menuitem。

菜单栏中所选菜单项/页面的正确实现是什么？

更新：

我找到了一个答案，建议将锚点留在菜单的当前页面上，但不确定是否能满足我的需求。

<li role="menuitem">Current page</li>

Answer 1

正如博客文章“可访问的当前页面链接难题”中很好地阐述的那样，似乎有一个即将推出的解决方案，通过引入该属性aria-current="true"。

现在，你留在

• 您发现将锚点保留在当前页面菜单项上
   

• 或者包含一个aria-described属性，指定该属性通过引用 ID将描述性信息附加到一个或多个元素。例子：

  <nav role="navigation">
      <ul>
          <li><a href="/" aria-describedby="a11y-desc-current">Home</a></li>
          <li><a href="/about/">About</a></li>
          <li><a href="/contact/">Contact</a></li>
      </ul>
      <span id="a11y-desc-current">current page</span>
  </nav>