aria-current 是为屏幕阅读器标识当前页或当前步骤的必需语义属性，必须用于导航栏、分页、标签页等有明确“当前”状态的场景；常用值为 page（整页级）和 step（多步流程中），不可混用；需与 class="active" 共存，不可替代。
aria-current 是什么，什么时候必须用
它不是装饰性属性，而是给屏幕阅读器明确“当前页/项”的语义标记。没加的话，视障用户可能根本不知道自己在哪——比如导航栏里高亮的 首页，光靠 CSS 样式 .active 是无效的。
常见场景包括：顶部导航、分页控件、面包屑、标签页（tabs）、侧边栏菜单。
别把它当成“锦上添花”，只要页面存在可切换的导航上下文，且有明确的“当前”状态，就必须加。
aria-current="page" 和 aria-current="step" 有什么区别
值不同，语义完全不同，不能混用：
立即学习“前端免费学习笔记（深入）”；
-
aria-current="page"：用于整个页面级别的当前项，比如导航栏中指向当前 URL 的链接（<a href="/dashboard">仪表盘</a>） -
aria-current="step"：用于向导或多步骤流程中的当前步，比如“1. 填写信息 → 2. 确认订单 → 3. 支付完成”里的第二项 - 其他值如
"location"、"date"极少用，多数情况只选page或step
错用 step 替代 page，会导致屏幕阅读器读成“第2步”，而不是“当前页面是仪表盘”，信息严重失真。
和 class="active" 能不能只留一个
不能。CSS 类名 active 只控制样式，对辅助技术零意义；aria-current 不影响样式，但决定语义输出。
正确做法是两者共存：
<a href="/settings" aria-current="page" class="nav-link active">设置</a>
容易踩的坑：
- 服务端渲染时忘了同步设置
aria-current，比如模板里只判了class但漏了属性 - 前端路由切换后，只更新了
class，没补上或清除aria-current（React/Vue 里常忘在useEffect或watch中处理） - 用 JavaScript 动态添加时，写成
el.setAttribute('aria-current', true)—— 错，必须是字符串值，比如"page"
浏览器和读屏软件支持情况
主流浏览器（Chrome/Firefox/Safari/Edge）都支持解析 aria-current，但实际播报效果依赖读屏软件：
- NVDA + Firefox：会读“设置，当前页面”
- VoiceOver + Safari：读“设置，当前页面”并自动停顿强调
- JAWS：需开启“报告 ARIA 属性”选项，默认可能不报
性能无影响，但兼容性上要注意：IE11 完全不识别该属性，不过 IE11 已退出主流支持范围，无需 hack。真正要盯的是团队内部是否统一在所有导航组件中落地——漏掉一个链接，整条导航链的可访问性就断了。
