正确的ARIA处理面包屑导航 [英] Proper ARIA handling of breadcrumb navigation

问题描述

如何改善面包屑菜单的可访问性，类似于：

What can be done to improve the accessibility of a breadcrumb menu similar to:

<ul class="breadcrumbs" aria-label="breadcrumb navigation" role="navigation">
    <li><a href="~/">Home</a></li>
    <li><a href="~/news">News</a></li>
    <li class="unavailable"><a href="#">@Model.Title</a></li>
</ul>

在此示例中，Home是站点根目录，News是第一个子节点，不可用的类是当前项目/ news / article item。

Given in this example Home is the site root, News is the first child, and the unavailable class is the current item the /news/article item.

是否可以采取任何措施来改善这一点，例如使用 rel 属性或 aria-level 属性？

Is there anything that could be done to improve this such as using rel attributes or aria-level attributes?

推荐答案

我会避免使用 aria-level 并改为使用< ol> 元素。最好避免在存在本机替代方案的地方使用aria属性。使用咏叹调增加了额外的复杂性。简单的HTML要好得多，并且已经具有向AT浮出水面的语义。这是 ARIA的第一条规则。

I would avoid the use of aria-level and use a <ol> element instead. It is best to avoid using aria attributes wherever a native alternative exists. Using aria adds an extra layer of complexity. Simple HTML is far better and already has semantics that are surfaced to AT. This is the first rule of ARIA.

借用 WAI-ARIA-实践文档，面包屑看起来像这样：

Borrowing from the WAI-ARIA-Practices document, breadcrumbs would look like something like this:

<nav aria-label="Breadcrumb" class="breadcrumb">
    <ol>
      <li>
        <a href="../../">
          WAI-ARIA Authoring Practices 1.1
        </a>
      </li>
      <li>
        <a href="../../#aria_ex">
          Design Patterns
        </a>
      </li>
      <li>
        <a href="../../#breadcrumb">
          Breadcrumb Pattern
        </a>
      </li>
      <li>
        <a href="./index.html" aria-current="page">
          Breadcrumb Example
        </a>
      </li>
    </ol>
</nav>

一些注释：

1. 将面包屑包裹在< nav> 元素中，屏幕阅读器用户可以快速找到并跳转到面包屑。


2. 使用< ol> 元素显示屏幕阅读器用户的订单。


3. < ol> 应该是< nav> 的子项。某些实现将 role =nav应用于< ol> 本身。这是错误的，将覆盖默认的< ol> 语义。


4. aria-current 通知屏幕阅读器用户这是当前页面。如果当前页面的最后一个痕迹不是链接，则 aria-current 属性是可选的。

1. Wrapping the breadcrumbs in a <nav> element lets screen reader users quickly find and jump to the breadcrumbs.
2. Using <ol> element surfaces an order to screen reader users.
3. The <ol> should be a child of the <nav>. Some implementations apply role="nav" to the <ol> itself. This is wrong and will override the default <ol> semantics.
4. aria-current informs screen reader users that this is the current page. If the last breadcrumb for the current page is not a link, the aria-current attribute is optional.

这篇关于正确的ARIA处理面包屑导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！