在GitHub上查看

辅助功能

简要概述Bootstrap的特性和创建可访问内容的限制。

Bootstrap提供了一个易于使用的框架,包含了现成的样式、布局工具和交互组件,允许开发人员创建视觉上吸引人、功能上丰富、可访问的网站和应用程序。

概述和限制

使用Bootstrap构建的任何项目的总体可访问性在很大程度上取决于作者所包含的标记、附加样式和脚本。然而,如果这些都被正确地实现了,那么使用Bootstrap创建满足 WCAG 2.1 (A/AA/AAA)、 Section 508以及类似的可访问性标准和需求的网站和应用程序应该是完全可能的。

结构标记

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

互动组件

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

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

颜色对比

一些颜色的组合,目前占引导的默认palette-used整个框架,例如按钮变化,警惕变化,表单验证指示,可能导致颜色对比不足(以下推荐 WCAG 2.1 text color contrast ratio of 4.5:1 ,3:1的WCAG 2.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媒体功能 的支持。在浏览器/环境允许用户指定他们倾向于减少动作,引导最终CSS转换效果(例如,当一个模态对话框打开或关闭,或滑动动画在旋转木马)将被禁用,而有意义的动画将会放缓。

在支持 prefers-reduced-motion 的浏览器上,以及在用户没有明确表示他们更喜欢减少动作的地方(例如,prefers-reduced-motion: no-preference),Bootstrap使用滚动行为属性支持平滑滚动。

扩展资源