aria-current="page"是wai-aria规范唯一认可的当前页导航语义值，必须直接作用于带href的元素，且需配合css属性选择器精准样式，不可用class替代或误用其他值。
aria-current 不是用来“标记样式”的，而是告诉屏幕阅读器“你正停在这儿”。加错位置、写错值、或只靠 CSS class 代替它，等于对视障用户隐藏了当前状态。
必须用 aria-current="page"，不能写 aria-current="true" 或 aria-current="current"
只有 "page" 是 WAI-ARIA 规范明确定义的合法值，用于导航链接（如主导航、分页、面包屑末项）。写成 "true" 多数读屏器直接忽略；"location" 易被误读为地理定位；"step" 是另一套语义，专用于多步骤表单进度条，不能混用。
- 主导航中当前页链接：
@#@#@#@#@#@#@#@#@#@0 - 分页当前页链接：
@#@#@#@#@#@#@#@#@#@1 - 面包屑最后一项：
<li aria-current="page">设计系统</li> - 表单进度条当前步容器：
<div role="tab" aria-current="step">填写信息</div>
必须加在带 href 的 <a></a> 上，不能加在父容器或 <button></button> 上
aria-current="page" 只能用于有明确导航目标的链接元素。如果加在 <nav></nav>、<ul></ul> 或 <button></button> 上，屏幕阅读器无法理解“哪一项是当前页”，甚至可能跳过该语义。
- ✅ 正确：当前页链接本身有
href，且 URL 与浏览器地址栏完全匹配 - ❌ 错误：给
<li>加aria-current，而里面<a></a>没写 —— 屏幕阅读器看不到 - ❌ 错误：用
<button onclick="goTo('/blog')">博客</button>替代链接 —— 按钮没有href，不构成导航语义，aria-current在这里无效 - ⚠️ 注意：服务端渲染时就得写进 HTML；前端路由（如 React Router）要确认
<navlink></navlink>是否自动注入，别等 JS 执行完再补
React / JSX 中容易漏掉的细节：传 undefined 才能移除属性
JSX 中写 aria-current={current ? "page" : null} 或 aria-current={current ? "page" : ""} 都会渲染出无效的 aria-current=""，这是非法值，读屏器可能报错或忽略。
- ✅ 正确写法：
aria-current={current ? "page" : undefined} - ✅ 更稳妥写法（避免条件分支）：
{current && 'aria-current="page"'}（仅适用于字符串模板，非 JSX） - ⚠️ 框架中动态绑定时，确保变量不是
null或空字符串 —— 它们会导致属性残留为空值 - ⚠️ 使用 CSS-in-JS 或组件库时，检查最终 DOM 是否真实输出了该属性，而不是只存在于虚拟节点里
CSS 用属性选择器响应，别依赖 class 切换
样式应该直接响应 [aria-current="page"]，而不是监听 .active 类。这样即使 JS 失败或未加载，无障碍语义和基础样式仍生效。
nav a[aria-current="page"] {
font-weight: bold;
color: #0066cc;
}
- ❌ 避免宽泛选择器：
[aria-current]可能误命中其他组件（如进度条用了aria-current="step"） - ✅ 推荐限定范围：
nav a[aria-current="page"]、.breadcrumb li[aria-current="page"] - ⚠️ 如果同时用
class="active"控制视觉，它只是辅助手段；aria-current才是不可替代的语义层
最常被忽略的是：当前页链接必须保留 href，哪怕指向当前 URL；删掉 href 或加 aria-disabled="true"，会让键盘用户无法聚焦、读屏器无法识别为可导航项——这不是“高亮问题”，是语义断裂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
