aria-current="page"是导航链接的语义锚点，必须加在可聚焦且href非空的上，值严格匹配当前URL，用于向屏幕阅读器宣告当前页面，不可用class="active"替代，CSS应通过[aria-current="page"]精准响应。
aria-current="page" 是导航链接的语义锚点，不是样式开关——它告诉屏幕阅读器“你正停在这一页”，而不是“让它变粗变蓝”。漏掉它，键盘用户和读屏软件就失去了定位依据。
nav里必须用aria-current="page"，不能用class="active"替代
视觉高亮靠 CSS 类，语义高亮靠 aria-current="page"。两者不互斥，但不可互相替代：
-
class="active"对 NVDA、VoiceOver 等辅助技术完全不可见，只影响浏览器渲染 -
aria-current="page"被所有主流读屏器识别并播报“关于我们，当前页面”，这是 WAI-ARIA 强制要求 - 常见错误：只加
class="active"，或误写成aria-current="true"（被忽略）/aria-current="location"（易被误读为地理定位） - 正确写法必须是：
<a href="/about" aria-current="page">关于我们</a>，且href值需与当前 URL 完全匹配
nav内部结构决定aria-current能加在哪
这个属性只能出现在有导航语义的元素上，且必须可聚焦、可跳转：
- 只允许加在
<a>上，且href不能为空（禁止href="#"或href="javascript:void(0)"） - 不能加在
<button>、<div>或父级<li>上——这些没有href，也不构成导航目标 - 多级菜单中，仅当前页面对应的那个末级链接加，比如访问
/blog/2026/04，只有该链接加，/blog的父项不加 - 服务端渲染时就得写进 HTML；前端路由（如 React Router 的
NavLink）要确认是否自动注入，别等 JS 加载完再补
CSS 怎么安全响应aria-current="page"
用属性选择器最直接可靠，避免污染其他组件：
立即学习“前端免费学习笔记（深入）”；
- 写成
[aria-current="page"]，不要简写为a[aria-current]或[aria-current]——前者会命中aria-current="step"（轮播/步骤条），后者可能误选非导航元素 - 如果导航项是嵌套结构（如下拉菜单），建议限定作用范围：
nav > ul > li > a[aria-current="page"]，防止整行高亮 - 别用
:focus或:hover模拟当前态——键盘用户聚焦在别的链接上时，状态就错乱了 - 样式规则优先级要足够高，否则可能被框架默认样式覆盖；若用 CSS-in-JS，确保该属性真实渲染到 DOM 节点上
最容易被忽略的点：多个 <nav> 共存时（如顶部主导航 + 页脚快捷导航），每个都得配 aria-label，否则读屏器无法区分上下文；而 aria-current="page" 必须严格一对一匹配当前 URL，差一个斜杠、少一个查询参数都不算匹配。
