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

在导航菜单中标识当前页面的链接,最标准、最无障碍的方式是使用 aria-current="page" 属性。
什么时候用 aria-current="page"
当某个导航链接指向用户当前正在浏览的页面时,就应加上这个属性。它不是用来标记“选中状态”或“高亮样式”的视觉效果,而是向屏幕阅读器等辅助技术明确传达:“这个链接代表你此刻所在的位置”。
- 适用于顶部导航栏、侧边栏菜单、分页、面包屑中的当前页链接
- 只加在
本身不影响样式,但你可以用属性选择器来统一控制外观: a[aria-current="page"] {
color: #007bff;
font-weight: bold;
}这样既保持语义正确,又无需额外 class,维护更干净。
常见误区提醒











