正确的 ARIA 处理面包屑导航

可以采取哪些措施来提高面包屑菜单的可访问性，类似于：

<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属性？

我会避免使用aria-level并使用<ol>元素代替。只要存在本机替代方案，最好避免使用 aria 属性。使用 aria 会增加额外的复杂性。简单的 HTML 要好得多，并且已经具有 AT 所呈现的语义。这是ARIA 的第一条规则 https://www.w3.org/TR/aria-in-html/#rule1.

借自WAI-ARIA-实践文件 https://www.w3.org/TR/wai-aria-practices/#breadcrumb，面包屑看起来像这样：

<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. Using <ol>元素向屏幕阅读器用户显示命令。
3. The <ol>应该是的孩子<nav>。一些实现适用role="nav" to the <ol>本身。这是错误的并且会覆盖默认值<ol>语义。
4. aria-current通知屏幕阅读器用户这是当前页面。如果当前页面的最后一个面包屑不是链接，则aria-current属性是可选的。