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

问题描述

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

I'm doing some code clean up / validation in a web site, and have run into an issue. The site have a main menu (menubar) where the current page should be indicated.

菜单结构如下：

<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： 。我也找不到菜单项的任何状态，这些状态似乎将菜单项标记为已选择：。

According to the WAI-ARIA spec, the state aria-selected is not allowed on the role menuitem: http://www.w3.org/TR/wai-aria/states_and_properties#aria-selected. Neither can I find any state for menuitem that seem to mark the menuitem as selected: http://www.w3.org/TR/wai-aria/roles#menuitem.

在其中选择的菜单项/页面的正确实现是什么？

What would be the correct implementation of a selected menuitem/page in a menubar?

更新：

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

I found one answer suggesting to leave the anchor out on the current page in the menu, but not sure if that will give me what I want.

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

推荐答案

在博客条目 通过引入属性。

As laid out very nicely in the blog entry The Accessible Current Page Link Conundrum there seems to be an upcoming solution by introducing the attribute aria-current="true".

现在，您留在

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



• 或包含一个 aria描述的属性，该属性指定给附加到一个或多个元素。示例：

• your finding of either leaving the anchor out on the current page menu item
   

• or include an aria-described attribute, which is specified to attach descriptive information to one or more elements by referencing an ID. Example:

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

这篇关于WAI-ARIA-选定/当前菜单项/页面，如何在菜单栏中设置正确的状态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！