正确处理面包屑导航的 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> 元素。最好避免在存在本地替代方案的地方使用 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> 的子代。一些实现将role="nav" 应用于<ol> 本身。这是错误的，将覆盖默认的<ol> 语义。
4. aria-current 通知屏幕阅读器用户这是当前页面。如果当前页面的最后一个面包屑不是链接，aria-current 属性是可选的。

Answer 2

从使用屏幕阅读器到阅读this blog post，rel 属性不会对 A.T. 产生影响。至于使用aria-level，放在锚标签上就可以了。我还建议将列表包装在 nav 元素中，出于语义目的，并在您不需要时无需在列表中放置导航角色。

我最终使用了这个标记，因为我认为它是一个不错的面包屑。使用 CSS 隐藏子弹（恐怕我没有停下来这样做），我会说它很好。

<nav aria-label="breadcrumb" role="navigation">
  <ul>
    <li><a href="#" aria-level="1">Home</a></li>
    <li><a href="#" aria-level="2">News</a></li>
  </ul>
</nav>

希望这会有所帮助！

Answer 3

你可以像下面这样使用

<nav role="navigation"  aria-label="breadcrumbs">
    <p id="breadcrumblabel">You are here:</p>
    <ol id="breadcrumb" aria-labelledby="breadcrumblabel">
        <li><a href="index.html" title="Home">Home</a></li>
        <li><a href="products.html" title="Menu1">Menu1</a></li>
        <li><a href="shoes.html" title="Menu2">Menu2</a></li>
    </ol>
</nav>

Answer 4

在网上搜索可访问面包屑的彻底解决方案时，@Craig Brett 的解决方案乍一看似乎不错。但是在阅读了几个来源之后，aria-level 似乎在那里被滥用（除了 W3C 验证问题，请参阅我上面的评论）。
因此，我想提出这种方法：

<nav aria-labelledby="bc-title" role="navigation">
    <h6 id="bc-title" class="vis-off">You are here:</h6>
    <a href="~/" aria-labelledby="bc-level-1">
        <span id="bc-level-1" class="vis-off">Homepage Website-Title </span>Home
    </a>
    <a href="~/news" aria-labelledby="bc-level-2">
        <span id="bc-level-2" class="vis-off">Level 2: News </span>News
    </a>
    <a href="#" aria-disabled="true">@Model.Title</a>
</nav>

在这个解决方案中，我们有一个 HTML5 分段元素 (nav)，它应该 有一个标题，并且 *tada* 在那里。 vis-off 类表示仅对屏幕阅读器可用的元素。使用aria-labelledby，我是在告诉屏幕阅读器阅读该标题。

与 Chris 的解决方案相比，<ul> 或 aria-level 不存在了。
如有必要，我会选择<ol>，因为这些物品是按order 的。最好把它去掉，否则它会在每个页面上的许多屏幕阅读器中变得非常冗长（“列表项 1……”）。
在我的理解中，aria-level 似乎在上述解决方案中被滥用。它必须为child of a role attribute like f.e. role="list"，并且该角色仅表示未在结构上标记的非交互式列表。
也许treeitem 的角色可能更合适。恕我直言，这是矫枉过正。

PS：我在这里没有使用BEM notation 来缩短 id 和类以提高可读性。