亲和性

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

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

概述和限制

使用Bootstrap构建的任何项目的总体可访问性在很大程度上取决于作者的标记、附加样式和脚本。然而,用Bootstrap创建执行WCAG 2.1(A/AA/AAA),Section 508,以及类似标准网站和应用是完全可以的。

结构化标记

Bootstrap的样式和布局可以应用于大量的标记结构上。本文主旨在向开发者提供最佳的示范演示Bootstrap本身以及展示适当的语义标记,包括处理潜在亲和性之方式。

交互式组件

Bootstrap的互动元件—比如modal dialogs,下拉式功能表和自定义工具提示,其设计目的是方便触控式及鼠标用户。通过使用WAI-ARIA角色和属性,使用辅助性技术(比如屏幕阅读器)这些元件应同时具有可理解性和操作性。

由于Bootstrap的元件有意被设计为具有相当的通用性,因此作者可能需要加入进一步的ARIA角色和属性以及JavaScript行为,以便更加准确地传达其元件的精确性质和功能。在文件中通常会加以注明。

颜色对比度

当前构成Boostrap预设的一些颜色—在整个框架内用于按钮变化,警告变化,形式认证指示等—在浅色背景是不足够的颜色对比(如下为建议的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’s.visually-hidden-focusable是独立的样式,不得与.visually-hidden样式一起使用。

<a class="visually-hidden-focusable" href="#content">Skip to main content</a>

简化动画

Bootstrap加入对于prefers-reduced-motion media feature的支持性。允许用户指定减少动态的选项的浏览器/环境中,Bootstrap中的大多数CSS转换效果(例如,打开或关闭互动视窗时)将被禁用,和有意义的动画(例如微调器)将会变慢。

在支持prefers-reduced-motion的浏览器,并在用户未明确表示他们希望减少reduced motion的情况下(即在prefers-reduced-motion: no-preference状况下),Bootstrap可以使用scroll-behavior属性实现平滑滚动。

额外资源

返回顶部