辅助功能

简要概述 Bootstrap 在创建无障碍内容方面的特性和局限性。

在此页

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

概述和限制

使用 Bootstrap 构建的任何项目的整体可访问性在很大程度上取决于作者的标记、附加样式和它们包含的脚本。但是，如果这些都已正确实施，则完全有可能使用 Bootstrap 创建满足WCAG 2.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和类相比，Bootstrap 5 的类是一个独立的类，不得与类组合使用。.sr-only-focusable.visually-hidden-focusable.visually-hidden

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

减少运动

Bootstrap includes support for the prefers-reduced-motion media feature. In browsers/environments that allow the user to specify their preference for reduced motion, most CSS transition effects in Bootstrap (for instance, when a modal dialog is opened or closed, or the sliding animation in carousels) will be disabled, and meaningful animations (such as spinners) will be slowed down.

On browsers that support prefers-reduced-motion, and where the user has not explicitly signaled that they’d prefer reduced motion (i.e. where prefers-reduced-motion: no-preference), Bootstrap enables smooth scrolling using the scroll-behavior property.