Source

可访问性

Bootstrap 用于创建可访问内容的功能和限制的简要概述。

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

概述和限制

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

结构标记

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

交互式组件

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

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

颜色对比

当前构成 Bootstrap 的默认调色板的大多数颜色（在整个框架中用于按钮变体、警报变体、表单验证指示符等）在使用浅色背景。作者将需要手动修改/扩展这些默认颜色以确保足够的颜色对比度。

视觉隐藏的内容

可以使用该类设置应该在视觉上隐藏但仍可供屏幕阅读器等辅助技术访问的内容.sr-only。这在额外的视觉信息或提示（例如通过使用颜色表示的含义）也需要传达给非视觉用户的情况下很有用。

<p class="text-danger">
  <span class="sr-only">Danger: </span>
  This action is not reversible
</p>

对于视觉隐藏的交互控件，例如传统的“跳过”链接，.sr-only可以与.sr-only-focusable类结合。这将确保控件在聚焦后变得可见（对于有视力的键盘用户）。

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

减少运动

Bootstrap 包括对prefers-reduced-motion媒体功能的支持。在允许用户指定他们对减少运动的偏好的浏览器/环境中，Bootstrap 中的大多数 CSS 过渡效果（例如，当打开或关闭模式对话框时）将被禁用。目前，支持仅限于 macOS 和 iOS 上的 Safari。

其他资源