可访问性

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

当前页

Bootstrap 提供了一个易于使用的框架，其中包含现成的样式、布局工具和交互式组件，允许开发人员创建视觉上吸引人、功能丰富且开箱即用的网站和应用程序。

概述和限制

使用 Bootstrap 构建的任何项目的整体可访问性在很大程度上取决于作者的标记、附加样式和它们包含的脚本。但是，只要这些已正确实现，则完全可以使用Bootstrap创建满足 WCAG 2.1 (A/AA/AAA), 第508节，以及类似的可访问性标准和要求的网站和应用程序。

结构标记

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

交互式组件

Bootstrap 的交互式组件（如模式对话框、下拉菜单和自定义工具提示）专为触摸、鼠标和键盘用户而设计。通过使用相关的 WAI-ARIA 角色和属性，这些组件也应该使用辅助技术（如屏幕阅读器）易于理解和操作。

由于 Bootstrap 的组件被特意设计为相当通用，因此作者可能需要包含进一步的 ARIA 角色和属性，以及 JavaScript 行为，以更准确地传达其组件的精确性质和功能。这通常在文档中注明。

颜色对比度

目前构成 Bootstrap 默认调色板的某些颜色组合（在整个框架中用于按钮变体、警报变体、表单验证指示器等内容）可能会导致颜色对比度不足（低于建议的 WCAG 2.1 text color contrast ratio of 4.5:1 和 WCAG 2.1 non-text color contrast ratio of 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 属性启用平滑滚动。