我正在网站上进行一些代码清理/验证,并遇到了一个问题.该网站有一个主菜单(菜单栏),其中应显示当前页面.
菜单结构如下:
<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: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>
最佳答案 正如在博客条目
The Accessible Current Page Link Conundrum中非常好地展示的那样,通过引入属性
aria-current="true"
似乎有即将到来的解决方案.
现在,你留下来
>您要么将锚点留在当前页面菜单项上
>或包含aria描述的属性,通过引用ID将其指定给attach descriptive information一个或多个元素.例:
<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>