辅助功能（Accessibility）

简要介绍 Bootstrap 在创建无障碍内容方面的功能和限制。

On this page

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

概览和局限性

使用 Bootstrap 构建的任何项目的整体可访问性在很大程度上取决于作者的标记、附加样式和脚本。不过，只要正确实施了这些内容，使用 Bootstrap 创建的网站和应用程序完全可以满足 WCAG2.1 (A/AA/AAA)、第 508 条以及类似的可访问性标准和要求。

结构标记

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

交互式组件

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

由于 Bootstrap 的组件设计得相当通用，因此作者可能需要包含更多的 ARIA 角色和属性以及 JavaScript 行为，以便更准确地表达其组件的确切性质和功能。这通常会在文档中注明。

色彩对比度

目前构成 Bootstrap 默认调色板的某些颜色组合–在整个框架中用于按钮变化、警报变化、表单验证指示器等–可能会导致颜色对比度不足（低于推荐的WCAG 2.1 文字颜色对比度 4.5:1和WCAG 2.1 非文字颜色对比度 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 ”属性启用平滑滚动。