Accessibility

简要概述Bootstrap的功能和创建可访问内容的约定。

On this page

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

概述和限制

使用Bootstrap构建的任何项目的总体可访问性在很大程度上取决于作者的标记、附加样式和脚本。然而，只要这些都得到了正确的实施，就完全有可能使用Bootstrap创建符合WCAG 2.1 (A/AA/AAA)的网站和应用程序，, Section 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>

对于视觉上隐藏的交互式控件，如传统的"skip"链接，请使用.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 media feature。在允许用户指定其减少运动偏好的浏览器/环境中，Bootstrap中的大多数CSS过渡效果（例如，当打开或关闭模式对话框，或carousels中的滑动动画时）将被禁用，并且有意义的动画（如spinners）将变慢。

在支持prefers-reduced-motion的浏览器上，如果用户没有明确表示他们更喜欢减少运动(即prefers-reduced-motion: no-preference)，Bootstrap使用scroll-behavior属性实现平滑滚动。