正确的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要好得多,并且已经具有浮出水面的语义.这是ARIA的第一条规则.

借用WAI-ARIA-Practices文档,面包屑看起来像这样:

<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

从使用屏幕阅读器和阅读此博客文章开始,这些rel属性对于AT来说没有什么区别.对于使用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>

希望这可以帮助!