aria-current="page"用于标识当前页面对应的导航链接，应严格匹配URL、仅设于标签，推荐值为"page"，需配合CSS视觉反馈并确保服务端或路由层面准确设置。
aria-current="page" 是一个 ARIA 属性，用于明确标识当前激活的导航项（比如当前浏览的页面），帮助屏幕阅读器用户快速理解“我正处在哪个位置”。它不是用来替代 CSS 类或 JavaScript 状态管理的，而是补充语义——告诉辅助技术“这个链接代表当前页面”。
只用在当前页面对应的导航链接上
该属性应严格出现在与用户当前访问 URL 完全匹配的 <a> 标签上。例如访问 /products 时，只有指向该路径的导航项才加此属性：
-
<a href="/home" aria-current="page">首页</a>→ 错误（除非真在首页） -
<a href="/products" aria-current="page">商品列表</a>→ 正确 -
<a href="/products/shoes">鞋类</a>→ 不加，即使属于同一栏目
值推荐用 "page"，而非 "location" 或 "step"
虽然 aria-current 支持多个值（如 "page"、"location"、"step"），但在常规顶部/侧边导航中，"page" 最准确：
-
"page"表示“这是当前浏览的完整页面”，语义最清晰，屏幕阅读器普遍支持且朗读自然（如“商品列表，当前页面”） -
"location"更适合面包屑中表示“当前位置”，但易被误读为地理定位 -
"step"专用于多步流程（如注册表单第3步），不适用于普通导航
配合 CSS 实现视觉反馈，但不要依赖它控制样式
辅助技术靠 aria-current 理解状态，而 sighted 用户靠视觉区分。因此需用 CSS 同时响应该属性：
- 正确写法：
a[aria-current="page"] { font-weight: bold; color: #0066cc; } - 避免只用
.active类而不设aria-current—— 这会让屏幕阅读器“看不见”当前页 - 也不要仅靠 JS 动态增删
aria-current却忽略服务端或静态路由匹配逻辑，否则首屏可能漏标
多级菜单和动态路由需谨慎处理
对于有子菜单或前端路由（如 React Router、Vue Router）的场景，确保只有最终匹配的叶子节点带 aria-current="page"：
- 访问
/dashboard/analytics时，/dashboard的父菜单项不加该属性 - 若使用嵌套路由，检查框架是否自动设置（如 React Router v6.4+ 的
<NavLink>默认添加aria-current="page"） - 服务端渲染时，务必在 HTML 输出阶段就写入正确的属性，而非等 JS 加载后补上
