Bootstrap本身不解决语音朗读问题，需手动补充ARIA属性和语义化HTML以满足WCAG标准，重点包括按钮的aria-label、表单标签绑定、动态内容aria-live、导航结构role定义，并用.visually-hidden正确隐藏内容，最后必须通过NVDA/VoiceOver实测验证。
Bootstrap 本身不解决语音朗读问题，但能配合无障碍标准用好
Bootstrap 是个视觉 UI 框架，它默认的 HTML 结构和 class 命名（比如 .btn、.alert）本身不自带语义增强，也不会自动加 aria- 属性或调整焦点顺序。盲人依赖屏幕阅读器（如 NVDA、VoiceOver）朗读网页，真正起作用的是符合 WCAG 的语义化 HTML 和 ARIA 实践，不是 Bootstrap 的栅格或样式。
所以关键不是“怎么用 Bootstrap 做语音友好”，而是“怎么在用 Bootstrap 的同时，不破坏、反而强化无障碍支持”。常见错误是直接套用 class="btn btn-primary" 却忽略按钮缺少文本、或用 div 模拟卡片却不加 role="region" 和标题关联。
必须手动补全的 4 类语义缺失
Bootstrap 组件常省略对屏幕阅读器至关重要的语义信息，以下四类必须手写补上：
-
按钮无可见文本时：比如仅用图标
<i class="bi bi-x"></i>关闭弹窗，必须加aria-label="关闭"或包裹<span class="visually-hidden">关闭</span> -
表单控件无关联标签：Bootstrap 表单示例里常把
<input>和提示文字分开写，必须用for/id显式绑定，或用aria-labelledby -
动态内容更新区域：比如用
$.toast()弹出提示，需加role="alert"或aria-live="polite"，否则阅读器不会主动播报 -
导航结构模糊：用
<nav class="navbar"></nav>时，若内部用div做菜单项，要补role="menuitem"和键盘导航逻辑；更稳妥是直接用<ul><li><a></a></li></ul>语义结构
慎用 Bootstrap 的“视觉隐藏”类
Bootstrap 提供 .visually-hidden（原 .sr-only），这是正确的屏幕阅读器隐藏方式——它让内容对视觉隐藏但对阅读器可见。但容易误用：
- 别用
display: none或visibility: hidden隐藏操作说明文字，这会让阅读器彻底跳过 - 别把整个交互控件（如筛选按钮）只靠
.visually-hidden隐藏又用 JS 切换显示，会导致焦点丢失或阅读器状态不同步 - 当用
.visually-hidden-focusable做“跳过导航”链接时，确保它第一个可聚焦元素，且tabindex="-1"逻辑正确
真实案例：<a href="#main" class="visually-hidden-focusable">跳过导航</a> 必须放在 开头，且目标 <main id="main"></main> 要有明确语义角色。
测试比写代码更重要
写了 aria-label 不代表就真能被读出来。必须实测：
- 用 Chrome + NVDA（Windows）或 Safari + VoiceOver（macOS），键盘操作（Tab/Shift+Tab/Enter），听是否按预期朗读
- 禁用 CSS 后检查 DOM 结构是否仍保持逻辑顺序（Bootstrap 的
order-*类可能打乱源码顺序，影响阅读流） - 运行 axe 浏览器插件扫描，重点关注
aria-*属性缺失、label关联失败、对比度不足（Bootstrap 默认配色有时不达标）
一个典型漏点：Bootstrap 的 .form-check-input 复选框，若旁边文字是 <span>同意条款</span> 而非 <label></label>，即使加了 aria-labelledby，部分阅读器仍无法将文字与控件绑定。
