Bootstrap 不默认启用 ARIA 属性，需开发者手动添加 role、aria-expanded 等；表单依赖原生语义，display: none 会移除可访问性，第三方插件需额外补全 ARIA。
Bootstrap 的 ARIA 属性是否默认启用
Bootstrap 本身不自动注入 ARIA 属性，但大多数交互组件（如 Dropdown、Modal、Accordion）在 HTML 结构正确时，会依赖开发者手动添加必要的 role、aria-expanded、aria-controls 等属性。它提供的是「支持无障碍的结构模板」，而非「开箱即用的无障碍封装」。
常见错误现象：aria-hidden="true" 被误加在模态框容器外层，导致整个弹窗对屏幕阅读器不可见；或 button 触发下拉却没加 aria-haspopup 和 aria-expanded，屏幕阅读器无法告知用户这是可展开控件。
- 使用场景：所有需要键盘导航和语音反馈的交互组件，尤其政务、教育类网站有合规硬性要求
- 必须由你补全的典型属性：
aria-label（无可见文本的按钮）、aria-labelledby（模态框标题关联）、tabindex="-1"（确保焦点可进入但不被自然 tab 顺序捕获） - Bootstrap 5+ 默认移除了部分旧版 ARIA 注入逻辑（如自动加
role="button"），更强调语义化 HTML 基础
表单控件的无障碍基础是否可靠
Bootstrap 的表单样式不破坏原生 label + input 关联机制，只要写对 for/id 或用嵌套方式，屏幕阅读器就能读出标签文本——这是最核心的保障点。
容易踩的坑：input 缺少 id 导致 label 的 for 失效；用 div 模拟 checkbox/radio 却没加 role="checkbox" 和 aria-checked；禁用状态（disabled）未同步设置 aria-disabled="true"（因为 disabled 属性本身会被屏幕阅读器识别，但自定义组件常漏掉）。
- 参数差异：Bootstrap 的
.form-check-input类仅负责样式，不影响语义；真正起作用的是你写的<input type="checkbox">原生标签 - 性能影响：无。ARIA 属性纯属声明式元信息，不触发重排重绘
- 兼容性注意：IE11 对部分
aria-*支持不稳定，如aria-live区域需配合role="status"才能被 NVDA 正确朗读
响应式断点与屏幕阅读器的冲突风险
Bootstrap 的 display: none（如 d-none、d-md-block）会让元素完全从可访问树中移除——这既是优点也是陷阱。它确实隐藏了不相关的视觉内容，但若误用于本应保留在无障碍流中的操作入口（比如移动端隐藏的侧边栏菜单，却没提供替代的 aria-expanded 控制按钮），就会切断辅助技术路径。
典型错误：用 d-lg-none 隐藏桌面端的「返回顶部」按钮，但没在移动端提供等效的语音指令支持或快捷键（如 Alt+Home）；或轮播图的 .carousel-control-prev 在小屏被 d-none 后，焦点流直接跳过，造成键盘用户卡死。
- 正确做法：优先用
visually-hidden（Bootstrap 5 内置类）隐藏视觉但保留可访问性，而非d-none - 必须检查的场景：导航折叠/展开、分页控件、工具提示（tooltip）的触发元素是否在断点切换后仍可聚焦且有语义
- 兼容性提醒：某些老版本 TalkBack 对
visually-hidden中的clip属性支持不佳，建议用 Bootstrap 官方推荐的position: absolute; clip: rect(1px, 1px, 1px, 1px);变体
第三方插件（如 Popper、Chart.js）带来的无障碍缺口
Bootstrap 5 依赖 Popper 处理 Tooltip 和 Dropdown 的定位，但 Popper 本身不处理 ARIA 状态同步——比如 Tooltip 的 aria-describedby 必须由你手动绑定到触发元素，Popper 不会自动补上。
更隐蔽的问题是 Chart.js 等可视化库集成时：Bootstrap 容器可能包裹图表，但图表本身若没用 role="img" + aria-label 或 longdesc，再漂亮的响应式卡片也等于对屏幕阅读器「不可见」。
- 实操建议：Tooltip 初始化时显式传入
attributes: { 'aria-describedby': 'tooltip-id' }；Dropdown 打开后手动设aria-expanded="true" - 性能提示：频繁切换 ARIA 属性（如每帧更新
aria-valuenow）可能触发屏幕阅读器重读，非必要勿在动画循环中修改 - 最容易被忽略的一点：所有动态插入的 DOM（如通过 JS 渲染的 Alert 组件），必须手动调用
aria-live="polite"区域或触发focus()，否则变化不会被感知
