Bootstrap组件默认支持基础ARIA但需手动完善确保语义HTML、正确暴露交互状态如aria-expanded、补全role与label、保障颜色对比度≥4.5:1、焦点样式可见、动态内容同步更新ARIA属性。Bootstrap默认组件对屏幕阅读器的支持程度bootstrap 4 的大部分组件如 alert、button、modal、dropdown本身已内置基础 aria 属性但「内置」不等于「开箱即用无障碍」。关键在于语义 html 是否被正确保留以及交互状态是否被准确暴露。比如 button 元素自带可访问性但若你用 div onclick 模拟按钮又没加 rolebutton 和 tabindex0屏幕阅读器就完全感知不到这是个可操作控件Modal 组件会自动加 roledialog 和 aria-modaltrue但如果你手动移除了 .modal-backdrop 或禁用了焦点陷阱focusTrap键盘用户就可能卡在模态框外无法进入或进入后无法关闭Nav 和 Navbar 默认没有 rolenavigation需手动补上否则屏幕阅读器不会将其识别为导航区域表单控件必须配 label 或 aria-labelledbyBootstrap 的表单样式常让人忽略语义标签——尤其是用 .form-control 包裹输入框时容易直接写 input typetext classform-control却漏掉关联的 label。这会导致屏幕阅读器读不出字段用途甚至完全跳过该控件。正确做法是每个 input、select、textarea 必须有显式 label且通过 for 和 id 关联label foremail邮箱/labelinput idemail classform-control若因布局限制无法使用视觉 label如搜索框内嵌图标则必须用 aria-label 或 aria-labelledby 提供文本替代input aria-label搜索网站内容 classform-controlBootstrap 的 .form-check复选框/单选必须把 label 包住 input否则点击文字无法触发选中且部分读屏会丢失关联关系自定义组件或 JS 插件要手动补全 ARIA 状态Bootstrap 自带的 JS 插件如 Tooltip、Popover、Carousel虽加了部分 ARIA但动态状态如展开/收起、当前页码、悬停提示是否显示仍需开发者干预。尤其当用 JS 动态切换内容时ARIA 属性不会自动更新。Tooltip 默认只在触发时临时插入 DOM不持久渲染因此 aria-describedby 指向的元素可能不存在——应确保 tooltip 内容在 DOM 中存在或改用 aria-livepolite 区域播报变化Carousel 必须提供「当前第 X 页 / 共 Y 页」的实时播报仅靠 aria-live 不够还需用 aria-currenttrue 标记当前项并给轮播容器加 roleregion 和 aria-label图片轮播所有通过 data-bs-toggle 控制显隐的组件如折叠卡片都要同步控制 aria-expanded 值——Bootstrap 不会自动帮你同步这个属性得自己用事件监听补上颜色对比度与键盘焦点可见性不是 Bootstrap 责任Bootstrap 的默认配色如浅灰文字 #6c757d 在白底上对比度只有 ~4.2:1低于 WCAG AA 要求的 4.5:1其焦点样式:focus在部分版本中被重置为极细虚线甚至透明导致键盘用户完全看不到当前焦点位置。 Adobe Image Background Remover Adobe推出的图片背景移除工具