bootstrap分页可访问性需系统实践：必须用aria-current="page"标识当前页，用包裹分页并确保标签具体，深色模式下须同步提升焦点对比度与文本可读性。
Bootstrap 页面的可访问性不是“加个 ARIA 就完事”，而是从 HTML 结构、语义标签、焦点管理到状态同步的系统性实践。只要漏掉一环，屏幕阅读器就可能读错、跳过或卡住。
必须用对 aria-current="page" 才算合规分页
很多开发者只加 class="active"，但 WCAG 2.1 AA 要求当前页必须同时带 aria-current="page"。光靠 CSS 类无法被辅助技术识别——它只影响视觉样式。
-
<li class="page-item active">@#@#@#@#@#@#@#@#@#@0</li>❌ 缺少aria-current，屏幕阅读器会把它当成普通链接 -
<li class="page-item active">@#@#@#@#@#@#@#@#@#@1</li>✅ 视觉 + 语义双达标 - JS 动态切换页码时，别只操作
class：记得同步增删aria-current属性，否则焦点位置和朗读内容会脱节
nav 和 aria-label 不是可选包装
Bootstrap 的 .pagination 样式再好看，如果没包在语义化容器里，就会被屏幕阅读器忽略上下文。分页不是孤立按钮组，而是导航行为。
- 必须用
<nav aria-label="Page navigation"></nav>包裹整个<ul class="pagination"></ul>，不能直接写<ul></ul> -
aria-label值要具体，比如"Page navigation for search results"比泛泛的"Page navigation"更有用 - 如果页面有多个分页（如列表页 + 评论区），每个
<nav></nav>必须有唯一且描述性的aria-label，否则辅助技术无法区分
深色模式下别只改背景色，要同步处理焦点与对比度
Bootstrap 5.3+ 支持 data-bs-theme="dark"，但默认 CSS 并未自动提升所有交互元素的对比度。键盘用户依赖焦点轮廓，而深色背景下浅灰轮廓容易不可见。
- 检查
:focus-visible样式是否被覆盖——尤其当自定义了outline或用了box-shadow模拟焦点时 - 确保文本与背景的对比度 ≥ 4.5:1（正文）或 ≥ 3:1（大号字），可用浏览器 DevTools 的“Accessibility”面板验证
- 深色模式下，
disabled按钮的灰度值容易过浅，建议显式设置color: rgba(255, 255, 255, 0.5)等可控值，而不是依赖 Bootstrap 默认
最容易被忽略的点是：可访问性失效往往不出现在“报错”时，而是在静默中——用户没听到当前页提示、焦点跳转丢失、或键盘 Tab 顺序混乱。每次改结构或加 JS 交互，都得手动用 Tab 键走一遍，再开 VoiceOver/NVDA 验证两遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
