Question

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

在所有模块中实现此功能后，我发现了此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-current="page"来描述导航项目中当前显示的页面。

Answer 2

我认为所选择的咏叹调是用于“小部件”的单一制表位，就像一组标签，然后您可以选择它。选定的方面是哪一个是焦点，不是您所在的页面。

我会把它看作一个经过良好测试的例子： http://whatsock.com/tsg/Coding%20Arena/ARIA%20Menus/Horizontal%20(Internal%20Content)/demo.htm

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

为了显示当前页面，我可能会使用更传统的方法：使它不是链接。 E.g：

<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” or aria-current =“ page”`当前页面（很可能以与其他页面不同的样式显示，但是我们需要对其进行标记适用于屏幕阅读器用户）。

ARIA表示导航中的当前页面

3 个答案: