无障碍(可访问性)
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: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
属性启用平滑滚动。