aria-current必须用在直接代表当前页面的导航项上,通常是或元素,而非父级或;加在或上属语义错位,屏幕阅读器将忽略或误读。

aria-current 应该用在哪个元素上
必须用在直接代表当前页面的导航项上,通常是 @#@#@#@#@#@#@#@#@#@0
<li aria-current="page">@#@#@#@#@#@#@#@#@#@1</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 —— 这会让读屏器持续报出过期的“当前页面”信息,比不加还糟糕。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











