Accessibility可访问性

~~A brief overview of Bootstrap’s features and limitations for the creation of accessible content.~~简要概述Bootstrap在创建可访问内容方面的功能和限制。

~~On this page~~本页内容

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

Overview and limitations概述和局限性

~~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.~~ 使用Bootstrap构建的任何项目的总体可访问性在很大程度上取决于作者的标记、附加样式和脚本。However, provided that these have been implemented correctly, it should be perfectly possible to create websites and applications with Bootstrap that fulfill WCAG 2.1 (A/AA/AAA), Section 508, and similar accessibility standards and requirements.但是，如果这些都得到了正确的实现，那么就完全有可能创建具有符合WCAG 2.1（A/AA/AAA）、第508节以及类似可访问性标准和要求的Bootstrap功能的网站和应用程序。

Structural markup结构标记

~~Bootstrap’s styling and layout can be applied to a wide range of markup structures.~~ Bootstrap的样式和布局可以应用于广泛的标记结构。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.本文档旨在为开发人员提供最佳实践示例，以演示Bootstrap本身的使用，并说明适当的语义标记，包括解决潜在可访问性问题的方法。

Interactive components交互组件

~~Bootstrap’s interactive components—such as modal dialogs, dropdown menus, and custom tooltips—are designed to work for touch, mouse, and keyboard users.~~ Bootstrap的交互式组件（如模式对话框、下拉菜单和自定义工具提示）设计用于触摸、鼠标和键盘用户。~~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).~~通过使用相关的WAI-ARIA角色和属性，这些组件还应使用辅助技术（如屏幕阅读器）进行理解和操作。

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. 由于Bootstrap的组件是特意设计成相当通用的，因此作者可能需要包括更多的ARIA角色和属性，以及JavaScript行为，以便更准确地传达其组件的确切性质和功能。~~This is usually noted in the documentation.~~这通常在文件中注明。

Color contrast颜色对比度

~~Some combinations of colors that currently make up Bootstrap’s default palette~~当前构成Bootstrap默认调色板的一些颜色组合—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.1 text color contrast ratio of 4.5:1 and the WCAG 2.1 non-text color contrast ratio of 3:1), particularly when used against a light background. 在整个框架中使用按钮变化、警报变化、表单验证指示器等可能导致颜色对比度不足（低于建议的WCAG 2.1文本颜色对比度4.5:1和WCAG 2.1非文本颜色对比度3:1），尤其是在灯光背景下使用时。~~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.~~鼓励作者测试他们对颜色的具体使用，并在必要时手动修改/扩展这些默认颜色，以确保足够的颜色对比度。

~~Content which should be visually hidden, but remain accessible to assistive technologies such as screen readers, can be styled using the .visually-hidden class.~~ 可以使用.visually-hidden类对应该被视觉隐藏但仍可以被屏幕阅读器等辅助技术访问的内容进行样式设置。~~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>

~~For visually hidden interactive controls, such as traditional “skip” links, use the .visually-hidden-focusable class.~~ 对于视觉隐藏的交互控件，如传统的“跳过”链接，请使用.visually-hidden-focusable类。~~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.请注意，与过去版本中的等效.sr-only和.sr-only-focusable类相比，Bootstrap 5的.visually-hidden-focusable是一个独立类，不能与.visually-hidden类结合使用。

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

Reduced motion简化运动

~~Bootstrap includes support for the prefers-reduced-motion media feature.~~ Bootstrap包括对prefers-reduced-motion媒体功能的支持。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.在允许用户指定其减少运动偏好的浏览器/环境中，Bootstrap中的大多数CSS过渡效果（例如，当模式对话框打开或关闭时，或旋转木马中的滑动动画）将被禁用，有意义的动画（如微调器）将变慢。

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.在支持prefers-reduced-motion的浏览器上，如果用户没有明确表示他们喜欢简化运动（即prefers-reduced-motion: no-preference），则Bootstrap可以使用scroll-behavior属性实现平滑滚动。