bootstrap组件虽自带基础aria属性，但无障碍需手动补全状态同步、语义结构、焦点管理及颜色对比度；如modal需焦点陷阱、表单必配label、datepicker要补grid角色和键盘导航、文字对比度须≥4.5:1。
Bootstrap 组件的 ARIA 属性是自动加的，但不等于无障碍就到位了
Bootstrap 4+ 的 alert、button、modal、dropdown 确实自带基础 role 和 aria- 属性，比如 modal 会加 role="dialog" 和 aria-modal="true"。但这只是起点——真正影响屏幕阅读器体验的，是你有没有破坏语义结构或漏掉状态同步。
常见掉坑点：
- 用
div+onclick模拟按钮，却没加role="button"和tabindex="0"，键盘用户无法聚焦，读屏完全无视 -
modal被手动移除了.modal-backdrop或禁用了焦点陷阱（focus trap），导致键盘用户进不去、出不来、按Esc无响应 -
nav或navbar没补role="navigation"，读屏不会把它识别为导航区域，用户没法用快捷键跳转 - 轮播图（
carousel）只靠aria-live，但没加aria-current="true"标记当前项，也没给容器设role="region"和aria-label，播报信息残缺
表单控件必须配 label，否则读屏根本不知道这是什么字段
Bootstrap 的 .form-control 样式容易让人忽略语义：直接写 <input type="text" class="form-control"> 是典型错误。没有 label 关联，屏幕阅读器既读不出字段用途，也可能跳过该控件。
正确做法分两种场景：
- 有视觉 label：用
<label for="email">邮箱</label><input id="email" class="form-control">，for和id必须严格匹配 - 无视觉 label（如搜索框带图标）：必须用
aria-label或aria-labelledby替代，例如<input aria-label="搜索网站内容" class="form-control"> -
.form-check（复选/单选）必须把input包在label内，否则点击文字不触发、读屏丢失关联
bootstrap-datepicker 这类插件的无障碍要手动补全
bootstrap-datepicker 默认只处理样式和交互，ARIA 支持非常有限。它不会自动暴露当前日期、可选范围、禁用状态，也不提供键盘导航支持（比如用方向键切换日期）。
关键补救动作：
- 确保日历面板 DOM 持久存在（别用
append临时插入），否则aria-describedby指向的元素可能为空 - 给输入框加
aria-haspopup="grid"和aria-expanded，并在 JS 中同步展开/收起状态 - 日历表格（
table）需加role="grid"，每个日期单元格加role="gridcell"和tabindex="-1"，再通过 JS 实现键盘焦点管理 - 禁用日期要加
aria-disabled="true"，并确保颜色对比度 ≥ 4.5:1，否则低视力用户看不出区别
Bootstrap 的无障碍优势是「零配置起步」，劣势是「状态得自己管」
优势在于开箱即有语义骨架：按钮是 button 元素、警告框带 role="alert"、折叠组件默认含 aria-expanded。这对快速落地内部工具页很友好——你不用从头写 ARIA，只要不乱动 DOM 结构，基础可访问性就有保障。
但它的 JS 插件（tooltip、popover、collapse）只做静态属性注入，动态变化时不会更新 ARIA。比如一个 collapse 手风琴被 JS 展开后，aria-expanded="true" 不会自动加上去，得你自己在回调里手动 setAttribute。
最易被忽略的一点：颜色对比度。Bootstrap 默认主题的浅灰文字（如 .text-muted）在白底上常低于 4.5:1，WCAG AA 不达标。这不是框架 bug，但开发者常常以为“用了 Bootstrap 就合规”，结果一测色值才发现表单提示、禁用按钮、小号文字全翻车。
