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

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

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

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

• 适用于顶部导航栏、侧边栏菜单、分页、面包屑中的当前页链接
• 只加在 @#@#@#@#@#@#@#@#@#@0

  浏览器正常渲染，视觉样式不变；但屏幕阅读器会读作“产品（当前页面）”。

  

  创意前端视觉设计

  在创建或重塑需要独特视觉方向、应避免通用 AI 生成审美的网站、落地页、仪表盘、UI 组件、海报或应用时使用。

  下载

  配合 CSS 实现视觉高亮

  aria-current 本身不影响样式，但你可以用属性选择器来统一控制外观：

  a[aria-current="page"] {
    color: #007bff;
    font-weight: bold;
  }

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

  常见误区提醒

  • 不要用 class="active" 替代 aria-current —— 它对辅助技术无效
  • 不要给多个链接同时加该属性 —— 当前页只能有一个
  • 服务端渲染时，由后端逻辑判断并输出；前端路由（如 React Router）可用 NavLink 的 end 或匹配逻辑自动添加

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！