ARIA表示导航中的当前页面

Question

最近我一直在将ARIA实现到Web应用程序中,我发现这个问题在改进导航部分方面非常有用.

在所有模块中实现此功能后,我发现了此HTML验证错误:

此时aria-selected元素a上不允许属性.

看看ARIA规范,我看到它aria-selected仅用于角色gridcell,选项,行和制表符.就我而言,链接的作用是menuitem.

这是HTML代码的代表性示例:

<nav role=navigation>
    <ul role=menubar>
        <li role=presentation><a href='page1.php' role=menuitem>Page 1</a></li>
        <li role=presentation><a href='page2.php' role=menuitem>Page 2</a></li>
        <li role=presentation><a href='page3.php' role=menuitem aria-selected=true>Page 3</a></li>
        <li role=presentation><a href='page4.php' role=menuitem>Page 4</a></li>
    </ul>
</nav>

如您所见,这是在"第3页"上进行的.

在这里使用的ARIA角色是什么？

Answer 1

我相信 aria-selected 适用于单选项卡停止的“小部件”，就像一组选项卡，然后您可以通过箭头来选择。所选择的方面是关于哪个方面是焦点，而不是您在哪一页。

我会将此作为一个经过充分测试的示例： http://whatsock.com/tsg/Coding%20Arena/ARIA%20Menus/Horizo ​​ntal%20(Internal%20Content)/demo.htm

来自： http: //whatsock.com/tsg/

为了显示当前页面，我可能会使用更传统的方法：使其不是链接。例如：

<li><a href='page2.php'>Page 2</a></li>
<li><strong>Page 3</strong></li>

这也可以防止人们意外点击同一页面的链接（我在可用性测试中经常看到这种情况）。您可以将相同的 CSS 应用到nav ul a和nav ul strong，然后覆盖强样式。