17370845950

最标准、最无障碍的方式是在当前页面的导航链接上使用 aria-current="page" 属性，仅限 标签，配合 CSS 属性选择器实现视觉高亮，不可用 class="active" 替代或重复添加。

在导航菜单中标识当前页面的链接，最标准、最无障碍的方式是使用 aria-current="page" 属性。

什么时候用 aria-current="page"

当某个导航链接指向用户当前正在浏览的页面时，就应加上这个属性。它不是用来标记“选中状态”或“高亮样式”的视觉效果，而是向屏幕阅读器等辅助技术明确传达：“这个链接代表你此刻所在的位置”。

• 适用于顶部导航栏、侧边栏菜单、分页、面包屑中的当前页链接
• 只加在 本身不影响样式，但你可以用属性选择器来统一控制外观： a[aria-current="page"] {
    color: #007bff;
    font-weight: bold;
  }

  这样既保持语义正确，又无需额外 class，维护更干净。

  常见误区提醒

  • 不要用
  • 替代 aria-current="page" —— 它对辅助技术无效
  • 不要给多个链接同时加该属性 —— 当前页只能有一个
  • 服务端渲染时，由后端逻辑判断并输出；前端路由（

    

    如 React Router）可用 aria-current="true" 的 /products 或匹配逻辑自动添加