aria-current是专为标识当前导航项、步骤等状态的ARIA语义属性，必须用于主导航、面包屑、分页、标签页、多步流程等有明确“当前”上下文的场景；常用值为"page"（整页级匹配）和"step"（线性流程中的当前步），不可混用或使用无效值如"true"。
aria-current 是什么，什么时候必须用
aria-current 是一个 ARIA 属性，用来告诉辅助技术（比如屏幕阅读器）当前激活的导航项、步骤、日期或标签页等。它不是视觉样式开关，不负责高亮——那是 CSS 的事；它的核心作用是语义传达：「这个元素代表当前上下文」。
常见误用是把它当 class="active" 的替代品来写 CSS。但如果你的导航菜单需要被读屏软件正确播报（例如“首页，当前页面”），或者你正在构建多步骤表单、日期选择器、标签页组件，aria-current 就不是可选项，而是无障碍合规的必要标记。
怎么设置 aria-current 的值才对
aria-current 接受多个字面值，最常用的是 "page" 和 "step"，选哪个取决于上下文：
-
aria-current="page"：用于主导航中的当前页面链接，比如顶部菜单里的「产品」链接，用户正停留在 /products 页面时加这个 -
aria-current="step"：用于向导或多步骤流程，比如「1. 填写信息 → 2. 支付 → 3. 完成」中当前所在步骤 -
aria-current="date"或"time"：日历或时间轴中高亮当天或当前时刻 -
aria-current="location"：面包屑中表示当前位置（不过更推荐用aria-current="page"+ 隐藏文本） - 别用
true或"true"—— 这是无效值，会被忽略
错误示例：<a href="/about" aria-current="true">关于我们</a> → 屏幕阅读器不会识别为当前项。
立即学习“前端免费学习笔记（深入）”；
CSS 怎么配合 aria-current 实现视觉高亮
aria-current 本身不触发样式，但你可以用属性选择器精准控制：
nav a[aria-current="page"] {
font-weight: bold;
color: #0066cc;
}
nav a[aria-current="step"] {
background-color: #e6f7ff;
border-radius: 4px;
}
注意点：
- 不要只依赖
[aria-current]（不带值），因为不同场景值不同，混用会导致样式错乱 - 如果用了
aria-current="page"，同时又加了class="active"，CSS 里建议优先用[aria-current="page"]，避免冗余维护 - 某些旧版 IE 不支持属性选择器，但 IE 已退出主流支持，现代项目无需降级兼容
服务端渲染和前端路由里怎么动态加
关键原则：谁控制当前 URL，谁负责设置 aria-current。不能靠 JS 后补，必须在 HTML 初始输出时就存在。
- 服务端渲染（如 PHP/Nginx/Next.js SSR）：模板中根据
request.url或router.pathname判断，直接输出带aria-current="page"的<a></a> - 前端路由（React Router / Vue Router）：
<link>组件通常自带end或match属性，但原生<a></a>不会自动加。务必用useMatch()（React Router v6）或useRoute()（Vue Router）计算后手动添加属性 - 纯静态 HTML 站点：每个页面单独写，当前页的导航链接手写
aria-current="page"，其他页删掉
漏掉这一步，即使页面逻辑完全正确，对屏幕阅读器用户来说，导航仍是“失语”的。
最常被忽略的是：开发时只看视觉效果，没开屏幕阅读器验证；上线前没检查 SSR 输出的 HTML 是否已含该属性——而辅助技术只读初始 HTML，JS 补的晚了一步。
