html - 面包屑导航的正确 ARIA 处理

Question

可以做些什么来提高面包屑菜单的可访问性，类似于:

<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 项的当前项。

是否可以通过使用 rel 属性或 aria-level 属性来改善这一点？

Answer 1

我会避免使用 aria-level并使用 <ol>元素代替。最好避免在存在 native 替代项的情况下使用 aria 属性。使用 aria 增加了一层额外的复杂性。简单的 HTML 要好得多，并且已经具有呈现给 AT 的语义。这是 first rule of ARIA .

借自 WAI-ARIA-Practices document ，面包屑看起来像这样:

<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> 的 child .一些实现适用 role="nav"到 <ol>本身。这是错误的，将覆盖默认 <ol>语义。
4. aria-current通知屏幕阅读器用户这是当前页面。如果当前页面的最后一个面包屑不是链接，则 aria-current属性是可选的。