aria-current 是用于标识当前激活导航项等的 ARIA 属性，值须为 page/step/location/date/time 之一；需配合 CSS 属性选择器设置样式，并在 SPA 中手动同步更新。
aria-current 是什么，什么时候该用
aria-current 是一个 ARIA 属性，用来标记当前激活的导航项、步骤、页签或时间点。它不改变视觉样式，只影响辅助技术（如读屏器）的行为——读屏器会读出“当前页面”“当前步骤”之类的信息。常见于 nav、ol、tablist 等结构中。
注意：aria-current 不是 CSS 选择器替代品，不能靠它触发样式变化；必须配合 CSS 的 [aria-current="page"] 这类属性选择器手动设置样式。
怎么写才合法：值类型和取值范围
aria-current 只接受几个固定字符串值，不是布尔值，也不能写 true 或 1：
-
page：当前浏览的页面（最常用，比如导航里高亮“首页”） -
step：流程向导中的当前步骤（如“2/4 填写信息”） -
location：当前地理位置（少见，如地图上的定位点） -
date：日历中今天的日期 -
time：当前时刻（如时钟组件） -
true：已废弃，不要用
错误写法：aria-current="active"、aria-current="yes"、aria-current（无值）——这些都不会被辅助技术识别。
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
配合 CSS 实现视觉高亮
光加 aria-current 属性没用，用户看不到变化。得用 CSS 显式定义样式：
nav a[aria-current="page"] {
font-weight: bold;
color: #0066cc;
background-color: #f0f8ff;
}
关键点：
- 必须用属性选择器，不能只写
a[aria-current]（会匹配所有值，包括step和date） - 如果多个导航层级共用同一份 CSS，建议按语义区分值，比如用
page表示页面级，step表示流程级 - 别依赖
:focus或:hover模拟当前态——它们和aria-current语义无关，且无法被键盘或读屏器感知
动态更新时容易漏掉的细节
单页应用（SPA）里常通过 JS 切换 aria-current，这里有几个硬伤点：
- 旧节点必须显式移除
aria-current，不能只给新节点加——否则可能同时存在多个aria-current="page" - 用
element.removeAttribute("aria-current")，而不是element.setAttribute("aria-current", "")（空字符串会被当成非法值） - React/Vue 中若用
v-bind:aria-current或{ariaCurrent: ...}，确保值严格为字符串"page"，而非null或undefined（会渲染成aria-current无值属性） - 服务端渲染（SSR）需保证首屏 HTML 里就带正确的
aria-current，否则 JS 注入前有一段“无障碍盲区”
最易被忽略的是：当 URL 改变但 DOM 没重绘（比如 hash 跳转），JS 必须主动查找并更新对应 a 元素的 aria-current 属性——浏览器不会自动同步。
