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

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

更新:

我发现一个答案建议将 anchor 留在菜单的当前页面上，但不确定这是否会给我想要的。

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

Answer 1

正如博客条目 The Accessible Current Page Link Conundrum 中所阐述的那样通过引入属性 aria-current="true" 似乎有一个即将推出的解决方案.

现在，你留在

您发现要么将 anchor 留在当前页面菜单项上

或包括 aria-described属性，指定为 attach descriptive information通过引用一个 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>