aria-current必须用在直接代表当前页面的导航项上，通常是或<button>元素，而非父级<nav>或<ul>；加在<li>或<nav>上属语义错位，屏幕阅读器将忽略或误读。
aria-current 应该用在哪个元素上
必须用在直接代表当前页面的导航项上，通常是 <a> 或 <button> 元素，而不是父级 <nav> 或 <ul>。它描述的是“这个链接本身是否指向当前页面”，不是“整个导航区域的状态”。
常见错误是加在 <li> 上——<li> 不是可聚焦/可交互元素，屏幕阅读器通常忽略其 ARIA 属性；加在 <nav> 上则语义错位，失去精确性。
- ✅ 正确：
<a href="/dashboard" aria-current="page">仪表盘</a> - ❌ 错误：
<li aria-current="page"><a href="/dashboard">仪表盘</a></li> - ❌ 错误：
<nav aria-current="page">...</nav>
page 和 location 两种值的区别
aria-current="page" 表示当前链接与整个页面 URL 完全匹配（路径 + 查询参数一致），适合主导航中的顶级页面；aria-current="location" 更宽松，只要路径前缀匹配就算（比如当前是 /blog/post-1，/blog 的链接可标为 location），常用于面包屑或层级导航。
不要用 aria-current="true" —— 这是无效值，会被忽略；也不要用 "section" 或 "step" 等非标准值，它们未被主流读屏器支持。
立即学习“前端免费学习笔记（深入）”；
- 主菜单选中项 → 用
page - 面包屑中“博客”项（当前页是
/blog/xxx）→ 可用location - 标签页切换（如 Tab 组件）→ 用
page或step均不推荐，应优先用aria-selected="true"+role="tab"
样式适配不能只依赖 aria-current
CSS 中可以用 [aria-current="page"] 选择器设置高亮，但别忘了：视觉样式必须与语义状态严格同步。如果 JS 动态切换激活项，必须同时更新 aria-current 属性和 class，否则会破坏可访问性一致性。
另一个坑是服务端渲染（SSR）场景：若 HTML 初始就带 aria-current="page"，但前端路由又没及时清除旧值、添加新值，就会出现多个链接同时带该属性，或全部丢失。
- 务必确保同一组导航中最多只有一个元素有
aria-current="page" - 用 CSS 时建议组合写法：
a[aria-current="page"], a[aria-current="location"]，避免遗漏 - React/Vue 等框架中，不要仅靠 class 控制样式，要让
aria-current成为唯一 truth source
为什么 screen reader 用户需要它
当焦点落在一个带 aria-current="page" 的链接上时，NVDA、VoiceOver 会明确朗读“仪表盘，当前页面”，而不仅仅是“仪表盘，链接”。这对视障用户确认位置至关重要——尤其在无视觉反馈的终端或语音浏览中，没有这个属性，他们无法判断自己是否已在目标页。
注意：它不会自动改变键盘焦点，也不会阻止点击；它只是声明状态。如果你还希望禁用当前页链接的跳转，得额外加 tabindex="-1" 和 pointer-events: none（但需谨慎：禁用链接可能违反 WCAG 2.4.4，除非有充分理由且提供替代导航方式）。
最易被忽略的一点：动态加载内容后（比如 SPA 路由变更），很多人只改了 URL 和 DOM 内容，却忘了更新导航项上的 aria-current —— 这会让读屏器持续报出过期的“当前页面”信息，比不加还糟糕。
