7

最近我一直在将 ARIA 实现到 Web 应用程序中,我发现这个问题对改进导航部分很有帮助。

在所有模块中实现后,我发现了这个 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 角色是什么?

4

3 回答 3

3

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

于 2017-10-25T12:58:59.620 回答
2

我相信 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 anav ul strong然后覆盖强的样式。

于 2013-10-26T12:37:31.937 回答
1

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