aria-current属性的作用_HTML aria-current当前活动导航项高亮语义-html教程-PHP中文网

aria-current="page" 是 wai-aria 规范中专用于导航链接的语义属性，表示当前访问页面，必须直接写在 href 与当前 url 完全匹配的标签上，由屏幕阅读器明确播报“当前页面”；它不可被 class="active" 替代，也不可误用为 "true" 或 "location" 等错误值，且需配合属性选择器 [aria-current="page"] 实现无障碍友好的视觉样式。

aria-current属性的作用_html aria-current当前活动导航项高亮语义

它不是用来“高亮样式”的，而是告诉屏幕阅读器“你正停在这一页”，没加就等于对视障用户隐藏了当前位置。

aria-current="page" 必须用在导航链接上，且只用于当前页面

这个属性必须出现在 @#@#@#@#@#@#@#@#@#@0 才能加 aria-current="page"。

不能加在父级菜单项上（如访问 /blog/2026/04 时，/blog 的链接不加）
不能加在 <button></button> 或 <div> 上——这些元素没有导航语义，屏幕阅读器不会把它当作可跳转目标 <li>服务端渲染时就得写进 HTML；前端路由（如 React Router）要确认 <code><navlink></navlink> 是否已自动注入，别等 JS 加载完再补

为什么不能用 class="active" 替代 aria-current

class="active" 只影响 CSS，对辅助技术完全不可见。屏幕阅读器既不读它，也不据此调整导航逻辑。而 aria-current="page" 是 WAI-ARIA 规范强制要求的语义标记，NVDA、VoiceOver 等工具会明确播报“关于我们，当前页面”。

常见错误：只加 class="active"，却漏掉 aria-current="page"
更糟的错误：加了 aria-current="true" 或 aria-current="location" —— 前者被多数读屏器忽略，后者易被误读为地理定位
正确做法：两者共存，但语义分工明确 —— class="active" 控制视觉，aria-current="page" 控制语义

CSS 怎么响应 aria-current 属性做样式

直接用属性选择器最可靠，不需要额外 JS 或 class 切换：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

[aria-current="page"] {
  font-weight: 600;
  color: #1a73e8;
  text-decoration: underline;
}

注意几个实际细节：

不要写成 a[aria-current] —— 这会匹配所有值（包括 "step"），导致轮播或步骤条的样式污染
如果导航项是嵌套结构（比如带下拉的 <li>），确保只作用于内部的 <a></a>，避免整行高亮
别用 :focus 或 :hover 模拟当前态 —— 键盘用户可能聚焦在别的链接上，状态就错乱了

轮播、分步表单、分页里该用哪个值

值选错会导致屏幕阅读器完全读错上下文：

轮播当前幻灯片 → 必须用 aria-current="step"（不是 "page"，也不是 "true"）
注册流程第3步 → aria-current="step"
分页组件的“第5页”链接 → aria-current="page"（哪怕它只是个数字）
面包屑里的“当前位置” → aria-current="location"（仅限面包屑，别挪到导航栏）

最常被忽略的一点：这些值不能混用，也不能靠 JS 动态切换值类型 —— 一旦容器语义定为“分页”，里面所有 aria-current 都得是 "page"，否则读屏器会困惑。