View on GitHub

可访问性

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

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

概述和限制

任何使用 Bootstrap 构建的项目的总体可访问性很大程度上取决于作者的标记、附加样式和脚本。但是,如果这些措施得到正确实现,就应该完全有可能创建具有 Bootstrap功能的网站和应用程序,这些网站和应用程序满足WCAG 2.0 (A/AA/AAA)、 Section 508 以及类似的可访问性标准和要求。

结构化标记

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

交互式组件

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

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

颜色对比度

当前构成 Bootstrap默认调色板的大多数颜色 —— 在整个框架中用于按钮变化、警报变化、窗体验证指示器等,当在浅色背景下使用时,会导致颜色对比度不足(低于建议的 WCAG 2.0 颜色对比度比 4.5:1)。作者需要手动修改/扩展这些默认颜色,以确保足够的颜色对比度。

可视隐藏内容

应该可视化隐藏的内容,但仍然可以被辅助技术(如屏幕阅读器)访问,可以使用 .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过渡效果(例如,打开或关闭模式对话框时,或旋转木马中的滑动动画)将被禁用,有意义的动画(如微调器)将变慢。

额外资源