跳至主要内容 跳至文档导航

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:1WCAG 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.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 媒体功能 的支持。在允许用户指定其减少运动偏好的浏览器/环境中,Bootstrap 中的大多数 CSS 过渡效果(例如,当模态对话框打开或关闭时,或旋转木马中的滑动动画)将被禁用,并且有意义的动画(例如旋转器)将被减慢。

在支持 prefers-reduced-motion 的浏览器中,并且用户明确表示他们希望减少运动(即 prefers-reduced-motion: no-preference),Bootstrap 使用 scroll-behavior 属性启用平滑滚动。

其他资源