在导航中，当前页面使用哪个ARIA状态角色？

Question

最近，我一直在将ARIA应用于网络应用程序，并发现这篇文章对于改进导航部分非常有帮助。

在所有模块中实现后，我发现了这个HTML验证错误：

属性aria-selected在此时不允许出现在元素a中。

查看ARIA规范，我发现aria-selected只在角色gridcell、option、row和tab中使用。在我的情况下，链接的角色是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角色？

(ARIA 是一种用于使网站内容可访问性更高的技术规范。)

- rink.attendant.6

Answer 1

您也可以使用aria-current="page"来描述导航项中当前显示的页面。

- Jan Stanicek

---

请参考以下链接以获取更多解释：https://tink.uk/using-the-aria-current-attribute/ - murb

Answer 2

我认为 aria-selected 是针对“小部件”的，这些小部件是一次只能选择一个选项卡，比如一组选项卡，然后你可以使用箭头来选择。所选的方面是关于哪个在焦点上，而不是你在哪个页面上。

我建议您查看这个经过充分测试的示例：http://whatsock.com/tsg/Coding%20Arena/ARIA%20Menus/Horizontal%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，然后覆盖强调样式。

- AlastairC

---

这回答了关于aria-selected的作用的问题，但没有回答“如何确定我在哪个页面”的问题。不过这是一个有趣的演示。 - rink.attendant.6

啊，好的，我已经添加了一些关于当前页面的内容，这有帮助吗？ - AlastairC

Answer 3

简短回答：您可以使用aria-current="page"或aria-current="location"来指示链接列表中的当前链接。

您的分页组件在可访问性方面可以改进（您可以将其视为类似面包屑导航模式的变体）：

<nav aria-label="pagination">
  <ol>
    <li>
      <a href="/results/1">Page 1</a>
    </li>
    <li>
      <a href="/results/2">Page 2</a>
    </li>
    <li>
      <a href="/results/3" aria-current="location">Page 3</a>
    </li>
    <li>
      <a href="/results/4">Page 4</a>
    </li>
  </ol>
</nav>

几点注意事项：

• 使用<nav>可以自动使用导航地标（<nav>相当于<div role="navigation">但更短更优雅）
• 使用aria-label为<nav>提供有意义的名称（很可能，页面上有更多的<nav>元素，您应该相应地标记每个元素）。
• 使用<ul>使链接集合具有结构。这也可以帮助屏幕阅读器用户，因为它将被宣布为“分页，导航（下一页）列表，4项”，帮助用户了解有多少页。
• 使用aria-current="location"或aria-current="page"来标记列表的当前页面（这很可能以与其他页面不同的样式显示，但我们需要为屏幕阅读器用户标记它）。

- lucalanca