aria-current 是 wai-aria 规范中用于向辅助技术（如屏幕阅读器）语义化标识当前页面、步骤或位置的关键属性；它不可被 class="active" 替代，因后者仅提供视觉样式、无语义信息，无法被读屏器识别。
aria-current 是什么，为什么不用 class="active"
aria-current 是 WAI-ARIA 规范中用于标识当前上下文位置的属性，比如当前页面、当前步骤、当前标签页。它不是视觉样式工具，而是给辅助技术（如屏幕阅读器）传递语义信息的关键信号。单纯靠 class="active" 只能被 CSS 读取，对残障用户几乎无效——他们依赖的是 aria-current 的语义，而不是颜色或粗体。
常见错误是只加 class="active" 却漏掉 aria-current，或者反过来只写 aria-current="page" 但没配 CSS 样式，导致视觉上毫无区分。
-
aria-current的合法值有："page"（当前页面）、"step"（向导步骤）、"location"（地址栏对应项）、"date"、"time"、"true"（泛用） - 最常用的是
aria-current="page"，适用于主导航中“当前页面”的链接 - 不要写
aria-current="true"来偷懒——它缺乏语义精度，屏幕阅读器可能只读作“当前”，不说明“这是当前页面”
怎么给导航菜单动态加 aria-current="page"
服务端渲染（如 PHP、Ruby on Rails）通常在模板里判断当前 URL，直接输出带 aria-current 的 <a></a>。客户端渲染（如 React、Vue）则需在组件挂载或路由变化后更新属性。
纯静态 HTML 或简单 JS 场景下，可以用一小段脚本自动匹配：
document.querySelectorAll('nav a[href]').forEach(link => {
if (link.href === window.location.href ||
link.href === window.location.origin + window.location.pathname) {
link.setAttribute('aria-current', 'page');
}
});
注意点：
- 用
link.href（解析后的绝对 URL）比link.getAttribute('href')更可靠，避免相对路径误判 - 不要只比对
window.location.pathname—— 如果链接带查询参数（如/blog/?ref=nav），而当前页是/blog/，就可能漏标 - 如果导航项是
<button></button>或<span></span>（非可聚焦链接），必须同时加tabindex="0"和role="link"才能被键盘和读屏器识别为导航项
CSS 怎么配合 aria-current 做样式
别再写 .nav a.active { font-weight: bold; } 了。直接用属性选择器更语义化、更健壮：
nav a[aria-current="page"] {
font-weight: bold;
color: #0066cc;
}
这样做的好处：
- 样式与语义绑定，不会因 class 名变更（比如从
active改成is-current）而失效 - 支持多值场景：比如 tab 导航中某项既是当前页又是当前步骤，可设
aria-current="page step"，再用[aria-current~="page"]匹配 - 避免 JS 和 CSS 之间 class 名硬耦合，降低维护成本
注意：不要用 [aria-current] 这种宽泛写法——它会匹配所有 aria-current 值（包括 "step"），可能造成意外高亮。
容易被忽略的边界情况
真实项目里，这些细节常被跳过，却直接影响可用性：
- 首页链接通常为
/或index.html，但用户访问https://site.com时，window.location.pathname是"/"，而link.href可能是"https://site.com/"—— 两者严格相等，没问题；但如果链接写的是href=""或href="index.html"，就必须归一化处理 - SPA 路由（如 hash 模式）需监听
hashchange，HTML5 History 模式要监听popstate，否则路由切换后aria-current不会更新 - 服务端生成的静态页，若使用 CDN 缓存，需确保每个页面的导航 HTML 是独立生成的，不能把某一页的
aria-current="page"缓存后塞到所有页面里
最麻烦的其实是多语言站点：/en/contact 和 /zh/contact 都该被标记为当前页，但它们的 href 完全不同——这时得靠路由前缀或语言代码提取逻辑，不能只靠字符串匹配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
