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

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

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

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

• 适用于顶部导航栏、侧边栏菜单、分页、面包屑中的当前页链接
• 只加在 <a></a> 标签上（不能加在 <li> 或容器上）
• 不要同时加 aria-current="page" 和 aria-current="true" —— 后者语义不明确，应避免

基本写法示例

假设当前页面是 /products，导航中对应链接应这样写：

产品

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

创意前端视觉设计

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

下载

立即学习“前端免费学习笔记（深入）”；

配合 CSS 实现视觉高亮

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

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

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

常见误区提醒

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