改进网页的无障碍功能
本文档集是 Udacity 无障碍课程中介绍的部分内容的文本版本。它不是视频课程的直接转录，而是以课程的原创内容作为基础，从而更加简洁地处理无障碍原则和做法。
摘要
- 了解无障碍的含义及其在 Web 开发中的应用情况。
- 了解如何让所有人都能访问和使用网站。
- 了解如何在尽量减小开发影响的情况下添加基本无障碍功能。
- 了解可用的 HTML 功能以及如何使用这些功能改进无障碍功能。
- 了解用于创建精美无障碍功能体验的高级无障碍功能技术。
了解无障碍功能及其范围和影响可以让您成为更好的 Web 开发者。本指南旨在帮助您了解如何才能让所有人都能访问和使用您的网站。
“Accessibility”（无障碍）可能难以拼写，但并不难实现。在本指南中，您将了解如何轻松上手，轻松改进无障碍功能，如何使用 HTML 内置的功能创建更方便且更可靠的界面，以及如何利用一些高级技术打造美观的无障碍体验。
您还会发现，这些技巧中的许多方法都有助于您为所有用户（而不仅限于残障人士）打造更愉悦、更易于使用的界面。
当然，许多开发者对无障碍功能的理解并不陌生，这与政府合同、核对清单和屏幕阅读器有关，对吧？- 还存在大量的误解。 例如，许多开发者认为解决无障碍功能问题将迫使他们选择是打造一种愉悦、有吸引力的体验，还是一种笨拙、丑闻但易于访问的体验。
当然，实际情况根本不是如此，因此在开始讨论其他主题之前，我们先澄清这个问题。什么是无障碍？我们通过本课程了解哪些内容？
什么是无障碍？
大体上说，某个网站可访问，是指该网站的内容可供访问，且其功能可供任何人使用。作为开发者，很容易认为所有用户都能看到和使用键盘、鼠标或触摸屏，并且可以像您一样与您的网页内容互动。这可能会为某些用户带来不错的体验，但会造成一些问题，从简单的烦恼到对其他人的阻碍，不一而足。
那么，无障碍是指这样一类用户的体验，他们可能不在“典型”用户的这个狭窄范围之内，他们访问的内容或与内容互动的方式与预期不同。具体而言，它涉及受到某种残疾或残疾的用户，但请注意，这种体验可能是非身体上的，也可能是暂时的。
例如，尽管我们在讨论无障碍功能时往往将重点放在身体有缺陷的用户身上，但我们都能感受到，在使用因其他原因而无法访问的界面时。您是否曾在手机上使用桌面版网站时遇到问题，看到过“您所在区域没有此内容”消息，或者在平板电脑上找不到熟悉的菜单？这些都是无障碍功能方面的问题。
随着了解的深入，您会发现，在这种更广泛、更普遍意义上解决无障碍功能问题几乎总能改善所有人的用户体验。让我们看一个示例：
此表单存在几个无障碍功能问题。
- 文字对比度低，导致弱视用户难以阅读。
- 如果左侧有标签，右侧是字段，许多人就难以将它们关联起来，而对于需要放大才能使用页面的用户，几乎是不可能的；想象一下，在手机上看着这些界面，必须四处移动，才能弄清楚其中的内容。
- “记得详细信息吗？”标签未与该复选框关联，因此您必须仅点按或点击小正方形，而不是直接点击该标签；此外，使用屏幕阅读器的用户也难以找出关联。
现在，我们来挥一挥无障碍魔杖，看看解决了这些问题的表单。 我们将调暗文本，修改设计，使标签接近为其加标签的内容，并修正与复选框相关联的标签，以便您也可以通过点击标签进行切换。
您更愿意使用哪一个？如果您说的是“无障碍版本”，那么表明您正在了解本指南的主要前提。通常情况下，对于少数用户而言，彻底阻挡一些问题，也是许多其他用户的痛点，因此通过解决无障碍功能问题，您可以改善所有人的体验。
网络内容无障碍指南
在本指南中，我们将参阅网络内容无障碍指南 (WCAG) 2.0，这是由无障碍功能专家整理的一系列指南和最佳做法，旨在有条不紊地阐述“无障碍”的含义。
WCAG 围绕四大原则进行组织，通常用首字母缩写词 POUR 来称呼这些原则：
可感知：用户能否感知到内容？这有助于我们牢记，某个内容能通过一种感官（例如视觉）感知，并不意味着所有用户都能感知该内容。
可操作：用户能否使用界面组件并浏览内容？例如，无法使用鼠标或触摸屏的人无法操作需要悬停互动的内容。
易于理解：用户能否理解内容？用户能否理解界面，其一致性是否足以避免混淆？
可靠：内容能否被多种用户代理（浏览器）使用？是否支持辅助技术？
虽然 WCAG 全面概述了无障碍内容的含义，但也可能会让您感到有点不知所措。为帮助缓解此问题，WebAIM（Web 无障碍功能设计）小组将 WCAG 准则提炼成了一个简单易行的核对清单，并且专门针对 Web 内容编写了核对清单。
WebAIM 核对清单可为您提供需要实现的内容的简明摘要；如果您需要扩展定义，还可链接到底层 WCAG 规范。
有了此工具，您就可以制定无障碍功能工作的方向，并确信只要项目符合所述的标准，用户就应该在访问您的内容时获得良好的体验。
了解用户的多样性
在了解无障碍功能时，了解世界上用户的多样性以及影响他们的无障碍功能主题的种类会很有帮助。为了进一步说明，下面是 Google 技术项目经理 Victor Tsaran 参加的一场内容丰富的问答活动，他是一位完全盲人。
您在 Google 从事什么工作？
在 Google，我的职责是帮助确保我们的产品适用于各类不同用户，无论他们是否有身体缺陷或残疾。
用户存在哪些类型的障碍？
当我们想到哪些类型的障碍会让别人难以访问我们的内容时，许多人会立即想像我这样的盲人用户。诚然，这种身体缺陷的确会造成用户难以甚至无法使用大量网站。
许多现代 Web 技术都存在一个令人遗憾的副作用：那就是创建的网站对盲人用户访问 Web 时所用的工具无法正常运行。不过，实际上，无障碍功能远不止于此。我们发现，将身体障碍分为四大类十分有用：视觉、运动、听觉和认知。
下面我们将逐一进行介绍。您能否举一些视觉障碍的示例？
视觉障碍可以分为几个类别：像我这样没有视力的用户可能会使用屏幕阅读器、盲文或结合使用这两者。
实际上，完全没有任何视力实际上是很不寻常的，但您很有可能认识或遇到至少一个完全看不到视力的人。但是，还存在着大量所谓的弱视用户。
这个范围涵盖广泛，从像我妻子这样没有角膜的人，虽然她基本上可以看清自己难以阅读印刷品并被视为依法盲人的人，到可能只是视力不佳且需要佩戴高度处方眼镜的人。
阅读的种类繁多，因此该类别的用户自然就会有众多选择：有些人会使用屏幕阅读器或盲文显示屏（我甚至听说有一位女性会在屏幕上看盲文，因为这类盲文比印刷文字更容易看清）；他们可能会使用更大的字体，因为没有屏幕阅读器功能，他们可能会使用放大的字体，或仅利用放大的屏幕进行缩放。他们还可以使用高对比度选项，例如操作系统高对比度模式、高对比度浏览器扩展程序或网站的高对比度主题。
许多用户甚至组合使用这些功能，例如我的朋友 Laura，她结合使用了高对比度模式、浏览器缩放和文字转语音功能。
弱视会引起很多人的共鸣。首先，随着年龄的增长，我们都会经历视力衰退的情况，因此即使您未曾经历过，也很有可能听到过父母的抱怨。但很多人都有这样沮丧的经历，那就是把笔记本电脑拿出阳光明媚的窗户边，却突然发现自己什么也看不懂！或者接受过激光手术或可能只需要看清房间对面内容的人 可能使用过我提到的某种调节方式。因此我认为开发者很容易对弱视用户产生同理心
哦，我还要记得提及色觉不佳的人，大约有 9% 的男性存在某种形式的颜色视觉缺陷！此外，约 1% 的女性也遇到了这种问题。它们可能难以区分红色和绿色，或黄色和蓝色。 下次设计表单验证时，请考虑这一点。
那么运动障碍呢？
是的，运动障碍或精细动作失能。这一群体包括两类人群，包括因可能因受过 RI 或其他原因而感到疼痛而不愿意使用鼠标的人群，以及可能身体瘫痪且身体某些部位活动范围受限的人群。
运动障碍用户可以使用键盘、开关设备、语音控制甚至眼球跟踪设备与计算机互动。
与视力障碍类似，行动不便也可能是暂时性或情境性问题：比如鼠标手的手腕骨折。也许是笔记本电脑的触控板损坏，或者您搭乘的火车运行抖动。在很多情况下，用户的行动不便，因此通过确保我们迎合他们的需求，我们可以提升整体体验：无论是对于存在永久性障碍的用户，还是对于暂时发现自己无法使用基于指针的界面的用户。
好的，我们来谈谈听力障碍。
从重度失聪到有听障，重度助长者不等。我们的听力往往会随着年龄增长而衰退，这与视力非常相似。我们有许多人会使用助听器之类的常见辅助装置来协助我们。
对于有听力障碍的用户，我们需要确保不依赖于声音，因此请务必使用视频字幕和转录文本等内容，并在声音是界面的一部分时提供某种替代文本。
就像我们在视觉和运动障碍中见到的那样，可以轻松地想象这样一种情况：耳朵可以正常工作的人也会从这些适应功能中受益。我的许多朋友都表示，如果视频带有字幕和解说词，他们就很喜欢它，因为这意味着即使他们身处一个开放式办公室，没有携带头戴式耳机，也能观看视频！
好，您能不能向我们简单介绍一下认知障碍？
认知疾病有很多种，例如注意力障碍、阅读障碍和自闭症，这可能意味着人们希望或需要以不同的方式获取信息。面向这些群体的调节自然极其多样，但我们发现有些功能与其他方面存在重叠，例如使用缩放功能来简化阅读或集中注意力。此外，这些用户可能会发现，真正的极简设计效果最好，因为它可以最大限度地减少注意力分散和认知负担。
我认为每个人都能感受到认知过载的压力，因此很明显，如果我们打造了对认知障碍人士满意的功能，那么我们创造的东西一定会让每个人获得愉快的体验。
那么，您会如何简要说明您对无障碍功能的看法？
在观察人们可能存在的多样化的残疾和残疾情况时，您会发现，只为具有完美视力、听力、灵活性和认知能力的人设计和构建产品似乎非常狭长。这几乎就像是在自残，因为我们正在为所有人打造更压力、更不实用的体验，而对一些用户来说，打造的体验实际上是将他们完全排除在外。
在这次访谈中，Victor 提到了一系列障碍，并将其分为四大类：视觉、运动、听觉和认知。他还指出，每种类型的缺陷都可能是情境性、暂时或永久性的。
让我们来看一些访问障碍的真实示例，并了解它们属于这些类别和类型。请注意，某些缺陷可能属于多个类别或类型。
| 情境性 | 临时重定向 | 永久重定向 | |
|---|---|---|---|
| 视觉内容 | 脑震荡 | 失明 | |
| 汽车 | 抱着婴儿 | 手臂骨折、RSI* | RSI* |
| 听力 | 嘈杂的办公室 | ||
| 认知 | 脑震荡 |
重复性劳损：例如腕管综合症、网球肘、扳机指
后续步骤
我们已经掌握了很多内容！您已阅读了
- 什么是无障碍，为什么无障碍对每个人都很重要
- WCAG 和 WebAIM 无障碍功能核对清单
- 您应考虑的不同类型的障碍
在本指南的其余部分，我们将深入介绍创建无障碍网站的实用方面。我们将围绕以下三大主题来组织本次讲座：
专注模式：我们将了解如何构建可以使用键盘（而非鼠标）操作的内容。这当然对有运动障碍的用户来说很重要，但也可以确保您的界面向所有用户呈现良好的界面。
语义：我们将确保以适合各种辅助技术的可靠方式表达我们的界面。
样式设置：我们将以视觉设计为例，了解一些技巧，让界面的视觉元素尽可能灵活实用。
由于上述每一项主题都可以构成完整的课程，因此我们不会对创建无障碍网站的方方面面进行全面介绍。不过，我们会为您提供足够的信息，帮助您入门，并为您推荐一些很好的地方，以便您详细了解每个主题。