正确的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属性。使用咏叹调增加了额外的复杂性。简单的HTML要好得多，并且已经具有浮出水面的语义。这是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我告诉屏幕阅读器阅读标题。

与克里斯的解决方案相反，<ul>或aria-level都消失了。 如果有必要的话，我会去一个<ol>，因为这些物品都是有序的。最好把它留下来，否则它在每个页面的许多屏幕阅读器中都会变得非常冗长（“List item 1 ...”）。 在我的理解中，aria-level似乎在上述解决方案中被滥用。它必须是child of a role attribute like f.e. role="list"，并且该角色仅表示没有结构上标记的非交互式列表。 也许角色treeitem可能更合适。恕我直言，这太过分了。

PS：我不是在这里使用BEM notation来缩短id和类的可读性。