Skip to main content Skip to docs navigation

无障碍

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

目录

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

¥Bootstrap provides an easy-to-use framework of ready-made styles, layout tools, and interactive components, allowing developers to create websites and applications that are visually appealing, functionally rich, and accessible out of the box.

概述和限制

¥Overview and limitations

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

¥The overall accessibility of any project built with Bootstrap depends in large part on the author’s markup, additional styling, and scripting they’ve included. However, provided that these have been implemented correctly, it should be perfectly possible to create websites and applications with Bootstrap that fulfill WCAG 2.2 (A/AA/AAA), Section 508, and similar accessibility standards and requirements.

结构标记

¥Structural markup

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

¥Bootstrap’s styling and layout can be applied to a wide range of markup structures. This documentation aims to provide developers with best practice examples to demonstrate the use of Bootstrap itself and illustrate appropriate semantic markup, including ways in which potential accessibility concerns can be addressed.

互动组件

¥Interactive components

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

¥Bootstrap’s interactive components—such as modal dialogs, dropdown menus, and custom tooltips—are designed to work for touch, mouse, and keyboard users. Through the use of relevant WAI-ARIA roles and attributes, these components should also be understandable and operable using assistive technologies (such as screen readers).

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

¥Because Bootstrap’s components are purposely designed to be fairly generic, authors may need to include further ARIA roles and attributes, as well as JavaScript behavior, to more accurately convey the precise nature and functionality of their component. This is usually noted in the documentation.

色彩对比

¥Color contrast

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

¥Some combinations of colors that currently make up Bootstrap’s default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—may lead to insufficient color contrast (below the recommended WCAG 2.2 text color contrast ratio of 4.5:1 and the WCAG 2.2 non-text color contrast ratio of 3:1), particularly when used against a light background. Authors are encouraged to test their specific uses of color and, where necessary, manually modify/extend these default colors to ensure adequate color contrast ratios.

视觉上隐藏的内容

¥Visually hidden content

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

¥Content which should be visually hidden, but remain accessible to assistive technologies such as screen readers, can be styled using the .visually-hidden class. This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of color) need to also be conveyed to non-visual users.

<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 类组合使用。

¥For visually hidden interactive controls, such as traditional “skip” links, use the .visually-hidden-focusable class. This will ensure that the control becomes visible once focused (for sighted keyboard users). Watch out, compared to the equivalent .sr-only and .sr-only-focusable classes in past versions, Bootstrap 5’s .visually-hidden-focusable is a standalone class, and must not be used in combination with the .visually-hidden class.

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

减少运动

¥Reduced motion

Bootstrap 包括对 prefers-reduced-motion 媒体专题 的支持。在允许用户指定减少运动偏好的浏览器/环境中，Bootstrap 中的大多数 CSS 转场效果（例如，当打开或关闭模式对话框时，或轮播中的滑动动画）将被禁用，并且有意义的动画（例如旋转器）将被减慢。

¥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.

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

¥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.

其他资源

¥Additional resources