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

使用屏幕阅读器并阅读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 2

我会避免使用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>

一些注意事项：

将面包屑包裹在<nav>元素中可让屏幕阅读器用户快速找到并跳转到面包屑。
使用<ol>元素表面订阅屏幕阅读器用户。
<ol>应该是<nav>的孩子。某些实现将role="nav"应用于<ol>本身。这是错误的，将覆盖默认的<ol>语义。
aria-current通知屏幕阅读器用户这是当前页面。如果当前页面的最后一个痕迹不是链接，则aria-current属性是可选的。

Answer 3

在网上搜索可访问面包屑的彻底解决方案时，@ 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>，因为这些项目是订单。最好把它留下来，否则它在每个页面的许多屏幕阅读器中都会变得非常冗长（“List item 1 ...”）。
在我的理解中，aria-level似乎在上述解决方案中被滥用。必须为child of a role attribute like f.e. role="list"，该角色只表示没有结构标记的非交互式列表。
也许角色treeitem可能更合适。恕我直言，这太过分了。

PS：我这里没有使用BEM notation缩短id和类的可读性。

Answer 4

您可以使用如下

<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>

正确的ARIA处理面包屑导航

4 个答案: