报告问题编辑此页面

辅助功能

BootstrapVue 的功能和限制的简要概述，用于创建无障碍内容。

概述和限制

BootstrapVue 会自动为大多数交互式组件添加适当的无障碍标记。但是，使用 Bootstrap 和 BootstrapVue 构建的任何项目的整体无障碍性在很大程度上取决于作者的标记、其他样式和他们包含的脚本。但是，只要正确实现了这些功能，完全有可能使用 BootstrapVue 创建符合 WCAG 2.0 (A/AA/AAA)、第 508 条 和类似无障碍标准和要求的网站和应用程序。

结构化标记

BootstrapVue 的自定义组件经过优化，可开箱即用地生成无障碍/语义化 HTML 标记。本文档旨在为开发人员提供最佳实践示例，以演示 Bootstrap 本身的用法，并说明适当的语义化标记，包括解决潜在无障碍问题的方法。

大多数组件文档页面都包含一个无障碍部分（或部分），其中注明最佳实践和限制。

交互式组件

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

由于 BootstrapVue 的组件专门设计为相当通用，因此作者可能需要包含更多 ARIA 角色和属性，以及 JavaScript 行为，以更准确地传达其组件的精确性质和功能。这通常在文档中注明。

颜色对比度

当前构成 Bootstrap V4 默认调色板的大多数颜色（在整个框架中用于按钮变体、警告变体、表单验证指示器等内容）在浅色背景下使用时会导致不足的颜色对比度（低于推荐的 WCAG 2.0 4.5:1 颜色对比度比率）。作者需要手动修改/扩展这些默认颜色，以确保足够的颜色对比度比率。

请参阅 主题 部分以自定义 Bootstrap 的 SCSS。

视觉隐藏内容

应该视觉隐藏但仍可供屏幕阅读器等辅助技术访问的内容可以使用 .sr-only 类进行样式化。这在需要向非视觉用户传达其他视觉信息或提示（如通过使用颜色表示的含义）的情况下很有用。

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

对于视觉上隐藏的交互式控件，例如传统的“跳过”链接，类 .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 应用程序可访问时，只需考虑两件主要的事情

  • 定义正确的键盘行为。BootstrapVue 为我们的大多数组件提供键盘控制，但您应该确保您的自定义组件也可以通过键盘访问。
  • 让屏幕阅读器能够理解您的应用程序。在大多数情况下，Bootstrap 会自动在我们的组件上设置正确的 role 和 aria-* 属性。您还应该确保您的所有自定义组件都提供正确的角色和属性（尽可能使用语义 HTML 元素和标记）。

您应该执行的测试步骤

  • 尝试仅使用键盘查看是否可以访问和控制所有交互式组件。确保控件具有焦点样式，以便用户知道他们位于哪个交互式元素上。请记住，键盘用户无法触发元素的 hover 状态。
  • 使用屏幕阅读器（仅与键盘结合使用）来导航和与您的应用程序交互。有几个免费的屏幕阅读器可用于各种操作系统和浏览器。请记住，屏幕阅读器用户只能“看到”他们听到的内容。
  • 查看在增加浏览器的缩放级别（和/或字体大小）时您的应用程序的外观和工作方式。

其他资源