HTML标注当前位置技巧：aria-current使用方法

aria-current 是提升网页无障碍体验的关键语义属性，专为屏幕阅读器精准传达“当前页”或“当前步骤”而设计，绝非可有可无的装饰；它必须与 class="active" 协同使用——前者赋予语义，后者控制样式，缺一不可；正确选用 page（标识当前页面）或 step（标识多步流程中的当前环节）至关重要，混用将导致视障用户获取错误信息；尽管现代浏览器普遍支持，但真正挑战在于开发全流程中的一致落地——从服务端渲染、前端路由切换到动态DOM操作，任何一个环节遗漏都会让整条导航链的可访问性失效。

aria-current 是什么，什么时候必须用

它不是装饰性属性，而是给屏幕阅读器明确“当前页/项”的语义标记。没加的话，视障用户可能根本不知道自己在哪——比如导航栏里高亮的 首页，光靠 CSS 样式 .active 是无效的。

常见场景包括：顶部导航、分页控件、面包屑、标签页（tabs）、侧边栏菜单。

别把它当成“锦上添花”，只要页面存在可切换的导航上下文，且有明确的“当前”状态，就必须加。

aria-current="page" 和 aria-current="step" 有什么区别

值不同，语义完全不同，不能混用：

• aria-current="page"：用于整个页面级别的当前项，比如导航栏中指向当前 URL 的链接（仪表盘）
• 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。真正要盯的是团队内部是否统一在所有导航组件中落地——漏掉一个链接，整条导航链的可访问性就断了。

以上就是《HTML标注当前位置技巧：aria-current使用方法》的详细内容，更多关于的资料请关注golang学习网公众号！