aria-current是专为标识当前页面导航项的语义化属性，必须用于主导航、面包屑、分页等有明确“当前”状态的场景；常用值为page（整页级）和step（多步流程中），不可混用；需与class="active"共存，不可替代。
aria-current 是专门用来标记“当前页面对应导航项”的语义化属性，不是装饰用的，浏览器和读屏器会据此调整播报方式（比如读作“首页，当前页面”），也便于 CSS 选中做样式区分。它比单纯加 class="active" 更准确、更可访问。
什么时候该用 aria-current 而不是 class？
当导航项代表的是「当前所处的上下文」时才用——比如顶部导航栏里的“产品”链接指向当前打开的 /products 页面，或面包屑中的“订单”指向当前订单详情页。它不适用于按钮状态、Tab 面板激活态（那种该用 aria-selected 或 aria-expanded）。
- ✅ 正确场景：主导航、侧边栏菜单、面包屑、分页链接（当前页码）
- ❌ 错误场景：折叠菜单的展开/收起按钮、模态框关闭按钮、表单提交按钮
- ⚠️ 注意：
aria-current不替代nav或role="navigation"的结构语义，两者要配合使用
aria-current 的取值有哪些？怎么选？
它支持多个字符串值，但实际常用且推荐的只有两个：
-
page：最常用，表示当前页面（如导航项链接地址与当前 URL 完全匹配） -
location：语义稍宽泛，表示当前地理位置上下文（如“上海门店”在门店列表页被高亮），部分读屏器对它的支持不如page稳定 -
date、time、step等极少用，基本只出现在日历控件、向导流程等特定组件中，普通导航不用考虑
简单原则：只要你在做常规页面级导航，统一用 aria-current="page" 就行，兼容性好、意图明确。
立即学习“前端免费学习笔记（深入）”；
常见错误写法和修复建议
很多人直接复制粘贴却忽略了上下文，导致语义失效甚至干扰辅助技术：
- ❌ 在非链接元素上硬加：
<span aria-current="page">首页</span>—— 必须是可聚焦、可跳转的交互元素（如a或带role="link"的元素），否则读屏器可能忽略 - ❌ 多个元素同时设
aria-current：一个导航区域里只能有一个“当前项”，否则语义混乱 - ❌ 服务端渲染没动态更新：比如用静态 HTML 写死
aria-current="page"在所有页面的“首页”上，结果每页都标首页为当前 —— 必须根据当前 URL 动态判断并注入 - ✅ 推荐写法示例：
<a href="/products" aria-current="page">产品</a>
CSS 如何安全地基于 aria-current 做样式？
用属性选择器比依赖 class 更可靠，但要注意优先级和可维护性：
nav a[aria-current="page"] {
font-weight: bold;
color: #007bff;
}
- 避免写成
[aria-current]（不指定值），因为未来若扩展其他值会误命中 - 不要只靠颜色区分，记得加下划线、粗体或图标等多重视觉提示，满足 WCAG 对比度和可识别性要求
- 如果项目里已用
class="active"，可以保留双写法过渡：<a href="/about" class="active" aria-current="page">关于</a>，确保样式和语义同步
真正容易被忽略的是：后端模板或前端路由切换时，aria-current 的更新必须与 URL 同步发生；延迟哪怕几十毫秒，读屏器就可能播报错误状态。这点在 SPA 中尤其关键，别只顾着改 class 却忘了同步设置这个属性。
