无障碍访问

关于 Bootstrap 在创建可访问内容方面的功能和局限性的简要概述。

本页目录

Bootstrap 提供了一个易于使用的框架，包含现成的样式、布局工具和交互式组件，使开发者能够创建视觉吸引力强、功能丰富且开箱即用的可访问网站和应用。

概览与限制

使用 Bootstrap 构建的任何项目的整体可访问性在很大程度上取决于作者的标记、额外的样式以及他们所包含的脚本。然而，只要这些已被正确实现，使用 Bootstrap 创建符合 WCAG 2.2（A/AA/AAA）、第 508 条款及类似可访问性标准和要求的网站和应用程序是完全可能的。

结构标记

Bootstrap 的样式和布局可以应用于各种标记结构。本文档旨在为开发者提供最佳实践示例，以展示 Bootstrap 的使用方法，并说明合适的语义标记，包括可以解决潜在无障碍问题的方法。

互动组件

Bootstrap 的交互组件——例如模态框、下拉菜单和自定义工具提示——旨在为触摸、鼠标和键盘用户提供良好体验。通过使用相关的 WAI-ARIA 角色和属性，这些组件也应该可以通过辅助技术（如屏幕阅读器）理解和操作。

因为 Bootstrap 的组件被故意设计得相当通用，作者可能需要进一步包含 ARIA 角色和属性，以及 JavaScript 行为，以更准确地传达其组件的具体性质和功能。通常在文档中会有所说明。

颜色对比

目前组成 Bootstrap 默认调色板的一些颜色组合——在整个框架中用于按钮变化、警告变化、表单验证指示等——可能会导致颜色对比不足（低于推荐的WCAG 2.2 文本颜色对比度比率 4.5:1和WCAG 2.2 非文本颜色对比度比率 3:1），特别是在浅色背景下使用时。建议作者测试他们具体的颜色使用情况，并在必要时手动修改/扩展这些默认颜色，以确保足够的颜色对比度比率。

应在视觉上隐藏但仍可被辅助技术（如屏幕阅读器）访问的内容，可以使用.visually-hidden类来进行样式设置。这在需要将额外的视觉信息或提示（例如通过颜色表示的含义）也传达给非视觉用户的情况下非常有用。

<p class="text-danger">
  <span class="visually-hidden">Danger: </span>
  This action is not reversible
</p>

对于视觉上隐藏的交互控件，例如传统的“跳过”链接，请使用 .visually-hidden-focusable 类。这将确保控件在获得焦点时可见（对于有视力的键盘用户）。注意，与以往版本中等效的 .sr-only 和 .sr-only-focusable 类相比，Bootstrap 5 的 .visually-hidden-focusable 是一个独立的类，不能与 .visually-hidden 类结合使用。

<a class="visually-hidden-focusable" href="#content">Skip to main content</a>

减少动画

Bootstrap 包括对 prefers-reduced-motion 媒体特性的支持。在允许用户指定减少动画偏好的浏览器/环境中，Bootstrap 中的大多数 CSS 过渡效果（例如，当模态框打开或关闭时，或轮播中的滑动动画）将被禁用，而有意义的动画（例如加载加载动画）将会减慢速度。

在支持 prefers-reduced-motion 的浏览器上，并且用户未明确表示他们更喜欢减少动画（即在 prefers-reduced-motion: no-preference 的情况下），Bootstrap 使用 scroll-behavior 属性启用平滑滚动。