如何为活动面包屑项正确设置 aria-current

Question

我正在关注 breadcrumb example of Bootstrap 5。

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

可以看到最后一项有aria-current:

    <li class="breadcrumb-item active" aria-current="page">Data</li>

然而，我也看到其他人把 aria-current 放在锚点上：

    <li class="breadcrumb-item active">
        <a href="#" aria-current="page">Data</a>
    </li>

我用 Talkback 测试了两者，只有第二个实现成功地宣布了“当前页面”。但我仍然想弄清楚如何正确实现面包屑的 aria-current。

感谢您的帮助。

Answer 1

简答

尽管 aria-current 未公布，但第一个示例仍可访问。

您提供的两个示例都可以在生产中使用，并且完全可以访问。

更长的答案

虽然根据规范您应该可以在 none 交互式项目上使用 aria-current，但实际上大多数屏幕 readers / 浏览器组合不支持它在您无法与之互动的项目。

您的第二个示例是“正确”用法，将其添加到 hyperlink!

您提供的两种模式都可以毫无问题地访问。 aria-current 未在第一个示例中公布不是问题，因为该模式是众所周知的，表明“数据”是当前页面（因为它不是 link）。

话虽这么说，但为了完整性，您可以向筛选 reader 用户提供额外信息！

我们可以在 <span> 中添加“（当前页面）”。然后，我们可以使用 CSS 在视觉上隐藏该跨度，以便它仍可被屏幕读取 reader 但不会使用 .

更改视觉设计

我建议将 Bootstrap .sr-only class 替换为下面 fiddle 中的那个，因为它更稳健。

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

<nav aria-label="breadcrumbs">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active">Data
      <span class="visually-hidden">(current page)</span>
    </li>
  </ol>
</nav>

此模式适用于所有浏览器，如果您想将面包屑中的当前页面传送给 Screen Reader 用户，该模式是最可靠的。

如何为活动面包屑项正确设置 aria-current

How to correctly set aria-current for the active breadcrumb item

accessibility

wai-aria

bootstrap-5

简答

更长的答案