如何正确为激活态面包屑项设置aria-current属性

aria-current="page"的核心作用是标记导航链路中代表当前页面的节点，具体放置位置取决于当前面包屑节点的交互属性：

• 若当前页对应的面包屑为非交互纯文本节点（无<a>链接，也是官方推荐的常规写法，当前页面不需要额外加跳转入口）：将aria-current="page"加在父级<li>元素上即可，符合WAI-ARIA规范要求。你测试时这种写法不播报，是因为部分版本的TalkBack默认不会主动播报非交互元素的aria属性，如果需要兼容这类场景，可以给承载文本的标签加tabindex="0"使其可被聚焦，就能正常触发播报。
• 若当前页对应的面包屑为可交互链接节点（保留<a>标签）：必须将aria-current="page"加在<a>标签上，辅助技术会优先识别可交互元素的aria属性，这也是你测试时第二种写法可以正常播报的原因。

两种合规写法参考 #

1. 常规非交互当前节点写法 #

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

2. 带链接的交互当前节点写法 #

<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">
      <a href="#" aria-current="page">Data</a>
    </li>
  </ol>
</nav>

内容的提问来源于stack exchange，提问作者Bûn-lī