HTML分页无障碍设置指南

本文深入解析HTML分页组件的无障碍实现要点，强调必须使用`aria-current="page"`精准标识当前页链接（而非CSS类或禁用属性），合理运用`role="navigation"`或`aria-label`标注容器语义，确保上/下一页按钮具备正确语义、键盘可聚焦及明确标签，并针对动态分页场景提出焦点主动管理、`aria-current`实时同步与精准`aria-live`播报等关键实践——真正影响无障碍体验的，不是ARIA属性的堆砌，而是状态更新、焦点流与屏幕阅读器反馈之间毫秒级的协同。

aria-current 怎么用在分页链接上

分页中当前页必须明确暴露给屏幕阅读器，aria-current="page" 是唯一合规做法。不用 class="active" 或 CSS 隐藏文本替代——这些对辅助技术完全不可见。

常见错误：给当前页链接加 aria-disabled="true" 或去掉 href，这会让它失去导航语义，屏幕阅读器可能跳过或误读为普通文字。

• 只对当前页的 元素添加 aria-current="page"，不要加在 或按钮上
• 保持 href 属性存在（即使指向当前 URL），否则键盘用户无法聚焦、无法按回车触发（哪怕 JS 拦截）
• 避免同时使用 aria-current 和 aria-disabled —— 语义冲突，NVDA 和 VoiceOver 都会困惑

分页容器要不要 role="navigation"

要，但必须加在语义正确的外层容器上，不是每个分页都套一层。

如果分页是页面主导航（如文章列表页底部的全局页码），用