aria-current="page" 在导航菜单中的正确使用方式

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

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

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

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

  • /produ

    cts
    → 正确
  • 首页 → 不加,即使属于同一栏目
  • 值推荐用 "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 加载后补上