导航中当前页面使用什么 ARIA 状态角色

Question

最近我一直在将 ARIA 实现到 Web 应用程序中，我发现 this question 对改进导航部分很有帮助。

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

此时，元素 a 上不允许使用属性 aria-selected。

查看 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 角色是什么？

Answer 1

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

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，然后覆盖强的样式。

Answer 3

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

您的分页组件可以在可访问性方面得到改进（您可以将其视为类似 breadcrumbs pattern 的变体）：

<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> 元素，您应该相应地标记每个元素）。
• 用于使链接集结构化。这也可以帮助屏幕阅读器用户，因为它将被宣布为“分页，导航（下一个）列表，4 项，帮助用户了解有多少页。
• 使用 aria-current="location"oraria-current="page"` 列表的当前页面（这很可能以与其他页面不同的样式显示，但我们需要将其标记为屏幕读者用户）。