aria-current

使用场景

用于集合中代表”当前位置”的单个项目。最典型的场景是主导航中的当前活动链接：屏幕阅读器会朗读*“定价，当前页面，链接”*，视力正常的用户则看到一个高亮项，与视觉状态一致。

其他常见场景：

• 多步骤表单或向导中的当前步骤（aria-current="step"）。
• 日历网格中的今天（aria-current="date"）。
• 当前活动的面包屑（aria-current="page"）。
• 媒体播放列表中当前正在播放的项目（aria-current="true"）。

与相关状态的区别：

• aria-current — 在导航或项目集合中表示”您在这里”，用于链接及非选择型控件。
• aria-selected — 选择型容器（tablist、listbox、tree、grid）内的选中状态，由用户主动操作。
• aria-pressed — 切换按钮，表示按钮本身的开/关状态。
• aria-checked — 复选框或单选框，表示独立的选择状态。

保持同步

有效值："page"、"step"、"location"、"date"、"time"、"true"、"false"。应选用最具体的标记值——导航链接用 "page"，向导用 "step"，日历用 "date"。当其他值均不适用时，"true" 作为通用备选。"false"（默认值）表示”非当前项”；通常只需在非当前项上省略该属性即可。

在导航菜单中，任意时刻只应有一个链接携带 aria-current。路由切换时需通过客户端脚本更新该属性；服务端渲染页面可直接在 HTML 中输出。

应在视觉上对当前项进行标记，使视力正常的用户获得相同提示。常见做法是 [aria-current="page"] { font-weight: 600; }。

常见错误

• 在每个导航链接上设置 aria-current="true"，或所有链接均未设置。
• 在导航链接上使用 aria-selected——语义错误，链接不是可选项。
• 在单页应用中客户端路由切换后忘记更新 aria-current。
• 用 CSS 标记活动状态但从未设置 aria-current，导致屏幕阅读器无法区分。
• 将 aria-current="page" 用于非导航链接的按钮。
• 将 aria-current 设置在 <nav> 容器上，而非具体链接上。

示例

<nav aria-label="Primary">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/pricing" aria-current="page">Pricing</a></li>
    <li><a href="/docs">Docs</a></li>
  </ul>
</nav>