友好访问 Accessibility

介绍 BootstrapVue在web访问友好性支持以及相关参数。

概述和限制

BootstrapVue将自动为大多数交互式组件添加适当的辅助功能标记。但是，使用Bootstrap和BootstrapVue构建的任何项目的总体可访问性在很大程度上取决于作者的标记、附加样式和脚本。但是，如果这些已经正确实现，那么应该完全有可能使用BootstrapVue创建满足 WCAG 2.0 （A/AA/AAA）、Section 508和类似的可访问性标准和要求的网站和应用程序。

结构标记

BootstrapVue的自定义组件已经针对可访问/语义生成的即时HTML标记进行了优化。本文档旨在为开发人员提供最佳实践示例，以演示引导程序本身的使用，并演示适当的语义标记，包括解决潜在可访问性问题的方法。

大多数组件文档页面都包含一个（或多个）可访问性部分，指出了最佳实践和限制。

交互式组件

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

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

颜色对比度

当前构成Bootstrap V4默认调色板的大多数颜色（在整个框架中用于按钮变化，警报变化，表单验证指示符）在使用时会导致颜色对比度不足（低于建议的WCAG 2.0 color contrast ratio of 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 media feature 媒体功能的支持。在允许用户指定减少移动偏好的浏览器/环境中，Bootstrap中的大多数CSS过渡效果（例如，当打开或关闭模式对话框时或旋转木马中的滑动动画时）都将被禁用。

如果希望动画和/或过渡效果正常，而动画和/或过渡效果却无效，那么您可以在操作系统控制面板中启用“减少移动（无动画）”设置。

测试应用程序的可访问性

强烈建议在部署前测试应用程序的可访问性。请注意，有些国家甚至有法律要求所有网站都可以访问。

使您的Web应用程序可访问时，只有两件事要考虑：

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

您应该执行的测试步骤：

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