无障碍访问

简要介绍 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 类进行样式设置。 这在其他视觉信息或提示(例如通过使用颜色表示的含义)也需要传达给非视觉用户的情况下非常有用。

<p class="text-danger">
  <span class="sr-only">Danger: </span>
  This action is not reversible
</p>

对于视觉上隐藏的交互式控件,例如传统的“skip”链接, .sr-only 可以与 .sr-only-focusable 类。 这将确保控制在聚焦后变得可见(对于有视力的键盘用户)。

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

减少过场效果

Bootstrap 包含对减少过场效果的支持。 在允许用户指定减少过场效果的浏览器/环境中,Bootstrap 中的大多数CSS过渡效果(例如,打开或关闭模式对话框时)将被禁用(感觉可以让设备更省电)。 目前,支持仅限于macOS和iOS上的Safari。

额外的资源,有兴趣可以看看: