无障碍

简要介绍Bootstrap创建可访问内容的功能和局限性。

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

概述和局限性

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

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

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

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

目前,构成Bootstrap默认调色板的大多数颜色（在整个框架中用于按钮变体,警报变体,表单验证指示符等）都会导致不足色彩对比（低于推荐值 WCAG 2.0的色彩对比度为4.5：1 ）在浅色背景上使用时。作者将需要手动修改/扩展这些默认颜色,以确保足够的颜色对比度。

内容应在视觉上隐藏,但对于辅助技术（例如屏幕阅读器）仍可访问,可以使用 .sr-only 类。这在需要将其他视觉信息或提示（例如通过使用颜色表示的含义）也需要传达给非视觉用户的情况下很有用。

对于视觉上隐藏的交互式控件,例如传统的“跳过”链接, .sr-only 可以与 .sr-only-focusable 类。这将确保控件一旦聚焦（对于有视力的键盘用户）就变得可见。

Bootstrap包括对 prefers-reduced-motion 媒体功能。在允许用户指定降低运动偏好的浏览器/环境中,Bootstrap中的大多数CSS过渡效果（例如,当打开或关闭模式对话框或轮播中的滑动动画时）都将被禁用。