aria-current 是专门用来标记“当前页面对应导航项”的语义化属性，不是装饰用的，浏览器和读屏器会据此调整播报方式（比如读作“首页，当前页面”），也便于 CSS 选中做样式区分。它比单纯加 class="active" 更准确、更可访问。
什么时候该用 aria-current 而不是 class？
当导航项代表的是「当前所处的上下文」时才用——比如顶部导航栏里的“产品”链接指向当前打开的 /products 页面，或面包屑中的“订单”指向当前订单详情页。它不适用于按钮状态、Tab 面板激活态（那种该用 aria-selected 或 aria-expanded）。
✅ 正确场景：主导航、侧边栏菜单、面包屑、分页链接（当前页码）❌ 错误场景：折叠菜单的展开/收起按钮、模态框关闭按钮、表单提交按钮⚠️ 注意：aria-current 不替代 nav 或 role="navigation" 的结构语义，两者要配合使用
aria-current 的取值有哪些？怎么选？
它支持多个字符串值，但实际常用且推荐的只有两个：
page：最常用，表示当前页面（如导航项链接地址与当前 URL 完全匹配）location：语义稍宽泛，表示当前地理位置上下文（如“上海门店”在门店列表页被高亮），部分读屏器对它的支持不如 page 稳定date、time、step 等极少用，基本只出现在日历控件、向导流程等特定组件中，普通导航不用考虑
简单原则：只要你在做常规页面级导航，统一用 aria-current="page" 就行，兼容性好、意图明确。
立即学习“前端免费学习笔记（深入）”；
常见错误写法和修复建议
很多人直接复制粘贴却忽略了上下文，导致语义失效甚至干扰辅助技术：
❌ 在非链接元素上硬加：<span aria-current="page">首页</span> —— 必须是可聚焦、可跳转的交互元素（如 a 或带 role="link" 的元素），否则读屏器可能忽略❌ 多个元素同时设 aria-current：一个导航区域里只能有一个“当前项”，否则语义混乱❌ 服务端渲染没动态更新：比如用静态 HTML 写死 aria-current="page" 在所有页面的“首页”上，结果每页都标首页为当前 —— 必须根据当前 URL 动态判断并注入✅ 推荐写法示例：<a href="/products" aria-current="page">产品</a>
CSS 如何安全地基于 aria-current 做样式？
用属性选择器比依赖 class 更可靠，但要注意优先级和可维护性：
nav a[aria-current="page"] { font-weight: bold; color: #007bff;}避免写成 [aria-current]（不指定值），因为未来若扩展其他值会误命中不要只靠颜色区分，记得加下划线、粗体或图标等多重视觉提示，满足 WCAG 对比度和可识别性要求如果项目里已用 class="active"，可以保留双写法过渡：<a href="/about" class="active" aria-current="page">关于</a>，确保样式和语义同步
真正容易被忽略的是：后端模板或前端路由切换时，aria-current 的更新必须与 URL 同步发生；延迟哪怕几十毫秒，读屏器就可能播报错误状态。这点在 SPA 中尤其关键，别只顾着改 class 却忘了同步设置这个属性。
评论(0)