Web 可访问性简介

在这篇文章中，您将了解可访问性的基础知识，以确保每个人都可以使用您的网站。

这是学习 Web 开发的系列文章和视频的第七篇。

您可以观看以下视频或跟随后面的扩展文本。

在本课中，我们不会创建新的代码。相反，我将演示什么是无障碍，以及确保创建无障碍 Web 体验的基本注意事项。

查看演示的实时链接 >

首先，让我们从Web 无障碍倡议 (WAI)对无障碍的定义开始：

Web 无障碍是指网站、工具和技术的设计和开发应方便残障人士使用。更具体地说，残障人士可以：感知、理解、浏览和与 Web 互动；并为 Web 做出贡献。

WAI 进一步指出，这不仅适用于那些明显残疾的人，也适用于暂时性或不易察觉的障碍，例如：

• 使用小屏幕设备的人
• 因衰老而改变的能力
• 暂时残疾，例如手臂骨折
• 环境限制，例如强光或阳光造成的屏幕眩光

这些情况是可以考虑的，但需要有意识的努力。幸运的是，现在有深入的指南和丰富的资源可以帮助我们学习如何操作并测试结果。

从根本上说，Web 上的可访问性始于对 HTML 语义的使用。恭喜！通过我们之前的几节课，您已经掌握了打造可访问 Web 体验的基本知识！

今天，我们将探讨一些在编程之旅中需要牢记的额外要点。学习如何将无障碍的 Web 体验融入到代码开发中，这不仅是正确的做法，还能让你在求职市场上占据优势。然而，令人惊讶的是，许多在线体验往往忽视了这一点。

我们将讨论的主题包括：

• 等级制度
• 内容
• 对比
• 键盘交互

请注意，本课程并未详尽涵盖所有可访问性问题，但旨在将基本概念放入您的开发工具箱中。

等级制度

实际上，我们已经在 HTML 课程中讲过层次结构了。简单来说，层次结构的构建始于使用合适的标题定义文本内容的结构。

下面的动图演示了正确的标题层次结构如何帮助需要使用辅助技术（通常以屏幕阅读器的形式）的视障用户。我的 Mac 内置了一个名为 Voice Over（简称 VO）的屏幕阅读器。我打开它，你会看到一个窗口出现了，除了语音反馈外，它还提供书面文本。

在我的示例网页中，我触发了一个键盘命令来显示标题。然后，我使用箭头键滚动浏览列表，最后使用回车键选择一个标题。请注意，一个黑框是如何添加到“标题 3”的，作为 Voice Over 在页面上聚焦位置的额外视觉指示。

使用额外的键盘命令，我可以请求 Voice Over 朗读文档。同样，VO 会在文档中移动时放置一个黑框作为视觉指示。

内容

由于使用了已定义的类型元素，VO 能够非常轻松地读取该内容。但是，还有其他方法可以定义文本内容，并且无障碍访问的要求是所有内容都应可感知。这意味着任何非文本内容都应提供文本替代，并且有多种方法可以实现这一点。

我们已经讨论过一个常见的场景，那就是通过alt属性提供图像的描述。那么，让我们进入本文档的下一部分，看看 VO 如何通过文本读取图像alt。

对比

下一个关键概念是对比度。对比度通常指文本或界面组件的颜色对比，但对于文本而言，它也可以指易读性。

第一部分展示了文本对比度较差的示例。前两个示例主要展示了颜色对比度较差。文本与背景的对比度必须达到 4.5:1 才能符合无障碍标准。

第一个例子因 2.41:1 的比例而失败，并且由于线条和字母间距太紧，其整体可读性也很差。

虽然使用彩色文字本身并没有错，但要确保色彩搭配符合对比度可能会更加困难。第二个例子就失败了，比例为 2.59:1。

第三个例子是由于使用小尺寸的细字体而导致可读性较差，第四个例子是由于在小尺寸的长文本块中使用装饰字体而导致可读性不佳。

让我们看一些可接受的文本对比示例。

第一个示例演示了文本对比度规则的例外情况：宽度至少为 14px 且为粗体，或宽度大于 18px 的文本，其对比度会降低至 3:1。本例中，文本宽度为 18px 且为粗体，对比度为 3.25:1。

下一个示例对比鲜明，色彩鲜艳夺目！比例是 5.17:1！

请注意，“失败”是错误的，因为正在使用的对比工具不知道正在测试的文本大小

接下来，适当使用细字体，增加字号并限制短语的长度。这对于短标题来说或许是可以接受的。

最后，我们将装饰字体缩减至一个单词，以展示另一个例外。如果我们假设这是作为徽标设计的，那么这是可以接受的，因为徽标明确不受对比度准则的约束，因此颜色选择也同样可以接受。

对比度的另一个类别是交互式用户界面组件，例如表单字段和按钮，如此处所示。UI 组件本身的控件需要满足 3:1 的对比度，而表单标签等文本部分（如果不是粗体或小于 18px）则应继续满足 4.5:1 的对比度。

第一个表单字段的标签和输入框的对比度都不够。旁边的示例则实现了标签和输入框的适当对比度。

按钮比较的设置大致相同，但是，按钮通常具有悬停状态，即当用户将鼠标悬停在其上时。

对于“Good Button”的悬停状态，您会看到应用了深色背景色，并将文本颜色切换为白色以保持对比度。另一个需要注意的是，我们现在必须平衡两个级别的对比度：按钮文本与按钮背景的对比度为 4.5:1，按钮背景与页面背景的对比度至少为 3:1。

键盘交互

现在，最后一个关键话题是键盘交互。有一类用户，无论他们是否使用语音对话，都无法使用鼠标，因此他们依赖语音或手动键盘命令。这些用户浏览网站的主要方式是从一个交互组件切换到另一个交互组件。对于视力正常的用户来说，交互组件在获得焦点时提供视觉反馈非常重要。

看看我们的文本输入框和按钮，这张动图演示了键盘 Tab 键带来的焦点切换。当我 Tab 键切换到效果较差的输入框时，唯一的指示就是闪烁的文本光标。如果我再次 Tab 键切换到效果良好的输入框，就会看到明显的边框变化。这种焦点切换也同样需要满足 3:1 的色彩对比度要求，而这需要根据周围的背景进行衡量。

当我点击“差”按钮时，你看不到任何变化。再点击“好”按钮一次，你会看到我们为这个按钮使用了相同的悬停样式。

资源

无障碍访问方面还有很多需要注意的地方，我们将在本系列文章的后续章节中继续探讨。如果您想了解更多信息，以下是一些资源链接：

• WAI 网页无障碍简介：https://www.w3.org/WAI/fundamentals/accessibility-intro/
• WAI 简易可访问性检查：https://www.w3.org/WAI/test-evaluate/preliminary/
• WAI 无障碍原则简介：https://www.w3.org/WAI/fundamentals/accessibility-principles/
• WCAG（Web内容可访问性指南）简明指南：https://24ways.org/2017/wcag-for-people-who-havent-read-them/
• A11Y 样式指南无障碍组件参考：https://a11y-style-guide.com/style-guide/
• WebAIM 对比度检查器：https://webaim.org/resources/contrastchecker/
• Contraste 桌面应用程序（仅限 Mac，用于演示）：https://contrasteapp.com/

接下来是第 8 集： CSS 简介