跳到主题内容 跳到文档导航栏

可访问性

Bootstrap对创建可友好访问内容的功能和限制的简要概述。

BootsBootstrap提供了易于使用的现成样式,布局工具和交互式组件的框架,从而使开发人员可以创建视觉上吸引人的,功能丰富的开箱即用的网站和应用程序。

概述和局限性

使用Bootstrap构建的任何项目的总体可访问性在很大程度上取决于作者的标记,其他样式以及所包含的脚本。但是,只要正确执行了这些操作,就完全有可能使用Bootstrap创建满足 WCAG 2.1 (A/AA/AAA), Section 508以及类似可访问性标准和要求的网站和应用程序。

结构标记

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

互动组件

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

由于Bootstrap的组件是专门为通用设计的,因此作者可能需要包括其他ARIA角色和属性以及JavaScript行为,以更准确地传达其组件的确切性质和功能。通常在文档中对此进行说明。

色彩对比

当前构成Bootstrap默认调色板的某些颜色组合(在整个框架中用于按钮变化,警报变化,表单验证指示符等)可能导致颜色对比度 不足(低于建议的 WCAG 2.1 文本颜色对比度 4.5:1 以及 WCAG 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 属性启用平滑滚动。

扩展资源