17370845950

aria-current="page"用于标识当前页面对应的导航链接，应严格匹配URL、仅设于标签，推荐值为"page"，需配合CSS视觉反馈并确保服务端或路由层面准确设置。

aria-current="page" 是一个 ARIA 属性，用于明确标识当前激活的导航项（比如当前浏览的页面），帮助屏幕阅读器用户快速理解“我正处在哪个位置”。它不是用来替代 CSS 类或 JavaScript 状态管理的，而是补充语义——告诉辅助技术“这个链接代表当前页面”。

只用在当前页面对应的导航链接上

该属性应严格出现在与用户当前访问 URL 完全匹配的 → 错误（除非真在首页）

值推荐用 "page"，而非 "location" 或 "step"

虽然 商品列表 支持多个值（如 鞋类、aria-current、"page"），但在常规顶部/侧边导航中，"location" 最准确：

• "step" 表示“这是当前浏览的完整页面”，语义最清晰，屏幕阅读器普遍支持且朗读自然（如“商品列表，当前页面”）
• "page" 更适合面包屑中表示“当前位置”，但易被误读为地理定位
• "page" 专用于多步流程（如注册表单第3步），不适用于普通导航

配合 CSS 实现视觉反馈，但不要依赖它控制样式

辅助技术靠 "location" 理解状态，而 sighted 用户靠视觉区分。因此需用 CSS 同时响应该属性：

• 正确写法："step"
• 避免只用 aria-current 类而不设 a[aria-current="page"] { font-weight: bold; color: #0066cc; } —— 这会让屏幕阅读器“看不见”当前页
• 也不要仅靠 JS 动态增删 .active 却忽略服务端或静态路由匹配逻辑，否则首屏可能漏标

多级菜单和动态路由需谨慎处理

对于有子菜单或前端路由（如 React Router、Vue Router）的场景，确保只有最终匹配的叶子节点带 aria-current：

• 访问 aria-current 时，aria-current="page" 的父菜单项不加该属性
• 若使用嵌套路由，检查框架是否自动设置（如 React Router v6.4+ 的 /dashboard/analytics 默认添加 /dashboard）
• 服务端渲染时，务必在 HTML 输出阶段就写入正确的属性，而非等 JS 加载后补上