无障碍浏览

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

Bootstrap提供了一个易于使用的现成样式框架、布局工具和交互式组件框架，允许开发人员创建视觉上吸引人，功能丰富的开箱即用的网站和应用程序，实现易用性辅助增强的无障碍浏览平台。

概述和限制

使用Bootstrap构建的任何项目的整体可访问性在很大程度上取决于作者的标记、额外的样式和脚本。但是，如果已经正确实现了这些功能，则完全可以使用Bootstrap创建实现Web内容无障碍指南WCAG 2.0 (A/AA/AAA)、Section 508，第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包括对首选减少prefers-reduced-motion媒体功能的支持..在允许用户指定减少运动的首选项的浏览器/环境中，Bootstrap中的大多数CSS过渡效果（例如，打开或关闭模式对话框时，或轮播中的滑动动画）将被禁用.

扩展资源

• Web Content Accessibility Guidelines 《WCAG) 2.0(Web内容辅助功能指南（WCAG）2.0》
• The A11Y Project
• MDN accessibility documentation《MDN辅助功能文档》
• Tenon.io Accessibility Checker《Tenon.io辅助功能检查器》
• Colour Contrast Analyser (CCA)《彩色对比分析仪（CCA）》
• “HTML Codesniffer” bookmarklet for identifying accessibility issues《用于识别辅助功能问题的“HTML代码转换”书签》