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 属性——浏览器不会自动同步。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！