原文：Pro HTML5 Accessibility
协议：CC BY-NC-SA 4.0
零、简介
这本书旨在帮助网页设计者和开发者用 HTML5 构建令人兴奋的、可访问的和可用的网站/应用。这本书着眼于使用 HTML5 来满足尽可能广泛的受众的需求，包括使用辅助技术(at)的残疾人和老年人。它旨在通过给你实用的建议成为一个有用的指南。这本书探讨了 HTML5 的新语义，以及如何将它们与您可能从使用早期版本的 HTML 中了解到的创作实践相结合。它还旨在演示辅助技术(如屏幕阅读器)当前如何支持(或不支持)HTML5 内容，以及当您努力使您的 HTML5 项目可访问时，这对您实际上意味着什么。
HTML5 规范非常庞大，从可访问性的角度来看，新的 API 和模式很难理解。无障碍本身看起来也很复杂和微妙，特别是如果你没有处理残疾人需求的经验。本书旨在帮助您了解残疾人的需求以及新的规范。
可访问性不是一个神秘或深奥的主题，但它是微妙的。HTML5 是游戏规则的改变者。最终，创建可访问的内容实际上是一个质量设计问题。(好的设计使；糟糕的设计会导致。)而正确的设计往往是选择正确方法的问题。这本书希望成为你理解 HTML5 和良好的可访问性设计的伴侣。
这本书是给谁的
Pro HTML5 可访问性面向已经在构建网站和应用，但在理解可访问性和过渡到 HTML5 方面可能需要一些帮助的中级到更高级的 web 设计人员和开发人员。
先决条件
这本书可以作为 HTML5 和可访问性的基本介绍来阅读，但它可能更适合已经掌握 HTML4 知识以及 CSS、WAI-ARIA 和 JavaScript 经验的专业或有经验的设计师。虽然不需要 CSS、WAI-ARIA 或脚本的详细知识，但它将帮助读者理解书中讨论的一些设计模式和示例。
下载代码
本书中所示示例的代码可在 Apress 网站[www.apress.com](http://www.apress.com)上获得。在该书的信息页面上的源代码/下载选项卡下可以找到一个链接。该选项卡位于页面相关标题部分的下方。
联系作者
作者普遍厌恶社交媒体，但偶尔会使用 Twitter。你可以在推特上关注他，账号是@joshueoconnor。
一、HTML5 辅助功能介绍
在这一章中，我将介绍可访问性，定义它是什么，并讨论为什么您应该注意减少在您构建的系统中可能存在的对许多人的访问障碍。我们还将关注 HTML5，并研究它与 HTML 4 的主要差异——您将看到这对可访问性意味着什么，以及这些差异将如何影响您构建网站和应用的方式。
HTML5 简介:新浪潮
HTML5 来了。它是网络的新通用语。那是什么？HTML5 是 HTML 4、XHTML1 和 DOM Level 2 HTML 的新版本。它将 HTML 从一种相对简单的文档标记语言转变为一个复杂的 web 应用平台，提供了大量新的、丰富的应用编程接口(API)。
正如生活中所有的重大变化一样，这种转变可能不会一帆风顺。这样一个添加了大量新元素和属性的重大转变，对作为作者的你以及潜在的消费者都提出了特殊的挑战。
HTML 4 很容易理解，并提供了可以以富有想象力的方式使用的特性。通过将这些功能与级联样式表(CSS)和 JavaScript 等其他语言结合使用，开发人员可以做越来越复杂的事情，推动用户交互模型的发展。
随着 Web 2.0 类型的内容(如 AJAX、动态内容更新和更多客户端处理)的出现，我们看到各种优秀的、复杂的应用正在从通常语义受限的标记语言中开发出来。
这种新一波光滑的小部件——有时是奇怪的交互模型——经常给用户带来许多挑战。如果用户有残疾，挑战会更大，因为用户可能无法从键盘访问重要的小部件功能，或者内容更新可能会在屏幕阅读器用户上丢失。早在 HTML5 之前，许多 web 设计者就开始真正关心可访问性，并寻找方法来确保他们的网站和应用可以被最广泛的受众使用。于是像网络标准项目这样的草根运动诞生了。一个活跃而充满活力的社区出现了，他们将改善用户体验和设计质量的挑战视为战斗的号角。
如果你正在读这篇文章，很可能你是一个网页设计师或开发者，你想知道更多关于 HTML5 的知识，以及它与可访问性的关系。所以你来对地方了。这本书假设你对 HTML 4 有一定的了解，并且有一些 CSS 经验，可能还有一些 JavaScript 经验。它还假设您热衷于学习使用 HTML5 开发健壮的网站和应用。
如果你不是 CSS 或 JavaScript 专家，甚至不太了解 HTML，不要担心！这本书旨在提供足够的在线材料和资源参考，让你很快跟上进度。HTML5 规范是出了名的大(大约 800 页)，所以这本书试图做的是提取与开发可访问的网站最相关的部分。这本书(连同其他一些更通用的 HTML5 资源)应该可以帮助你理解 HTML5 这个游戏规则改变者，以及可访问性。
在本书中，我将尝试与你分享我对这两者的了解——作为一名网页设计师和开发者，以及作为一名与残疾人一起工作了近 10 年的人。我也是 HTML5 工作组的成员，我的意见特别强调可访问性，并试图确保(与许多其他人一起)HTML5 规范能够最好地满足最广泛用户的需求，包括残疾人。
HTML5 与 HTML 4
那么 HTML5 有什么新的地方，和 HTML 4 有什么不同？首先，HTML5 的设计不仅仅是标记文本或超文本标记语言。(如果你认为是这样，我原谅你。)其次，许多新的 API 现在包含在新的规范中，乍一看，它们似乎根本不属于文档标记语言。
这些 API 多种多样，包括 Web 工作器(一种独立于任何用户界面脚本在后台运行脚本的 API)、Web Storage(类似于 HTTP 会话 cookies，用于在客户端存储结构化数据)和 Web Sockets(用于与服务器端进程的双向通信)。当你考虑到通过<video>和<audio>元素对视频和音频的原生“在浏览器中”支持时——这标志着从 Flash 等浏览器插件解决方案以及新的 2D 绘图 API <canvas>的重大转变——很明显，HTML5 远远不仅仅是一种文档标记语言，而是超越其他早期版本的 HTML 的一次巨大飞跃。
注新增的功能是一件喜忧参半的事情。有了这些新的语言特性，对于作者和用户来说，将会有更多的功能，但也更复杂。然而，在用户界面设计以及如何对项目进行编码方面采用最佳实践将对你大有裨益。所以，虽然感觉有点像你不得不重新开始，但我希望你会明白，事情并不完全是那样的。你会有更多的选择，当然，也会学到一些东西。我也希望你可能知道的关于使用 HTML 4 和 CSS/JavaScript 的组合来使东西变得可访问的好东西仍然经常适用。不要担心保持事情简单——只要为正确的工作使用正确的工具就可以让你走得很远。
HTML5 语法
在语法方面，HTML5 是一种戴着两顶帽子的语言。它可以写成 HTML 和 XML(也称为 XHTML，是 HTML 的 XML 序列化，或者换句话说，是 HTML 的类似 XML 的版本，将 XML 语法的一些规则引入 HTML)。
根据您自己的需求，您可能需要为您的用户提供更严格的格式良好的 XML 类型文档。这样做需要使用 XML 解析器，它用于处理 XML 文档。或者，由语法上更宽松的 HTML 组成的内容可能满足您的需要，在这种情况下，您可以使用 HTML 解析器。“更宽松的 HTML”指的是可能有点马虎但仍然有效的代码。
html 5<！DOCTYPE >
在 HTML 和 XHTML1 的早期版本中，文档是 HTML 还是 XHTML 主要是由 DOCTYPE 定义的(DOCTYPE 是网页标题中的一种可怕的代码，没有人真正知道它是做什么的，它看起来神秘而无意义，尽管它不是这两种东西)。DOCTYPE 实际上是让机器来处理的，作为一种识别文档内容应该符合的词汇表的方式。
在以前的版本中，您有以下文档类型:
对于 HTML 4.01 严格:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
对于 HTML 4.01 过渡版:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
或为 XHTML 1.0 严格版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
或 XHTML 1.0 过渡版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
在 HTML5 中，就简单多了。下面是新的 HTML5 文档类型:
<!DOCTYPE html>
这很简洁，当然也很容易记住。还有其他的优势。例如，您不再需要像在以前的 HTML 版本中那样引用 DTD(文档类型定义),所以它非常优雅，并将在所有较新的浏览器中触发标准模式。
一些文档类型历史
触发怪癖模式是开发人员用来确保向后兼容旧浏览器的一种技术。之所以需要这样做，是因为不同浏览器在呈现代码时的实际特性，以及像 W3C DOM 这样的技术规范的不良或不完整的实现。
由于不同的浏览器制造商选择以不同的方式实现规范，开发人员被迫利用页面中由 DTD 触发的各种呈现模式，以查看文档将如何被解析，在标准模式、几乎标准模式和古怪模式下测试他们的内容。
我希望现在有了 HTML5，我们越来越接近“作者一次，然后发布到许多设备/平台”的模式。如果你不记得所有这些，那你应该觉得自己很幸运——这一点都不好玩，而且让 web 开发变得很痛苦。如果你记得所有这些，喝一杯烈酒。如果你想深入了解，请访问[en.wikipedia.org/wiki/Quirks_mode](http://en.wikipedia.org/wiki/Quirks_mode)。
注意在 XHTML 中，实际上并不需要 DOCTYPE，但是当你有一个所谓的多语言文档(这是一个既可以作为 XHTML 又可以作为 HTML 的混合文档)或者你需要在文档中声明实体引用(符号、数学符号、语言字符等等)时，你可能需要使用一个 DOCTYPE。
想想也有道理。如果你和我在一个聚会上，我说，“蔬菜萨摩萨在桌子上，在一个身材很棒的女人旁边，”你会明白我的意思。对于一个浏览器来说，使用单词表和图意味着完全不同的事情；因此，为了让软件知道如何处理其内容，向浏览器解释必须解析的文档中使用了什么语言是至关重要的。
如果一群浏览者在聚会上，那句话的含义将与我们日常生活中的含义完全不同(不是说浏览者吃蔬菜凉拌菜)。
对于文档类型、解析规则和 MIME 类型的整个历史的有趣概述(稍后将详细介绍)，我推荐阅读伊恩·希克森的文章“将 html 作为有害的文本/html 发送”，该文章解释了一些历史，这些东西是如何产生的，以及一些最佳实践。你可以在[hixie.ch/advocacy/xhtml](http://hixie.ch/advocacy/xhtml).找到它
HTML5 和 XHTML 作为文本/html(它是一个 MIME 字段)
现在，在 HTML5 中，如何解析内容更多地取决于媒体类型的选择，而不是文档类型。
这意味着 XML 类型的文档需要被赋予 XML 媒体类型，比如application/xhtml+xml或application/xml。相比之下，如果你使用 HTML 语法，你就把文档当作text/html。这通常在HTTP – Content type Header中完成，它采用以下形式:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
此标签出现在文档的页眉中。(如果有服务器端编码印章，可以用Content Negotiation。更多详情见[www.w3.org/2003/01/xhtml-mimetype/content-negotiation](http://www.w3.org/2003/01/xhtml-mimetype/content-negotiation)。)
清单 1-1 是一个符合 HTML 语法的示例文档。
清单 1-1。 HTML 语法
`
This doc is HTML.
`可用于 HTML5 的另一种语法是 XML。以下是一些需要注意的事项:
- 所有具有
text/html媒体类型的文档(如 HTML5 之前的旧语言或具有 XHTML1 DOCTYPE 的文档)都将使用当前 HTML 规范定义的算法进行解析。 - XHTML 不得再充当
text/html，必须使用application/xhtml+xml或application/xml。 - HTML 文档必须作为
text/html。 - 对于本书的大部分内容，我们将处理 HTML 和内容类型
text/html，它包含在前面显示的文档头中。 <meta charset="UTF-8">现在可以用来指定 UTF-8 编码。这取代了对更长的<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">的需要，尽管该语法仍然是允许的。
我应该使用什么语法？
你应该能够自己决定你希望用什么方式创作，因为根据你以前的创作实践，这一点你应该已经很清楚了。然而，你可能会问，“我使用什么语法？”如果你问这个问题，你可能会坚持使用text/html mime 类型作为 HTML 来提供你的内容，因为在你的项目中事先没有使用更严格的 XML 类型语法的要求。
XML 遵循简单的规则，如要求所有内容区分大小写，要求您关闭所有标签，并遵循其他类似的准则，而 HTML 内容则更宽松，它不区分大小写，未关闭的标签不会破坏您的页面，等等。
注意如果一个不正确或编写不当的 XML 文档被不符合格式良好规则的更严格的 XML 解析器解析，那么该文档可能不会显示——这是一个您可能不希望出现的严重错误。
如果对网络上的所有 HTML 文档(无论是 HTML 的早期版本还是最新版本)都应用相同的规则，网络就会崩溃，什么都不会起作用！因此，虽然 HTML5 需要有处理这两种内容的规则(它确实是这样做的)，但它也必须以一种仍然可用的方式来处理格式不良的 HTML(或后来被称为标签汤)。
新元素
现在我们将看看 HTML5 规范中引入的一些新元素，以及它们的用途。数量相当多，其中一个棘手的问题是确定在什么地方和什么时候使用它们。事实上，大多数新元素都“言出必行”，这让事情变得简单了一些。要用大部分元素，就不用想太深了。可能不太清楚其他一些是用来做什么的，或者你什么时候会使用它们。
注意现在不要担心将 HTML5 元素添加到你的项目中，即使你不完全确定对某个元素的支持或者它是否能百分之百地工作。当一个新元素被浏览器或辅助技术解析时，它只是不理解，它被作为纯文本处理——通常不会破坏任何东西。
一些 HTML5 元素实际上可能不会在浏览器中呈现或显示(主要是因为它们可能还不被它理解，尽管支持正在迅速改善)。还有一种可能是，虽然它们可以直观地显示，但它们的语义可能会被辅助技术误解或忽略。当这种情况发生时，你不需要担心它们会触发任何不寻常的行为。然而，如果在浏览器中触发了一些奇怪的行为或一些奇怪的渲染怪癖(任何参与 web 开发超过五年的人都应该熟悉 CSS 编码带来的这些怪癖)，您就发现了一个 bug！
处理 bug 的最好方法是向 W3C 和/或浏览器制造商报告。这些有价值的信息确实有助于使事情变得更好，并改进软件的未来版本。
更有可能的是，你会发现有人在某个地方发现了这个 bug，一群开发人员已经找到了一个修复方法或者说是黑掉了。黑客是一件好坏参半的事情。理想情况下，我们不需要做这些，但是这个世界不是一个简单的地方，不是吗？
虽然我们将在后面的章节中深入讨论以下内容，但这里还是概述了 HTML5 中为实现更好的结构而引入的一些新元素:
<section>代表通用文档或应用部分。它可以和h1、h2、h3、h4、h5、h6元素一起使用，表示文档的结构。<article>代表文档的独立内容，如博客条目或报纸文章。<aside>代表一段与页面其余部分仅略有关联的内容。<hgroup>代表一节的标题。<header>代表一组介绍性或导航性的辅助设备。- 代表一个部分的页脚，可以包含关于作者、版权信息和其他类似细节的信息。
<nav>表示文档中用于导航的部分。<figure>表示一个独立的流程内容，通常从文档的主流程中作为一个单元引用，如下图:`
Example <figcaption>可用作图像或其他图形内容的标题(可选)，如前面的代码示例所示。
此外，还有其他几个新元素:
<video>和<audio>用于多媒体内容。两者都提供了 API，因此应用作者可以编写他们自己的用户界面，但是也有一种方法可以触发用户代理提供的用户界面。source如果多个不同类型的流可用，则元素与这些元素一起使用。<track>为视频元素提供文本轨道。<embed>用于插件内容。<mark>表示一个文档中的一串文本，由于其在另一个上下文中的相关性而被标记或突出显示以供参考。<progress>代表一个任务的完成，比如下载或者执行一系列带宽昂贵的操作。这些信息对于宽带连接有限或使用拨号服务的人非常有用。<meter>代表一种度量，如磁盘使用量。<time>代表日期和/或时间。<ruby>、<、rt>、<、rp>允许标记 ruby(一种开源面向对象编程语言)注释。<bdi>表示一段文本，出于双向文本格式化的目的，该段文本将与其周围环境隔离。<wbr>代表换行符机会。可以在字符串中使用断词。<canvas>用于动态渲染动态位图图形，如图形或游戏。<command>代表用户可以调用的命令。<details>表示用户可以按需获取的附加信息或控件。summary元素提供了它的摘要、图例或标题。<keygen>与更安全的表单创建相关，表示用于生成密钥对的控件，其中私钥或代码存储在客户端(本地)，公钥发送到服务器(远程)。- 代表某种类型的输出，例如通过脚本完成的计算。
- HTML5 表单上的< 】 element provides a field for the user to input data. In HTML5, it has new types and attributes. You might have some predefined input that you require from the user that you can define as option values (such as a 】 type, as shown in the next example). We’ll look at this in more detail in 第八章。
<input list="guitars" /> <datalist id="guitars"> <option value="Fender <option value="Gibson"> <option value="Martin"> <option value="Gretsch"> </datalist> <input>元素有一个type属性，它现在有以下新值:telsearchurlemaildatetimedatemonthweektimedatetime-localnumberrangecolor
这些新的输入类型通过浏览器提供给用户界面。它们提供了更好、更复杂的表单验证方法，无需调用服务器就可以在客户端完成。在整本书中，我们还会看到许多新的属性。
同样在 HTML5 中，HTML 4 中的几个属性现在适用于所有元素。这些被称为全局属性，包括如下:accesskey、class、dir、id、lang、style、tabindex和title。
还有几个新的全局属性:
contenteditable属性表示该元素是一个可编辑区域。用户可以更改元素的内容并操作标记。- 属性可以用来指向作者提供的上下文菜单。
- 作者定义属性的
data-*集合允许作者定义他们想要的任何属性，只要他们以data-为前缀，以避免与 HTML 的未来版本冲突。对这些属性的唯一要求是它们不能用于用户代理扩展。 draggable和dropzone属性可以和新的拖放 API 一起使用。hidden属性表示一个元素还不相关，或者不再相关。role和aria-*集合属性可用于指示辅助技术。在第三章中会有更多关于 WAI-ARIA 的内容，“JavaScript 不是一个肮脏的词，ARIA 也不仅仅是美妙的音乐”，在那里我们会看到它是什么，如何将它添加到您的项目中，以及为什么它对可访问性很重要。spellcheck属性允许提示是否可以对内容进行拼写检查。1
HTML5:可访问性和功能检测
以上是对 HTML5 语言的一些新特性的介绍。正如我前面提到的，在后面的章节中，我们将会看到这些新特性是如何与可访问性相关联的，你可以用它们来做什么来构建可访问的界面，以及一些等待着你的挑战。
坏消息是，许多新的 HTML5 特性才开始被浏览器和辅助技术支持。从可访问性的角度来看，这意味着你可能必须有创造性，以确保你的内容实际工作，而不是采取“在规范中说这样做，所以这意味着它是受支持的”的方法。不幸的是，饼干不会这样碎掉。
此外，该规范并没有完全定义用户体验。(有理由认为这超出了规范的范围；然而，我倾向于另一种方式。)所以必须注意以一种实用的方式应用代码，以支持最大范围的用户。这就是你读这本书的原因，对吗？
好消息是，对 HTML5 的支持一直在改善，包括浏览器和辅助技术(at)，所以未来是光明的。您可能会发现，您想要使用的一些元素或属性在浏览器或辅助技术(有时两者都有)中得不到很好的支持，在我写这本书时，我非常清楚这一点。在可能的情况下，我将尝试说明如何以一种更老的标记也能支持的方式使用 HTML5，或者以其他可访问性语言如 WAI-ARIA(我将在后面详细介绍)支持的方式使用 HTML5。
1 多亏了安妮·范·凯斯特伦和西蒙·皮特尔斯，关于新元素的大部分章节都来自[www.w3.org/TR/html5-diff/](http://www.w3.org/TR/html5-diff/)。版权所有 2011 W3C(麻省理工学院，ERCIM，庆应大学)。保留所有权利。
注在撰写本文时，浏览器市场的许多大玩家都有很好的 HTML5 支持。通常是 AT 不知道。
这本书在总体基调上特别关注向后兼容性，并试图帮助你支持所谓的遗留用户代理，或更老的浏览器和 at。以一种既支持理解 web 内容的新用户代理，也支持不理解 web 内容的新用户代理的方式来处理 web 内容的标记和设计(通过给他们一些东西来让他们了解语义)，是渐进增强的基础，这是一种更开明的设计方法。
注意在整本书中，我经常建议你借用其他更注重可访问性的语言，比如 WAI-ARIA，因为这是一种非常有用的方式来弥补你的项目中语义可访问性的差距。无论如何，WAI-ARIA 现在也正式成为 HTML5 规范的一部分，它是用来描述小部件的角色、状态或其他属性的完美工具。它在浏览器和 AT 中的支持也有所改进。
还有一些有趣的技术可以用在 HTML5 中，比如特征检测。作为作者，这允许您查询您的 web 内容所服务的用户代理，以便查看给定的浏览器是否支持 HTML5 的特定功能，然后为该浏览器提供该内容——或者如果浏览器不提供支持，则不提供该内容。如果这对您来说有点可怕，有一些工具，比如 Modernizr，可以帮助您完成大部分工作。
注意 Modernizr 是一个开源的 JavaScript 库，它使用媒体查询和脚本特性检测。它可以成为构建 HTML5 页面的有用工具。您可以在[www.modernizr.com](http://www.modernizr.com)了解更多信息。
现在让我们来看一些关于可访问性的背景信息——什么是可访问性，为什么你需要让它成为你设计的一部分。
定义可访问性
可访问性有几种定义。国际标准组织(ISO)是这样定义可访问性的:
“产品、服务、环境或设施由具有最广泛能力的人使用的可用性。”
(ISO TC 16071，2003 年)
将这个定义应用到 Web 上可以确保你设计的界面可以被尽可能多的人使用，从而确保没有用户被遗漏。这听起来像一个崇高的理想，甚至可能看起来令人生畏(这是可以理解的)，但不要担心。当你把 HTML5、CSS 和 JavaScript 以正确的方式结合在一起时，你能做的事情真的很神奇。
W3C 在其“Web 可访问性介绍”中，将可访问性定义为:
“网络无障碍意味着残障人士可以使用网络。更具体地说，网页可访问性意味着残疾人可以感知、理解、浏览网页并与之互动，他们可以为网页做出贡献。网页可访问性也有利于其他人，包括因衰老而能力改变的老年人。”
(WAI 无障碍介绍，2010 年)
你会注意到，第一个定义根本没有提到盲人用户或其他有残疾的人，但它谈到了一般可用性(我将在后面更详细地讨论)。我更喜欢给出的第二个定义，因为我认为可访问性是“关于残疾人的”这有助于我在理论上清楚地了解我试图服务的群体，也消除了定义中的一些模糊之处。我发现，如果某件事被定义得太宽泛或模糊，就很难知道该做什么或从哪里开始。通过缩小定义范围，你就有了一个更明确的参照点。
从技术上来说，可访问性可以被定义为可用性的子集，并被认为是另一个学科的孩子。话又说回来，可用性可以理解为人机交互(HCI)的产物，以前被称为“人因工程学”，更俗称人机工程学。
可达性:从理论到实践
抛开各种定义的利弊不谈，在实践中，作为一名设计师，尝试理解受众的不同需求是非常重要的。这些需求有很大的不同，它们涵盖了不同技术知识、手的灵巧能力、视觉敏锐度、认知能力和速度的广泛人群。
那么一般的设计师如何有效地解释这一切呢？有没有方法可以实现这个目标(对设计师来说，不需要这个领域的学位！)这将帮助你在有时晦涩难懂的推荐中找到出路？这种追求可能会令人望而生畏，但答案是响亮的“是！”
这本书旨在帮助你批判性地评估你所做的设计决策，以及你从各种指导方针和最佳实践中得到的有时相互矛盾的建议，以便你能确定它适合你的需求。更重要的是，不要做出假设，因为“规范说x”,x必然是真的，或者 x 甚至可以工作。当涉及到可访问性时，这个警告更加切题。
各种浏览器和/或辅助技术(例如残障人士使用的屏幕阅读器)不支持或将不会支持许多 HTML5 元素和属性。尽管该规范可能清楚地概述了在现实世界中如何实现某个特定的特性，但如何实际实现该规范通常是由特定的用户代理(这是浏览器的一个总括术语，甚至是 AT 的一部分)的供应商(或制造商)来决定的。所以这确实在很大程度上影响了用户体验。如果你回想一下“浏览器战争”，当时没有呈现不同元素/属性的标准方法，CSS 必须根据它所服务的设备进行调整，你就会明白我的意思。
HTML5 也是如此，这本书旨在向您展示如何以一种向后兼容的方式让您的 web 内容经得起未来的考验(不管当前对不同 HTML5 元素的支持水平如何),这意味着您需要确保它能够在较旧的浏览器和。成功地做到这一点有时意味着不遵守规则。例如，谈到验证，当验证器解析您的内容时，您可能不得不忍受几个红色的大 X，并且您已经添加了一些特定的可访问性标记，如 WAI-ARIA(我将在后面详细介绍)，以构建可访问的 JavaScript 小部件。然而，验证器解析规则通常没有对这类文档做出适当的规定，所以会出现错误。但是我们不能总是事事如意——这就是生活。如果你更关心的是构建可访问的真正有用的东西，请继续阅读。但是要注意:您可能必须学会超越验证器来思考问题！
在本书的后面，当我们讨论以用户为中心的设计时，你会看到真正与用户联系的好处，以及如何使用替代的用户评估方法和技术，例如用户测试，它可以真正向你展示在你的设计中什么可行，什么不可行。
用户测试是帮助你与用户联系的一个很好的方式，可以让你实际感受到设计的对错。实现用户测试也是在你、设计者和最终用户之间架起一座桥梁的好方法。它也是从理论理解到实践理解设计决策如何影响用户的一种强有力的方式。
然而，用户测试可能很昂贵，或者根本不切实际。因此，我们还将看看您可以进行快速和肮脏的游击测试的方法，以及一些可能有助于您感受残疾人所遇到的用户体验的模拟技术。您可能还会从我稍后给出的关于使用屏幕阅读器测试自己的建议中受益。这个过程可能是喜忧参半，需要谨慎对待。这是因为您需要确信，在使用屏幕阅读器测试网站时遇到的任何问题实际上都是该网站的可访问性问题的结果，而不是您在掌握 at！
这是一个非常常见的问题，但我的目的是向您展示如何使用 JAWS 或 VoiceOver 等常见的屏幕阅读软件进行测试。我将讨论如何进行测试，解释当您使用屏幕阅读器时会发生什么，并描述一些要避免的常见错误。
了解可访问性
好的、易访问的网站确实是好设计的自然副产品。好的设计来自于对一些核心事物的理解:
- 你在设计什么，你的网站的目的是什么
- 你的观众的需求
- 访问者在使用你的网站时真正想做什么
如前所述，可访问性乍一看似乎很抽象或深奥。许多开发人员会发现很难将它作为一门实用的学科来完全掌握。许多人就是不容易接近。
可访问性的某些方面最初比其他方面更容易理解，但是随着他们对最佳实践知识的加深，开发人员可以很快理解可访问性是相当实用的。
可达性是一条不断发展的线，一个连续体。然而，对于 AT 的用户来说，每个用户群都有一些不会真正改变的核心问题——即使技术改变了。例如，盲人用户需要能够访问向他们描述特定图像的等效内容，身体活动受限的人非常希望没有大量无用的链接来浏览，等等。
立法
根据您所在的国家，在构建网站时，您可能需要考虑不同的法律要求。立法对您的影响程度取决于您网站的目的，您是否打算与联邦政府做生意，或者您是否正在为公共部门机构进行设计和开发。
理解法律以及它与你的项目的关系是非常重要的。以下是不同领域立法的简要概述，首先包括美国，然后是英国。非常感谢 WebAIM 的 Jared Smith，以下大部分内容都是从他那里获得的。
康复法
在美国，1973 年的《康复法》是为残疾人争取平等竞争环境的第一项重大立法努力。这项立法为身体和认知残疾者提供了广泛的服务。《康复法》自颁布以来已经修订了两次，一次是在 1993 年，另一次是在 1998 年。修订后的《康复法》中有两个条款对无障碍网页设计产生了影响:第 504 和 508 条。
第 504 条
《康复法》第 504 条是一部民权法。这是美国第一部旨在保护残疾人免受基于其残疾状况的歧视的民权立法。该法的非歧视要求适用于接受联邦财政援助的雇主和组织。
《美国法典》第 29 卷第七百九十四部分第 504 条规定如下:
“在美国没有其他合格的残疾人…不得仅仅因为她或他的残疾而被排除在接受联邦财政援助的任何方案或活动之外，被剥夺福利或受到歧视。”
因此，任何接受联邦资金的方案都不能基于残疾人的残疾状况歧视他们。所有政府机构、联邦资助的项目、K-12 学校和中学后实体(州立学院、大学和职业培训学校)都属于这一类。
第五百零八部分
1998 年重新授权的康复法案包括对第 508 条的修订，您可以在[webaim.org/articles/laws/usa/rehab](http://webaim.org/articles/laws/usa/rehab)访问。该条款禁止联邦政府采购残疾人无法完全无障碍使用的电子和信息技术(E & IT)商品和服务。这包括网页设计的服务，因为特别提到了互联网。
第 508 条的影响
为什么 508 条款如此重要？虽然它仅限于联邦机构，但 508 条款是一项极具影响力的立法。这至少有四个原因。
第 508 条为互联网提供了第一个美国联邦可访问性标准。在此之前，网站内容可访问性指南已经存在；然而，这些由 Web Accessibility Initiative (WAI)创建的指南并不打算作为标准来编写。此外，这些指导方针来自一个没有监管权力的志愿国际组织。
本节提供可远程监控的合规性语言。如前所述，指导方针确实存在，但不是法定语言。第 508 条概述了必须遵守的有约束力、可执行的标准，以便残疾人可以使用电子和信息技术产品。WebAIM Section 508 清单中提供了适用于 web 可访问性的 Section 508 标准列表。
州政府可能要对遵守第 508 条负责。所有的州都根据 1998 年的辅助技术法案接受资助。为了获得这笔资金，每个州必须向联邦政府保证，它将在其州实体(包括高等教育机构)内实现第 508 条的所有条件。许多州(例如，亚利桑那州、内布拉斯加州和威斯康星州)已将第 508 条编纂为州法律，要求州机构遵守这些要求。
企业在向联邦政府提供 E&IT 产品和服务时，必须遵守第 508 条。当像美国联邦政府这样的客户或潜在客户的需求必须得到满足时，web 可访问性对商业和工业的影响就更加显著。
第五百零八部分强制执行
美国司法部民权办公室负责执行 508 条款。出现投诉时，公众、学生和残疾员工可以采取以下措施:
- 向他们认为违反 508 条款的机构提出行政投诉。
- 向联邦地区法院提起私人诉讼。
- 通过美国司法部民权办公室提出正式投诉。
总检察长办公室被要求评估政府遵守第 508 条的情况。它还需要向总统和国会提供关于残疾人使用联邦电子和信息技术的最新报告，以及针对联邦机构的 508 条款投诉的解决方案。第一份此类报告于 2001 年 8 月提交，此后每两年提交一次。
自愿产品可访问性模板
自愿产品可访问性模板(VPAT)提供了您如何遵守第五百零八部分的详细信息。这是一种(预先)说明你的产品或服务的可及性的方式。这有助于采购过程，因为联邦机构可以了解您的网站或产品与其他网站或产品相比表现如何。
注有关 VPATs 及其使用方法的更多信息，参见[www.evengrounds.com/articles/creating-an-effective-vpat](http://www.evengrounds.com/articles/creating-an-effective-vpat)。
其他相关立法
虽然遵守 Section 508 是大多数联邦 web 项目的主要关注点，但还需要考虑与此相关的其他法案(虽然没有明确提到互联网)。
美国残疾人法案
美国于 1990 年通过的《美国残疾人法案》是由司法部管辖的民权立法。这项法律的目标是确保残疾人能够有平等的机会参与计划、服务和活动。请注意，ADA 并不直接处理互联网的可访问性。这可能是因为在《反倾销协定》通过的同时，互联网刚刚成为一种广泛使用的工具。然而，ADA 中有两个主要部分可能适用于网页可访问性:
- 第二编规定，与残疾人的交流必须“与他人的交流一样有效”[28 C.F.R. ss 35.160 (a)]
- 第三编涉及残疾人的公共住宿
残疾人教育法
美国 1997 年修订的《残疾人教育法》(IDEA)为所有残疾儿童提供了从学前到高中的“免费的适当公共教育”。
这个想法在以下几个方面与网络有关:
- K-12 学校系统每年都在更大程度上使用互联网。事实上，它有两种不同的用途:
- 教师用它为学生提供历史、科学、英语或数学等领域的普通教育课程。学生可以探索材料和信息，进行研究，从事活动，甚至在线考试。
- 美国大多数州的教育目标是让学生学会使用互联网。因此，这本身就成为一门课程。
- 另一项相关的立法是 1996 年《电信法》第 255 条，该条“要求电信设备和用户驻地设备的制造商确保设备的设计、开发和制造便于残疾人使用。”
【1995 年《残疾歧视法》
在联合王国，出台了《残疾歧视法》,以消除对残疾人的歧视，并在就业、获得商品和服务以及购买或租赁土地或财产方面赋予他们新的权利。
该法(第三部分)中有一些条款可以说适用于网站，并自 1999 年 10 月 1 日起生效。
然而，最初的《1995 年残疾歧视法》是有限的，遗漏了一些重要领域，如教育。这意味着大学不必确保他们的教育服务是可获得的。2001 年《特殊教育需求和残疾法》的通过解决了这一问题。
【2001 年《特殊教育需求和残疾法》
《2001 年特殊教育需求和残疾法》作为《1995 年残疾歧视法》的修正案出台。
SENDA 在英格兰、威尔士和苏格兰引入了针对残疾人的教育条款。它旨在为英格兰、苏格兰和威尔士的在校残疾人争取“全面的可强制执行的公民权利”。它对继续教育机构、课程的讲授方式以及对学生的支持方式都有重大影响。
PAS78、《残疾歧视法》和 2010 年《平等法》
PAS78 是一份对英国无障碍网站采购人员非常有用的文件。本出版物为组织提供了关于如何委托设计机构设计可访问网站的指导。它描述了对网站的期望，以符合英国《1995 年残疾人歧视法》( DDA ),使残疾人可以访问和使用网站。2010 年,《残疾歧视法》被《平等法》取代。您可以在以下网站找到更多详细信息:
- PAS78
: [www.equalityhumanrights.com/footer/accessibility-statement/general-web-accessibility-guidance](http://www.equalityhumanrights.com/footer/accessibility-statement/general-web-accessibility-guidance) - 2010 年《平等法》:
[www.legislation.gov.uk/ukpga/2010/15/contents](http://www.legislation.gov.uk/ukpga/2010/15/contents)
欧洲立法
每个欧洲联盟(欧盟)成员国都有许多单独的立法，但 EU-也有一些与网络和电子包容相关的总体立法。
注电子包容一词的意思是，在享受信息和通信技术(ICT)的好处时，任何人都不应被抛在后面。根据欧洲委员会，电子包容意味着"包容性的信通技术和利用信通技术实现更广泛的包容目标"。 2 它侧重于所有个人和社区参与信息社会的各个方面。因此，电子包容政策旨在缩小信通技术使用方面的差距，促进信通技术的使用，以克服排斥，改善经济表现、就业机会、生活质量、社会参与和凝聚力。"
欧盟基本权利宪章
《欧盟基本权利宪章》提到了残疾人:
- 除其他外，第 21 条禁止基于残疾的歧视。
- 第二十六条明确承认残疾人的权利以及确保他们独立、融入社会和职业以及参与社区生活的必要性。
i2010:欧洲信息社会
i2010 是欧盟关于信息社会和媒体的政策框架(2005-2009 年)。它促进了信息和通信技术(ICT)对经济、社会和个人生活质量的积极贡献。该战略现在即将结束，接下来是一项新的计划——欧洲数字议程。更多信息，参见[ec.europa.eu/information_society/digital-agenda/local/index_en.htm](http://ec.europa.eu/information_society/digital-agenda/local/index_en.htm)。
2005 年欧洲国家杯
在此之前，2002 年 6 月在塞维利亚欧洲理事会上发起了电子欧洲 2005 年行动计划，并在 2003 年 1 月的电子欧洲决议中得到部长理事会的批准。它旨在通过以有竞争力的价格广泛提供宽带接入和安全的信息基础设施，为电子商务发展现代公共服务和充满活力的环境。此前是 2002 年电子欧洲。
2
注好了，害怕了？别担心。这些都包括在这里，只是为了描绘一幅关于可访问性是如何被认真对待的图画。是的，不同国家的程度不同，但有一个必要。所以你应该有动力去做正确的事情。
好消息是，即使你没有完全实现一个“无所不能、无所不能、无障碍上网”的网站，真诚地努力完成你的项目(以我的经验来看)对使用它的残疾人来说意义重大。
这是当人们感到他们被积极地歧视，一个组织只是不在乎会有麻烦。实际上，网站上的“可访问性”声明实际上是一种“不可访问性”声明——如果你定义了你已经做了或没有做的范围，以及正在进行的工作，这是有意义的。如果你在这种事情上开诚布公，它肯定会有助于公开性、透明度和普遍的善意——这总是一件好事。
应对变化和多样性
在许多方面，易访问性原则包含了我们作为设计师的能力，以积极的方式处理变化和开发能够适应多样性的设计。随着年龄的增长，我们中的许多人都会经历一些自然的变化，例如失明和其他身体和精神上的变化。因此，我们执行某些任务的能力和我们需要的设备也可能发生变化。真正理解可访问性包括扩展我们处理这些变化的能力。
设计师努力的成功往往取决于他们能多好地适应不同的用户需求。使用新的工具、语言和开发方法实际上只是对我们能力的测试，HTML5 的出现也不例外。如果作为一名开发人员，你以前有一些构建可访问界面的经验，你所获得的来之不易的知识将会使你受益。使用 HTML5 进行开发时，您不必重新发明轮子或从某种“零年”开始。你可能不得不重新思考你对某些内容的处理方式，因为已经有了一些改变游戏规则的东西，但主要的是，你将能够很好地建立在你之前所学的基础上。
现实情况是，尽管所使用的语言和开发方法经常会快速变化，但残疾人的需求却是相当稳定的。这本书集中在为残疾人设计的一些核心方面，希望能简化和增强你对这个过程的理解。
可访问性有什么好处？
无障碍网页设计和开发有一些实质性的好处:
- 这具有很好的商业意义:通过确保没有人被排除在网站之外，构建易访问的网站实际上可以增加企业的收入。有一些详细记录的案例研究概述了可访问性的商业好处，例如以下公司所经历的:
- Legal & General Group: 访客数量增加了一倍，维护成本减少了三分之二，自然搜索流量增加了 50%。
- 乐购:花费了 35，000 英镑来建立它的网站，每年有 1，300 万英镑的收入。
- CNET: 在谷歌开始提供文字记录后，它的流量增加了 30%。“当我们推出网站的 HTML 版本时，我们看到搜索引擎优化推荐的显著增加，其中的主要组成部分是我们的抄本，”CNET 的贾斯汀·埃克豪斯说。(W3C 商业案例示例，2009 年)
这些好处可以大致分为以下几类:
- **社会因素:**增强的网页可访问性消除了交流和互动的障碍，为残疾人提供了平等的机会。
- **技术因素:**网站可访问性的提高提高了互操作性和质量，减少了网站开发和维护时间以及服务器负载。它还有助于确保内容能够在不同的配置上运行，并确保开发人员为先进的 web 技术做好准备。
- **财务因素:**更好的可访问性提高了搜索引擎优化(SEO ),并由于更容易的维护等而提高了直接成本节约。
- **法律和政策因素:**网页可访问性的提高以法律、政策、法规和标准的形式满足了政府和其他组织对网页可访问性的要求。
- **更好的设计:**平面设计师往往是为自己设计的。情况并不总是这样，但往往是真的。因此，网络上充斥着使用无法调整大小的微小文本、难以辨认的字体和糟糕的颜色对比度的网站。这通常会导致网站内容对许多人来说不可读。(WAI 无障碍商业案例，2010 年)
注意一个好的设计原则是“形式应该服从功能”这是一个简单但有效的经验法则，不幸的是，它经常被忽视或遗忘。随着你阅读这本书的进展，我希望你会开始明白，开发易访问的界面所需要做的事情实际上可以归结为良好的设计和编码实践。可访问性是非常实用的，归结为格式良好的代码、良好的用户界面设计、可靠的信息架构、人性化和可访问的表单验证以及错误恢复。好消息是，所有这些好东西不仅对残疾人有益，而且对所有人都有益。
易访问性应该增强你的设计——而不是破坏它
在实践中，可访问性使一些重要的基本设计问题重新成为设计师关注的焦点。这是一件好事。我们经常在网络上看到闪亮的新事物，然后像我这样的人走过来，更仔细地看，发现从可访问性的角度来看这是行不通的。那么我们必须是那些说“等一下”的人因此，人们的感觉是，无障碍社区是反进步或反设计的。
不是这样的，不，我们不想毁了这个派对。我们只是知道一点什么可行，什么不可行。网络上充满了无法访问的东西。事实上，网络天生就是坏的，很多东西不应该工作，但却工作了，这本身就很神奇。
让我们看看可访问性如何以积极的方式限制一个项目。请考虑以下几点:
- 具有可访问性意味着设计者必须仔细考虑他或她如何在视觉上呈现内容(在清晰的设计和颜色对比方面)，以及网站的底层语义结构如何适应残疾人，或者复杂的动态控件如何被残疾人使用。这些“约束”的效果是，设计者必须理想地只使用适合手头任务的任何开发技术、元素或属性——正确工作的正确工具。这种方法在开发 HTML5 web 内容时非常重要(稍后当我们查看像
<canvas>这样的新元素时将会演示这一点)。
所以易访问性不是反设计，而仅仅是一个挑战。实际上，它有助于将您的设计建立在全面的最佳实践基础上，因此带来了额外的好处，例如更经得起未来考验的、可互操作的应用和网站。
WCAG 2.0 和 HTML5
网站内容可访问性指南(WCAG 2.0)是经过精心设计的，在技术上是不可知的，我相信当您构建自己的网站和应用时，您会发现其中的常识。构建可访问的工作内容是一个非常微妙的领域。正如我前面提到的，您必须以一种实用的方式平衡代码和这些指南的实际应用。可及性不是理论上的、神秘的或虚无缥缈的。
残疾人的需求是非常真实的，这些指南只是指南，而不是标准。它们旨在提供信息和指导，最终的结果是你有更多可访问和可用的界面。
注意目前，WCAG 2.0 没有很多(或任何)HTML5 测试用例。然而，在我写这篇文章的时候，有人在努力为 accessible 和符合 WCAG 2.0 的 HTML5 开发指导和测试套件，随着时间的推移，将会有更多的可用。所以继续关注[www.w3.org/WAI/GL](http://www.w3.org/WAI/GL)。
WCAG 主要用于以下目的:
- Web 内容开发人员(页面作者、网站设计人员和其他类似的专业人员)
- Web 创作工具开发人员
- Web 可访问性评估工具开发人员
- 其他想要或需要网页可访问性技术标准的人
WCAG 和相关资源也旨在满足许多不同受众的需求，包括不熟悉 Web 可访问性的人、决策者、管理者和其他人。WCAG 1.0 有各种优先检查点；WCAG 2.0 有成功标准。WCAG 1.0 是围绕一套指导原则组织的，而 WCAG 2.0 是围绕四个简单的原则组织的，这四个原则形成了 POUR 的缩写。
- 原则 1:内容必须是可感知的§。这一原则适用于所有内容，包括多媒体、视频和音频:
- 为所有非文本内容提供文本替换。
- 为多媒体(如字幕视频、音频描述等)提供同步的替代方案
- 信息和结构必须与表示分开。
- 使前景信息与背景易于区分(例如，具有良好的颜色对比度)。
- 原则 2:界面元素必须是可操作的(O):
- 所有功能必须可以通过键盘操作。
- 用户必须能够控制他们的阅读或互动的限制。
- 用户必须能够避免因光敏性而导致癫痫发作的内容。
- 为用户提供查找内容、自我定位和导航的机制。
- 帮助用户避免错误，并在出现错误时更容易纠正。
- 原则 3:内容和控制必须易于理解(U):
- 使文本内容具有可读性和可理解性。
- 使内容的位置和功能可预测。
- 原则 4:内容应该足够强大，能够与当前和未来的技术协同工作®:
- 支持与当前和未来用户代理的兼容性。
- 确保内容是可访问的，或者提供可访问的替代方案(摘自 WAI 简介，2010 年)。
我希望你能看到大部分建议都很实用。事实上，通常是“只要满足特定的标准，你如何到达那里并不重要”，就像刚刚概述的那样。
html 5 可访问性的挑战
正如你所看到的，有很多变化正在发生！正如任何新的重大变革一样，它可能不会一帆风顺。应对这种变化可能会很困难，因为目标实际上是在移动的。这部分是因为 HTML5 本身仍处于草案阶段。然而，它已经达到了它的第一个信用证(或最后一个电话)征求意见。因此，它正接近稳定状态。
这给编写 HTML5 带来了一些挑战，因为它在浏览器和 AT 中的支持才刚刚开始。然而，当浏览器实现它们时，AT 技术也随之而来。发生这种情况是因为供应商可以看到某些功能正在被使用，因此他们会选择支持什么以及这将如何影响用户体验。最终，好消息是，随着 HTML5 的出现，工具包得到了极大的扩展，尽管当涉及到如何标记 web 项目时，您可能会经常面临选择过多的问题。
正如我前面提到的，HTML 4 带来的语义盛宴非常令人惊叹。
结论
在这一章中，我向你介绍了无障碍网页设计的奇妙世界，并让你感受到了一些即将面临的挑战。会有起伏，但它真的可以很有趣。你不会总是把事情做对，但是努力去做要走很长的路。在下一章，我们将更详细地研究残疾以及一些更常用的辅助技术。
二、了解残疾和辅助技术
在本章中，我们将了解一系列不同类型的残疾，以及残疾人使用的一些辅助技术(at)的示例。本章将帮助您更好地理解残疾意味着什么，以及残疾如何改变 at 用户使用网页内容的方式。
了解你的用户
对于试图构建易访问网站的开发人员来说，最困难的事情之一是成功地理解用户的需求。你应该从几个不同的角度考虑潜在的需求。首先，你必须考虑用户的功能需求，比如他们在使用网站时希望完成的任务。这对网站所需的功能有着明显的影响，也影响着您应该对信息架构采取的方法。
然后是你的观众将要使用的设备。暂且不谈，随着智能手机使用的增长，我们许多人现在都在移动中使用网络，因此移动空间非常重要。
注意在可访问性和移动网络之间有着非常紧密的映射。你为移动设备创建内容的许多开发实践对可访问性也非常有益！
都是我，我，我和一些人！
许多设计师有意无意地为自己或朋友建造东西。然而，在过去的几年中，设计社区对可访问性有了更大的认识，并且对构建可访问界面的挑战有了更多的关注，这激发了开发人员的想象力。
下面的文字将帮助你理解残疾意味着什么，以及它如何影响你对世界的认知和与世界的互动。这种理解可以用来更好地理解如何适应残疾人的各种互动需求。它并不详尽，也不打算详尽，但它应该是一个很好的介绍。
所以不用担心。让常识成为你的向导，学会接受反馈，即使它最初看起来是负面的。真的很值钱！当一个人在你的网站上执行一项任务时遇到了问题，这意味着有更多的人也遇到了问题，只是没有说出来而已。所以，感激有人脾气暴躁到可以抱怨！通过积极的反应，你将能够提高你的设计项目的质量，同时作为一名开发人员也有所提高。所以是双赢。这可能会有点伤你的自尊，但你会克服的。
我们将在第九章“HTML 5，可用性和以用户为中心的设计”中探讨一些以用户为中心的设计技术，但是现在让我们来看看一些不同的残疾类型。
失明概述
失明有多种程度。人们通常认为盲人什么也看不见，但事实往往并非如此。盲人也许能辨认出一些光、形状和其他形式。
我的一个朋友实际上视力很好，但他被登记为法定盲人，因为他有严重的阅读障碍，这使他功能性失明，因为他的状况造成了认知混乱。所以有很多有趣的边缘案例。
也有理由认为一个人必须被正式定义为有残疾。这些原因包括获得国家援助、福利和其他服务的资格。
例如，在美国，根据社会保障法，如果符合以下条件，则被视为盲人:
使用矫正镜片后，他的好眼的中心视觉敏锐度为 20/200 或更低1
在英国，Snellen 测试是一种测量视敏度的常用方法，通过使用不同大小字母的图表来评估一个人的视觉锐度。如果一个人正在接受视力障碍的评估，该测试将专门检查
- 低于 3/60 Snellen 的人(大多数低于 3/60 的人视力严重受损)
- 那些好于 3/60 但低于 6/60 的人
- 6/60 Snellen 或以上(该组中视野收缩的人，特别是如果收缩在视野的下部) 2
①[www.who.int/blindness/causes/en/](http://www.who.int/blindness/causes/en/)。
注残疾的定义因国家而异，国际社会正在努力根据国际功能分类(ICF)等倡议统一这些定义。这些是从身体、个人和社会角度对健康和健康相关领域的分类。分类是通过查看身体功能和结构列表，以及它们的活动和参与水平来确定的。因为一个人的功能和残疾是在一定的环境中发生的，所以 ICF 也包括了一系列的环境因素。因此，活动和参与这两个领域是用于记录积极或中性表现的任务、行动和生活情况的列表，以及一个人可能遇到的任何活动限制和参与限制。这些以各种方式分组，以概述个人在诸如学习和应用知识、沟通、行动、自理、社区、社会和公民生活等领域的能力水平。
世界范围内一些最常见的失明原因如下
- 白内障(47.9%)
- 青光眼(12.3%)
- 年龄相关性黄斑变性(8.7%)
- 角膜混浊(5.1%)
- 糖尿病视网膜病变(4.8%)
- 儿童期失明(3.9%)
- 沙眼(3.6%)
- 盘尾丝虫病(0.8%) 3
注意就计算机和网络而言，盲人用户是一个真正从技术发展中受益的群体。文本到语音转换软件的发展使得 AT 的盲人用户可以从事多种工作(并非所有工作),并积极参与各种在线社区。这些都有助于一个人的包容感。
2 定义还考虑了视角或视野。您可以在[www.ssa.gov/OP_Home/ssact/title16b/1614.htm](http://www.ssa.gov/OP_Home/ssact/title16b/1614.htm)了解更多信息。
3
盲目性和可达性
大多数时候，当人们想到网页可访问性时，他们会想到盲人！如果你认为是这样，那也情有可原——因为盲人用户通常是网上最直言不讳的群体。
然而，网页可访问性并不仅仅与盲人计算机用户有关。当你在网上看到很多关于这两个主题的讨论时，不要陷入只把网页可访问性与盲人和屏幕阅读器联系起来的陷阱。“如果它与屏幕阅读器一起工作，它就是可访问的”这个想法只是部分正确。但这有点像说，“函数 x 在 HTML5 规范中是这样定义的，因此你应该这样做，它就会工作。”在理想世界中，是的，它肯定可以工作，但是在现实世界中，你必须考虑浏览器，它对任何给定功能的支持，以及用户模式(或交互方法——他们是 AT 的视力正常的用户还是盲人用户，等等)。).
对于更多串行设备的用户来说，还有其他方面需要考虑，例如为行动不便的人提供的单按钮开关。屏幕阅读器用户可能在导航或与小部件或页面内容交互方面没有问题，而对于行动不便的人来说，这可能非常困难。行动不便的电脑用户经常会非常容易疲劳，甚至在浏览你当时认为应该包含的 20 个链接时感到筋疲力尽！
因此，当您考虑可访问性时，不要只考虑盲人用户(尽管他们当然非常重要)和屏幕阅读器。然而，因为使用中的屏幕阅读技术非常复杂，正如您将在后面看到的，正确地向这些设备提供内容以及使用它们都有一定程度的复杂性。
视力障碍
视力障碍的范围很广。这里列出了一些最常见的，包括一些试图模拟患有这种疾病的人的视力的照片示例。一个有视力障碍的人并不是真的看不太清楚。正如这些例子所希望说明的那样，取决于损伤本身，患有这种疾病的人可能会遇到更大的问题。
图 2-1 是我在创建任何模拟之前的桌面图片。
***图 2-1。*我的桌面，被视力相对较好的人看到
青光眼
导致青光眼的原因有很多，从简单的衰老到吸烟。青光眼患者可能会完全丧失周边视觉，如图 2-2 中的图所示。在早期阶段，青光眼会导致一些细微的颜色对比度损失，这会导致难以看清周围环境或使用计算机。
***图 2-2。*青光眼患者看到的我的桌面(残余视力样本)
如果周边视力丧失的人不在特定元素或小部件附近，他们可能很难看到动态内容更新。对于屏幕放大用户来说，这也是一个问题(稍后将详细介绍)。
黄斑变性
黄斑变性在老年人中很常见，会导致眼睛中心的视力丧失，如图图 2-3 所示。这使得阅读、写作、在电脑上做任何工作或近距离工作都非常困难。识别某些颜色也是一个问题。
***图 2-3。*黄斑变性患者看到的我的桌面(残余视力样本)
视网膜病变
这种情况导致部分视力模糊或片状视力丧失，如图图 2-4 所示。它可能是由晚期糖尿病引起的。这个人的近视可能会降低，近距离阅读可能会有困难。
***图 2-4。*视网膜病变患者看到的我的桌面(残余视力样本)
视网膜脱落
视网膜脱落会导致视网膜受损处的视力丧失。脱离的视网膜可能会导致一个人的部分视觉出现黑色阴影，或者这个人可能会经历明亮的闪光或大量的黑斑。参见图 2-5 。
***图 2-5。*视网膜脱落的人看到的我的桌面
注意有一些有用的在线工具可以充当视觉模拟器，比如灯塔国际开发的那种。该模拟器旨在帮助告知、教育和提高公众对视力受损的认识。使用模拟黄斑变性、糖尿病性视网膜病变、青光眼、偏盲和色素性视网膜炎的过滤器，通过您选择的 YouTube 视频，该模拟器显示了患有眼疾的人每天都会遇到的一些视觉问题。 4
为了获得更加身临其境的模拟体验，剑桥大学开发了一套非常有用的眼镜，旨在模拟看细节能力的总体丧失，但不打算代表任何特定的眼睛状况。这种类型的损失通常发生在衰老和大多数眼睛疾病，以及没有佩戴最合适的眼镜。剑桥仿真眼镜可以帮助
- 理解视力丧失如何影响现实世界的任务
- 同情那些视力不好的人
4
- 评估任务的视觉需求，基于损伤等级 5
身体残疾
有许多种身体残疾可以以不同的方式表现出来，从中度到更严重。身体残疾可能是出生时就存在的情况，也可能是在以后的生活中由于事故而导致的。
一些常见的活动问题包括缺乏对运动的身体控制或不必要的痉挛，如震颤。通常身体残疾的人很容易精疲力尽，并发现许多形式的运动非常累。
说到电脑的使用，身体残疾的人通常不会使用鼠标。当试图与计算机交互时，所使用的设备(开关、操纵杆和其他 at，我们将很快看到)会有很大的帮助。
一些身体残疾的人可能不会使用任何类型的 AT，但他们会发现很难甚至不可能使用不支持键盘访问的网站和应用。事实上，确保你的网站是键盘可访问的，可能是你能帮助身体残疾的用户的最重要的事情之一。根据经验，这样做是一个很好的想法，也有助于支持交换机和其他串行输入设备的用户。
认知和感觉障碍
有认知和感官障碍的计算机用户可能是最难适应的。这在很大程度上是因为这是一个如此新的研究领域，关于什么有效什么无效几乎没有确凿的证据。
与易访问性相关的 web 开发技术也没有被详细说明。然而，随着时间的推移，人们对认知和感官残疾有了更多的了解，将会有一套更容易使用的开发方法来满足这一用户群体的需求。
在接下来的章节中，我们将概述设计者在构建可供有认知和感官障碍的人使用的界面时所面临的一些挑战。
感知
这是一种视觉和听觉上的困难，某些形状、形式和声音可能很难识别。理解如何满足有感知困难的用户的需求可能很难，因为很难知道他们可能如何感知某些项目，例如不寻常的用户界面。
当在富媒体界面中使用视觉和听觉提示的组合时，必须小心，因为这可能会导致诸如排序之类的问题(这将在接下来的部分中解释)。
一致和清晰的设计肯定会有所帮助，使用清楚地说明其固有功能并易于理解的独特设计的组件也会有所帮助。
记忆力和注意力
短期记忆和注意力的问题会对一个人执行最基本任务的能力产生深远的影响，并且会使使用更复杂的技术变得非常具有挑战性。经历失忆问题的人会发现，这严重影响了他们对用户界面反馈(如表单验证)的理解和反应能力，并且使他们很难在任何给定的情况下做出适当的或所需的反应。
将内容分块成小的、相关的块，对有记忆问题的人有很大帮助。在这里你将相关的内容和界面元素分成五到七个块*，这是一个帮助理解和帮助注意力持续时间短的用户的有用方法。*
*#### 测序
排序与随着时间的推移将听觉和视觉线索联系起来的能力有关，或知道执行给定任务需要什么步骤。排序的困难可以通过在界面中提供提示来减少，例如，可以帮助你的用户理解什么时候需要输入。
此外，如果您避免使用不必要的闪烁内容、动画或移动，可以将与排序相关的问题降至最低，这些内容、动画或移动会分散用户的注意力，使他们无法关注核心功能，或者在用户试图阅读时会分散用户的注意力。许多其他用户也会感谢你这样做，包括我！
阅读障碍
术语诵读困难包括一系列与理解单词、数字或数学困难有关的情况。
在网页内容中使用清晰、简洁的语言对有阅读障碍的人有很大的帮助，你使用的字体也是如此。患有诵读困难症的人在使用包含记号或尾巴的字符时会遇到问题，这些字符出现在大多数衬线字体中。有些字母上的上行和下行的大小(如 p 上的下行和 b 上的上行)会混淆，所以字符的视觉形状必须清晰。诵读困难的人依靠这个视觉线索来帮助他们区分字母。
可以在Dyslexic.com，特别是[www.dyslexic.com/fonts](http://www.dyslexic.com/fonts)找到一些关于字体使用的一般建议。
注漫画 Sans 似乎是一种很棒的字体，但是大多数设计师宁愿咬掉自己的腿也不愿使用它。一种更时髦、设计者更友好的字体是相当不错的“诵读困难症:诵读困难症患者的字体”这种字体是荷兰特温特大学开发的，旨在帮助有阅读障碍的人更容易阅读。
它基于这样一个概念，即在英语中使用的标准拉丁字母中的 26 个字母看起来很相似，例如 v/w，i/j 和 m/n。因此，患有阅读障碍症的人经常混淆这些字母。通过创造一种新的字体来强调这些字母的区别，人们发现诵读困难的人犯的错误更少。
在下面的网站上也有一个关于阅读障碍的非常好的视频。
什么是辅助技术？
辅助技术(AT)设备和控制的范围非常广泛。也有很多定义。我喜欢这个:
“用于描述所有工具、产品和设备的术语，从最简单到最复杂，可以使特定功能更容易或可能执行。”
美国国家多发性硬化症学会
你可能已经注意到，根本没有明确提到残疾，这很重要。你不认为你的眼镜或电视遥控器是辅助技术，但它们确实是。
提示要了解 at 的精彩介绍，请观看杰夫·莫耶的 AT boogie 视频和海克·霍辛顿的动画。好玩又有教育意义，可以在[inclusive.com/assistive-technology-boogie](http://inclusive.com/assistive-technology-boogie)找到。
为什么技术不能不分能力被很多不同的人使用？好的设计能让这成为现实吗？不管用户的能力如何，好的设计应该让用户能够执行期望的任务。
作为一名设计师或 web 开发人员，你不需要深入了解辅助技术是如何工作的。事实上，这种知识的广度和深度是很难达到的，因为这需要花费大量的时间和精力。
许多辅助技术设备是串行输入设备。它们接受一个二进制输入，开/关。其他的要复杂得多(比如屏幕阅读器)，可以和浏览器结合使用，做非常复杂的事情，开发新的交互模型。在下一节中，我们将了解屏幕阅读器——它们是什么，它们是如何工作的，以及如何在测试网站的可访问性时使用它们(带有警告)。
你真的不需要对每一种 AT 都有详尽的理解，但是对屏幕阅读器技术的良好理解是成功的可访问性设计的重要基础，不管使用什么样的 AT。
什么是屏幕阅读器？
屏幕阅读器主要由盲人和有视觉障碍的人使用，但它们也有利于其他用户群体，如有阅读障碍的人或有读写问题的人。
屏幕阅读器将识别屏幕上的内容，并将这些数据作为语音输出。它是一种文本到语音转换软件，当用户将焦点放在屏幕上的项目上并使用键盘进行导航时，它会向用户逐字读出屏幕上的内容。屏幕阅读器用于与 PC、Mac、web 浏览器和其他软件交互并控制它们。
屏幕阅读器可以很好地与主计算机本身的操作系统一起工作，它们可以提供与计算机的深层交互，让用户执行许多复杂的系统管理任务。事实上，屏幕阅读器在与主机操作系统交互时通常表现得更好，因为它们是紧密集成的。当屏幕阅读器用户上线时，问题就开始了。网络世界不是一个受控或监管良好的地方，所以有理由说明为什么操作系统的安全和设计良好的环境通常更容易接近。
屏幕阅读器可用于模拟鼠标右键单击、打开项目和询问对象。询问一个对象实际上意味着查询——就像关注一个对象并问它“你是什么，或者你有什么属性？”屏幕阅读器也有一系列的光标类型，可以用来浏览网页和控制屏幕上的光标，以及在使用 JavaScript 的网络环境中模拟鼠标悬停事件。简而言之，几乎所有有视觉的用户功能都可以使用屏幕阅读器来完成。
注意术语屏幕阅读器很容易让人误解。屏幕阅读器不仅仅是阅读屏幕。更准确的术语应该是屏幕导航和阅读设备，因为该软件不仅用于导航用户的计算机，还用于导航网络。
有许多不同的屏幕阅读器可用，如 JAWS、Window-Eyes、免费的开源 Linux 屏幕阅读器(ORCA)和免费的 NVDA，以及已经与 Mac OS X 捆绑在一起的不断改进的 VoiceOver。还有其他的，如 Dolphin 的 Dolphin Supernova、Serotek 的 System Access 和 Ai Squared 的 ZoomText 放大镜/阅读器。接下来是一些更常用的屏幕阅读器的概述。这不是对可用产品的详尽介绍，不同的包基本上做同样的事情。人们使用什么很大程度上取决于预算和偏好。
口
JAWS for Windows 是最常用的屏幕阅读器之一，由美国自由科学公司开发。JAWS 代表带语音的工作访问，它是一款昂贵的软件，专业版的价格约为 1000 美元。
也有许多可用的 JAWS 脚本，它扩展了它的功能以允许访问一些定制的接口和平台。JAWS 最初是一个基于 DOS 的程序。由于其使用宏和快速访问内容和功能的能力，它越来越受欢迎。
大约在 2002 年，这种能力被引入到更加图形化的 Windows 环境中，增加了使用快捷键在网页中导航以及将焦点放在 HTML 元素(如标题)上的功能。这种功能和用户与屏幕阅读技术的交互已经成为可访问 web 开发的基石。
随着时间的推移，JAWS 的功能不断扩展，能够查询页面中使用的字体，指定哪些 web 元素具有焦点，以及更多高级功能，如 tandem ，允许您远程使用他人的屏幕阅读器来访问计算机。Tandem 对于故障排除和远程可访问性测试非常有用。
JAWS 12 引入了虚拟功能区，用于 Microsoft Office 和其他应用，并引入了对 WAI-ARIA 的支持。
那么，一个盲人如何访问网页和使用屏幕阅读器呢？
下面将帮助你掌握如何使用屏幕阅读器，如果你决定用屏幕阅读器手动测试你的 HTML5 界面，也会有所帮助。
首先，JAWS 在与网络内容交互时使用所谓的虚拟光标。所以你实际上不是直接与网页本身交互，而是与页面刷新时加载的页面的虚拟版本或快照交互。虚拟光标还用于阅读和导航 Microsoft Word 文件和 PDF 文件，因此您将在这里学到的一些技巧可以在导航可访问的脱机文档时应用。
注意使用 JAWS，与网页内容的交互包括使用一个离屏模型(OSM) ，其中来自页面的 HTML 内容被临时缓冲或存储，屏幕阅读器与之交互，而不是直接与页面交互。然而，有时候，当使用 DOM 时，其他屏幕阅读器不再使用屏幕外模型，因为它被认为有点过时和有问题。所以直接与 DOM 交互更好。现在不要太担心这个，因为我将在第四章“理解可访问性 API、屏幕阅读器和 DOM”中更详细地介绍它当我们讨论动态内容和使用 JavaScript 时，屏幕阅读器如何使用 OSM 和与 DOM 交互的细节变得很重要。
从大白鲨开始
您使用的 JAWS 语音类型，以及它的音高、速度和 JAWS 输出的标点数量，都可以通过选项菜单>语音>语音调整来控制。
提示你可能也想做一些调整，比如在你打字的时候关掉回声。以我的经验，很多盲人用户马上就这么做了；否则，当你输入一个句子时，你输入的每一个字符都会被朗读出来，这会变得非常烦人，非常快。
JAWS 中的许多语音功能都是通过数字键盘来访问的。INSERT 键也非常重要(通常称为 JAWS 键)，因为它用于在联机时访问一些更高级的功能。
数字键盘用于查询文本，并控制如何阅读和阅读什么。因此，使用箭头键可以上下移动并阅读屏幕上的内容，而向左和向右使用箭头键可以分别向前和向后浏览文本。
注意要随时停止牙关说话，按下 CTRL 键！
与文本交互最常用的键是
- 数字小键盘 5—说出字符
- 插入+数字小键盘 5—说出单词
- 插入+数字小键盘 5 两次—拼写单词
- 插入+左箭头—说出前一个单词
- INSERT+右箭头—说出下一个单词
- 插入+向上箭头—说一行
- 插入+HOME(7 键)—对光标说
- 插入+向上翻页(9 键)—比如从光标处
- 插入+向下翻页(3 键)—比如说窗口的底部一行
- 插入+结束(1 键)—比如说窗口的顶行
如前所述，左箭头键和右箭头键分别用于移动和阅读下一个或上一个字符。向上箭头键和向下箭头键将允许您分别移动到和阅读上一行或下一行。如果您按住 ALT 键并按下向上键或向下键，您将逐句浏览文档。或者您可以使用 CTRL 键按段落导航文档。
使用带有 JAWS 的对话框
要在电脑上打开的不同程序之间切换，您可以使用 CTRL+TAB 和 CTRL+SHIFT+TAB 键分别向前和向后切换。要在对话框中导航选项，可以使用 TAB 键前进，使用 SHIFT+TAB 键后退。
大白鲨和网络
JAWS 提供了一种轻松浏览网页的杀手锏。当您打开 Web 浏览器(例如 Internet Explorer (IE))时，只需按一个键就可以跳转到您选择的页面上的任何 HTML 元素。要查找页面上的标题，请按 H；对于所有表格，请按 T；对于表单控件，请按 F；等等。按下这些键中的任何一个超过一次将导致文档源顺序中的下一个期望的元素被宣布并被给予焦点。这是一个很棒的方式来浏览网页，使用标题来导航，跳过内容的各个部分，并快速聚焦到你想要的任何元素！
注意能够像我刚才描述的那样浏览网页，完全取决于页面是否有合适的语义结构，以便辅助技术首先使用。例如，如果网页没有标题，这种浏览方式就行不通。鉴于此，正如前一章所讨论的，格式良好的标记在可访问性中的重要作用应该是非常清楚的。
将 HTML 项目显示为列表
扩展前面的用户交互方法，JAWS 还可以用于创建页面中所有标题、链接和其他 HTML 元素的列表，并在用户可以使用光标键轻松浏览的对话框中呈现给用户。
如果您按下 JAWS (INSERT)键和一个相应的功能键，您会得到一个在对话框中显示的 HTML 元素列表。例如，您可以按 INSERT+F7 来显示当前页面上所有链接的列表，如图 2-6 中的对话框所示。
***图 2-6。*链接列表对话框
再比如你可以按 INSERT+F6 来显示当前页面所有标题的列表，如图图 2-7 所示。
***图 2-7。*标题列表对话框
或者可以按 INSERT+F5 显示当前页面所有表单字段的列表，如图图 2-8 所示。
***图 2-8。*选择表单域对话框
然后，您可以使用箭头键来选择一个项目，并按 ENTER 来激活或给予它焦点。
注意一旦对话框打开，你还可以按字母顺序浏览列表——这是一个非常方便的功能。因此，如果您有一个很长的链接列表，而不是使用箭头键来一个接一个地浏览它们，如果您知道您想要的链接的名称，您可以按下它的第一个字母的键，并直接跳转到该链接。所以(一旦链接对话框打开)如果你想要的联系链接，按 C；如果你想了解我们，请按 A；或者如果你想要销售，按 S；等等。
颌和形态
如前所述，JAWS 使用虚拟光标与网页进行交互。可以认为屏幕阅读器不直接与页面进行交互，除非用户需要输入一些数据，比如表单。这时虚拟光标被关闭，JAWS 禁用快速导航键和功能并进入表单模式。
提示当您处于表单模式时，之前描述的快速导航功能会被关闭，因为您需要按键来输入！当使用 JAWS 虚拟光标(这是浏览网页时的默认设置)时，键盘输入被屏幕阅读器捕获并用于浏览网页。
在 JAWS 的早期版本中，当您移动到一个表单控件并想要键入或选择一个单选按钮或其他元素时，您必须手动选择表单模式。新版本的 JAWS 有一个自动表单模式，默认情况下是打开的。如果更高级的用户选择返回到在屏幕阅读器中手动选择表单模式，他们可以关闭该功能。这可以给用户更多的控制，因为他们可以选择进入或不进入输入模式，而不是默认的输入模式。这在很大程度上是一个偏好问题；其他屏幕阅读器，如 VoiceOver，当它有焦点并且没有用户控制的表单模式时，允许您在输入栏中输入文本。
注意要使用 JAWS 手动控制一个表单，按 F 键移动到页面上的下一个表单控件。按 ENTER 键进入表单模式。在窗体模式下，按 TAB 键在窗体控件之间移动。在编辑字段中键入内容，选中复选框，并从列表和组合框中选择项目。按 NUM PAD PLUS 退出表单模式。
JAWS 屏幕阅读器可能会出现问题，因为虚拟光标关闭了，所以无法拾取表单中的某些内容。当您构建表单时，您应该确保您的表单被很好地标记，并且通过保持它们在布局和设计上的清晰和简单，您应该避免这些问题。然而，用残疾人来测试你的项目是一个突出你无法预料的问题的好方法。我们将在第九章“HTML5，可用性和以用户为中心的设计”中讨论这个问题同样在这个阶段，进入表单模式和所使用的各种光标的细节更像是一个研究生的话题，但是我会在后面的第四章“理解可访问性 API、屏幕阅读器、DOM”以及第八章“html 5 和可访问表单”中强调其中的一些问题
画外音和苹果电脑
每台 Mac 都附带了原生的、开箱即用的 VoiceOver 屏幕阅读器，其质量有了巨大的改进。可以肯定地说，语音的质量、它与操作系统的集成以及它在网络上的实用性已经导致许多盲人用户转而使用 Mac。仅 JAWS 屏幕阅读器的成本就相当于购买一台较低规格的 Mac。此外，我听到一些盲人朋友说，他们更喜欢它，因为它只是“感觉更好。”
作为一名开发人员，VoiceOver 也适合您在测试网站的可访问性时使用——在某些方面，它比使用 JAWS 更好，因为您可以开箱就开始测试，而且学习曲线不会太陡。
在我们更详细地了解 VoiceOver 之前，我需要提一下您在配置 Safari 浏览器时确实应该做的一些重要事情。为了能够将焦点放在页面上的项目上，比如链接(这对于可访问性测试非常重要)，你需要在浏览器的通用访问下启用这个特性，如图 2-9 中的所示。无论 VoiceOver 是打开还是关闭，这项功能都将发挥作用——遗憾的是，它在默认情况下是不启用的。
***图 2-9。*您必须选择按下标签以高亮显示每个项目复选框
注意如果您有视力障碍，可以使用 VoiceOver 来配置您的 Mac。这是一个非常有用的功能。
那么画外音从哪里入手呢？如果您已经在运行 Mac，您可以通过按下 CMD+F5 来启动 VoiceOver。你会在左下角看到屏幕的变化，如图 2-10 所示。
图 2-10。 VoiceOver 屏幕阅读器对话框
这个对话框对测试非常有帮助，因为它代表了 VoiceOver 的文本输出。因此，如果你是一个有视力的人测试一个页面，你可以得到一个关于屏幕阅读器将输出什么的视觉提示。您使用键盘(或触控板或鼠标)关注的任何项目也将由 VoiceOver 宣布其名称(有时还有某些属性)，并且您将能够在此框中看到这些信息。
使用 VoiceOver 时，Control (Ctrl)和 Option (alt)键非常重要，也称为 VoiceOver 或 VO 键。你很可能需要同时按下这些键和其他键来让 VoiceOver 做一些事情，比如跳到一个标题、转到链接以及其他类似的操作。
您还可以将 VO 命令分配给触控板手势和数字键盘等，以较少的按键次数执行常用任务。你可能想要模仿滑动手势来在 HTML 项目之间导航，例如当使用 iPhone 和 VoiceOver 时(这是一种能够浏览网页的非常酷的方式)。稍后我会在这方面说得更多。VoiceOver 实用工具用于根据您的需要调整屏幕阅读器。
您可以通过在“系统偏好设置”对话框中选择“万能辅助”来访问 VoiceOver 实用程序，如图 2-11 所示。
***图 2-11。*访问通用访问选项
然后你会看到与 Mac 相关的辅助功能选项，如图图 2-12 所示。
***图 2-12。*通用接入选项
注意你的 Mac 上已经有了其他几个辅助功能，比如为视力受损的人提供了一个相当不错的屏幕放大镜。(每个 Windows PC 和 Linux 机器上都有这个功能。)花点时间熟悉它们是值得的。
打开 VoiceOver 实用程序会将您带到可以自定义屏幕阅读器设置的区域，如图 2-13 所示。
***图 2-13。*画外音实用程序
VoiceOver 实用工具可让您选择想要使用的嗓音、音高、速度和其他设置。您可能想要调整声音，根据您正在做的事情，加快或减慢对您说话的速度。我真的很喜欢维基的声音，设置在图 2-14 所示的值。
图 2-14。 VoiceOver 实用程序—语音配置选项
注意还有几个你可能想调整的特性。例如，我喜欢关闭“按下修饰键时宣布”选项和“按下大写锁定键时宣布”选项。虽然当有视觉障碍的人使用屏幕阅读器时，这两个选项都很重要，但当测试网页的可访问性时，我发现第一个选项真的很烦人，因为每次按下 shift 键(如果我正在键入)，就会显示“Shift”。这些选项如图 2-15 所示，其中显示了详细度选项。
图 2-15。 VoiceOver 实用工具—详细度选项
图 2-16 中显示的网络选项也很重要。我建议你看一下并稍微调整一下，因为这可能有助于你的测试和浏览网页。
***图 2-16。*画外音—网络选项
在图 2-16 中可以看到三个选项卡:导航、页面加载和 Web 转子。
提示 VoiceOver 提供了几种导航网页的方法。第一个是默认的 DOM 顺序，它允许您按照我前面描述的方式导航，比如从一个标题到另一个标题或者从一个链接到另一个链接。导航顺序由项在代码中出现的源顺序决定。第二个选项是对项目进行分组，这让你可以使用像左右滑动或上下滑动这样的手势来获得页面的空间感和项目的位置。虽然这可能对一些盲人用户有用，但对开发人员来说，测试页面的可访问性并不真正有用。所以我会选择 DOM Order 选项。
我建议保留页面加载选项，如图 2-17 所示。
***图 2-17。*更多 VoiceOver 网络选项
最后一个选项我们将稍微调整一下。这是 Web 转子的“偏好设置”面板，这是 VoiceOver 中的一项重要功能，需要您理解，因为它是新一波基于手势的交互的核心。
使用腹板转子
Web Rotor 是一种使用简单手势访问特定类型的 HTML 和其他元素的方式。如图图 2-18 、图 2-19 、图 2-20 和图 2-21 所示，这是一个虚拟表盘，你可以通过分别在比如 6 点钟和 12 点钟的位置按下拇指和食指，然后顺时针或逆时针转动手指来访问它。当你继续转动时，你会看到一个显示各种选项的刻度盘。当您选择了特定类型的内容(如链接或标题)时，您可以通过触控板使用简单的推送手势(向右或向左)来导航。每个手势将突出显示源代码中出现的所需项目，在你滑动时将它们输出为语音。相当整洁。
***图 2-18。*画外音—选择与 Web 转子的链接
***图 2-19。*选择带腹板转子的工作台
***图 2-20。*用 Web 转子选择按钮
***图 2-21。*用 Web 转子选择表单控件
从这四个屏幕截图可以看出，这是一个优雅而聪明的解决方案，充分利用了触控板和一些简单的手势。当您使用它时，您会发现在内容类型之间切换非常容易，并且可以感受到页面的可访问性。
注您必须启用“触控板管理程序”才能工作，这样做会停用触控板的点击功能。此外，这项功能最适合 Safari。
您可以自定转子，以便调整转子项目的显示顺序，以及显示或不显示的内容。
我要做的另一个调整是选择启用实时区域复选框，如图 2-22 所示，将实时区域添加到转子选项中。实况区域和地标是 WAI-ARIA 规范的一部分。实时区域动态更新页面区域，例如最新的天气信息、股票价格和股票数据，或者任何不断更新的内容。地标是区分内容部分的一种方式，如标题、横幅项目等。
***图 2-22。*画外音—导航选项
尽管默认情况下选择了“启用活跃片段”,但默认情况下它在转子中不会被启用。因此，如果您希望在 Web Rotor 偏好设置中看到此功能(是的，它会很有用)，我建议您在 VoiceOver 实用工具偏好设置中选择 Web Rotor 并激活实时区域和地标，如图 2-23 所示。在图中，我稍微重新安排了一下，以适应我对可访问性测试的需求。
图 2-23。 Web 转子显示选项
VoiceOver 还有许多其他出色的功能，比如用户自定义的 Web Spots。通过按下 VO 键、CMD 键和 Shift 键以及右大括号(})，您可以创建自定点列表(例如，在网页上经常使用的功能)，然后使用转子导航到它们。这对于重复使用您经常访问的页面非常有用。
注意这些例子都与 MAC OS Lion (10.7.1)和使用 Safari 5.1 有关。也可以使用 VO 键和按 U 键访问转子，并通过箭头键导航。你也可以开始输入一个 HTML 元素的名称来获得一个可以访问的条目列表，就像一个聪明的搜索引擎功能。
JAWS 屏幕阅读器包含的所有功能(无论如何，当使用网络时)在 VoiceOver 中都有其功能等效物，尽管在界面的实现上有细微的差异。它们实际上不能被认为是完全相同的，因为它们以不同的方式运行，而 JAWS 是这个领域中的老大，因此具有一些更高级的功能。
提示Lion(10.7)自带的新版 VoiceOver 有一个方便的新功能，叫做 QuickNav。这是一种以更直接的方式与转子互动的方式。同时按下左右光标键，然后进入快速导航模式。通过同时按下左箭头和上箭头，您可以向后移动转子，然后使用上/下箭头键通过所选项目浏览网页。通过使用向右箭头和向上箭头，您可以向前移动转子。欲了解更多信息，以及如何使用该功能的视频，请参见:[www.apple.com/accessibility/voiceover](http://www.apple.com/accessibility/voiceover)。
窗眼
GWMicro 是 Window-Eyes(用于 Windows 操作系统)的开发者，这是一种类似于 JAWS 的屏幕阅读器，值得一提，因为它是首批支持 WAI-ARIA 的阅读器之一。它的操作与 JAWS 略有不同，因为它不使用屏幕外模型(OSM)并直接与 DOM 交互，但其核心功能与 JAWS 非常相似。我听到盲人朋友和同事表达了对它的偏爱，因为它更快，反应更快，但功能上非常相似。然而，它比 JAWS 便宜得多，这是一件好事。
英伟达
NVDA 屏幕阅读器也值得一提，因为它有许多积极的方面(比如完全免费和开源)。它也是 WAI-ARIA 的坚定支持者。
它还可以通过合成语音和盲文提供反馈。NVDA 允许盲人和视障人士访问 Windows 操作系统和许多第三方应用并与之交互。
NVDA 的主要亮点包括:
- 支持流行的应用，包括 web 浏览器、电子邮件客户端、互联网聊天程序和办公套件
- 内置语音合成器，支持 20 多种语言
- 文本格式的公告，如字体名称和大小、文本样式和拼写错误
- 鼠标下方的自动文本通知，以及可选的鼠标位置声音指示
- 支持许多可刷新的盲文显示器
- 无需安装即可完全从 u 盘或其他便携式媒体上运行
- 易于使用的语音安装程序
- 被翻译成多种语言
- 支持现代 Windows 操作系统，包括 32 位和 64 位版本
- 能够在 Windows 登录和其他安全屏幕上运行
- 支持常见的辅助功能接口，如 Microsoft Active Accessibility、Java Access Bridge、IAccessible2 和 UI Automation
- 支持 Windows 命令提示符和控制台应用
NVDA 有自己的捆绑语音合成器(称为 eSpeak )，但它可以插入现有的常见语音合成引擎，如 SAPI 4/5。
屏幕阅读器和替代品
如果您不想使用屏幕阅读器(您可能有充分的理由，因为很难学会如何正确使用它们)，您可以尝试使用屏幕阅读器模拟器，如 Fangs。獠牙可以用作火狐的插件，并向 JAWS 的用户演示网页的输出。然而，这种方法也不是灵丹妙药，因为它不会给你一种盲人用户体验的感觉，而这正是真正学习使用屏幕阅读器的诀窍所要做的。话虽如此，如果使用屏幕阅读器不太顺利，这是一个有用的工具。
提示如果你不想听完整的语音输出，VoiceOver 可以使用这个技巧——voice over 会在屏幕底部的一个小窗口中显示它作为语音输出的文本。对于开发人员来说，这有助于理解当任何 HTML 元素具有焦点时屏幕阅读器将输出什么。
在第四章“理解可访问性 API、屏幕阅读器和 DOM”中，我们将更深入地了解屏幕阅读器是如何工作的；这将帮助你理解当你使用屏幕阅读器时发生了什么。最后，在第十章“工具、提示和技巧:评估你的 HTML5 项目”中，我们将进一步探索盲人在浏览网页时使用的一些常用策略，并概述你如何能够在屏幕阅读器的辅助功能测试中模拟这些浏览策略。我们还将看看其他一些可以在浏览器中使用的工具，以了解屏幕阅读器在幕后“看到”了什么。
移动设备无障碍技术
这个关于移动设备可访问性的简短部分旨在向您简要介绍可供残障人士(尤其是视力障碍者)使用的移动设备。它不会为这些设备开发，因为其中许多设备需要特定平台的应用，尽管它们当然也可以使用你的 HTML5 内容。
5
VoiceOver 和 iPhone
iPhone 上 VoiceOver 的功能也差不多。然而，它确实做了一些非常好的事情。例如，它有一种在 iPhone 上选择项目的新方法，因此使用 VoiceOver 的人将在屏幕上移动她的手指，任何被击中的对象都会被宣布。当屏幕上的项目是活跃的(已经被宣布)并且用户将手指放在项目上时，轻敲屏幕上的任何其他地方将选择它。
这真的很聪明，虽然需要一点时间来适应，但很有意义。与使用专用键盘相比，键入文本信息和电子邮件可能会慢很多，但可以添加外部键盘。我还见过一位盲人朋友使用专用的盲文输入设备。
标准的滑动手势也与 MacBook Pro 以及 Web Rotor 的工作方式相同。你甚至可能会发现自己在阳光明媚的日子里在户外听 iTunes 时使用 VoiceOver 即使对于视力正常的人来说，当很难看到屏幕时，它也非常有用。
注看到 iPhone 的巨大飞跃真是令人惊叹。在可访问性方面，它是一个完全的游戏改变者，引入了一个全新的使用触摸和手势的交互模型。如果有人在四五年前告诉我，只有一个按钮的触摸屏设备会被盲人和视力受损的人成功地用作输入设备，我会说他们疯了。
会谈和 Symbian
多年来，主要的移动屏幕阅读器是 Talks。它可以在 Symbian 手机(如诺基亚)上使用，作为访问手机、手机功能等的一种方式。它仍然相当受欢迎，但由于其他更新的移动操作系统的流行，它已经失去了很多地盘。
RIM 和 BlackBerry 可访问性
黑莓从来没有被真正认为是一个非常容易使用的设备，但这种情况即将改变。我已经听到了关于 RIM 提高黑莓平台可访问性的积极消息。
以下是新一波黑莓智能手机提供的一些辅助功能:
- 黑莓智能手机的清晰主题——包括简化的主屏幕界面、大的纯文本图标和高对比度屏幕显示。
- 来电、短信、电子邮件等的视觉、听觉和振动通知。
- 可自定义的字体—您可以增加字体的大小、样式和粗细。
- 听得见的咔哒声——用于使用触控板或轨迹球导航的确认声音。
- 反向对比度—您可以将设备显示颜色从亮时的暗更改为暗时的亮。
- 灰度——您可以将所有颜色转换成各自的灰度。
- 浏览器缩放—一种屏幕放大功能。
该平台上的一系列其他增强功能旨在满足有行动、认知和语言障碍的用户的需求。所以看起来很有希望。另一大优势是 Aaron Leventhal，他曾是 Mozilla 的首席可访问性架构师，并推动 Firefox 的可访问性，现在是 RIM 的高级可访问性产品经理，将为该平台带来许多技能和经验。
机器人
Android 平台的使用越来越普及，从 1.6 版本开始，已经为有视力障碍的人提供了内置平台功能。但是，它仍然要求您下载适当的软件并配置手机。这可能有点复杂，但原则上，视障用户可以使用任何功能，包括打电话、发短信、发电子邮件、浏览网页和通过 Android Market 下载应用。
注意 Talkback 是谷歌开发的免费屏幕阅读器。重要的是要意识到，为了充分利用这些屏幕阅读器，你必须使用一个有物理导航控制器的手机，用于在应用、菜单和选项中导航。这可以是轨迹球、轨迹板等等。选择有物理键盘的手机也是一个好主意，因为触摸屏设备的辅助功能非常有限。
我是安卓平台的粉丝。我喜欢它的可定制性和灵活性，你可以连续几个小时摆弄它。然而，从可访问性的角度来看，整个体验还有很多不足之处——尤其是在触摸屏设备上。为 Android 设备配置和启用可访问性所涉及的复杂性与 iPhone 的开箱即用的可访问性体验之间存在着天壤之别。iPhone 远胜一筹，这很可惜，因为 Android 平台有很多值得推荐的地方。例如，你可以在 Android 上使用各种屏幕阅读器，还有其他有用的辅助功能。然而，就用户体验而言，它目前只是非常繁琐，不适合胆小的人。
语音合成:它是什么？它是如何工作的？
既然你已经对如何使用屏幕阅读器有了一个介绍，来点背景知识怎么样？
要作为语音输出的文本被转换成称为音素的非常小的原子成分。这些是我们语言的组成部分(是的，它们比音节小)。例如，英语字母表有 26 个字符和大约 40 个音素。
用于实际创建声音输出的主要合成类型如下:
- 共振峰合成
- 串联合成
- 发音合成
三者中，共振峰使用最早，最常见。这也是快速创建可识别声音的最简单方法，因为共振峰是实时生成的声音，代表人声的主要频率成分。共振峰占据频谱的一个相当窄的频带(就像人的声音一样),它是通过将这些常用的频率以不同的振幅组合起来而产生的。
共振峰合成与其他类型的合成相比具有明显的优势，因为它可以用于以相当高的速度输出文本，并且仍然可以理解和理解，这在拼接或发音合成中是比较困难的。然而，基于共振峰的语音输出听起来相当机器人化。
拼接合成是指使用预先录制的声音数据库将文本输出表示为语音。它可以产生更像人类的声音，但也有一些缺点，例如在高速输出时清晰度下降(这对许多偏好高速语音输出的屏幕阅读器用户来说很重要)。
发音合成使用一种模型来复制人类声道和声音实际上是如何产生的。它更复杂，但它很好地引导我们进入一些其他模型，如 HMM，它试图根据以前或当前的输出来预测接下来会发生什么。这些模型通过使用隐马尔可夫链来做到这一点(这将我们带入概率建模的领域，所以让我们把它留在那里！).
注意如果你想了解更多信息，有一个有趣的工作组正在研究基于 HMM 的语音合成系统，你可以在[hts.sp.nitech.ac.jp](http://hts.sp.nitech.ac.jp)找到它。您还可以在那里找到一些实时 HMM 生成器。
屏幕放大
视力受损的人使用屏幕放大软件。这些产品被用来放大屏幕的全部或部分。这个放大的视图是用户的主要视图，可以通过鼠标或其他设备在屏幕上移动。
你可能意识到这种功能已经是 Windows 操作系统和 Mac OS X 的一部分，并想知道为什么有人会把自己的血汗钱花在一个专用的软件包上。专用软件包和操作系统功能之间的区别在于质量和清晰度，当您将 SuperNova 或 ZoomText 等屏幕放大产品与内置操作系统产品进行比较时，这一点非常明显。事实是，当您使用(并真正推动)操作系统的放大功能时，您可能会看到伪像，更重要的是，模糊的文本在高放大级别下可能会变得难以辨认。
像 SuperNova 或 ZoomText 这样的屏幕放大软件包可以以更高的分辨率重绘屏幕。此外，此类软件包还具有其他内置功能，可提供高质量的抗锯齿功能，因此在高放大倍率下查看任何重新绘制的文本都会更加清晰。虽然您选择的操作系统的内置屏幕放大功能肯定可以由轻度至中度视力障碍的人使用，但视力障碍更严重的人通常需要使用现成的软件包。
注意当你构建网站和应用时，需要注意的一些事情是以一种可以被使用屏幕放大软件的人看到的方式改变部分页面。一个经验法则是避免页面最左边的控件被激活时更新最右边的内容，当用户查看屏幕的一个很窄的部分时，很容易忽略这一点。说“当用户可能不期望它的时候”可能更准确如果该命令更新了购物车或类似的商品，这可能没什么问题，因为用户已经准备好期待这种情况发生。这种设计模式在意想不到的时候可能会有问题，因为屏幕放大镜的视图通常很小。所以请记住这一点。
切换访问
增强的信息设计也有利于行动不便的用户。身体残疾的用户经常使用一种称为开关的设备，如图图 2-24 所示，来与他们的计算机进行交互并访问网络。
***图 2-24。*各种单按钮开关
开关的形式各不相同。它们真的应该被认为是二进制输入设备，或者简单的“开”“关”输入，就像电灯开关一样。令人惊奇的是，使用这些非常简单的输入设备，结合合适的软件界面，可以做多少事情。
如图图 2-24 所示，一个开关通常只是一个大按钮，用户可以用最小的力气按下它。(此外，有些开关需要降低灵敏度，因为用户可能会用力敲击它们。)也有通过其他交互方式控制的开关，比如用户对着它们吹气或者摇晃它们。还有各种其他形式的交互来满足用户的能力。
一些用户经常组合使用两个或更多这些开关。可以将开关配置为执行默认操作，如打开常用的应用，也可以向其添加宏。这种强大的可定制功能确实有助于提高用户与计算机、web 浏览器或其他所需应用的交互能力。
开关是如何工作的？
开关通常与其他软件结合使用。它们通常被称为扫描软件，有几种在使用，如 Grid、Clicker 和 EZ-Keys。
一般来说，这些扫描包的工作方式是将屏幕划分为网格类型的布局，并在开始时高亮显示网格的每一行内容(根据用户的偏好定义一段时间，比如两秒钟)。当指定的时间段过去后，下一行自动突出显示，然后是下一行，依此类推。
当用户看到包含他想要选择的项目的行被突出显示时，他按下或激活开关。然后，该行中的各个项目开始一次一列地突出显示，直到所需的项目突出显示。然后，用户可以激活开关按钮来选择它。这种临时突出显示以线性方式发生(首先逐行，然后当选择一行时，逐行)。这个过程被称为扫描。
输出可以在扫描软件中显示为文本(如图 2-25 中的，当用户输入时，文本输出出现在顶部的框中)，但通常该输出会被发送到另一个应用。
***图 2-25。*原网格软件
有时电子邮件会使用定制的皮肤，如图图 2-26 所示。
***图 2-26。*使用电子邮件的自定义皮肤
皮肤也可以被设计用于浏览网页，包括浏览特定的网站。图 2-27 显示了一个浏览 YouTube 的皮肤。
***图 2-27。*浏览 YouTube 的自定义皮肤
最后，图 2-28 显示了一个 Grid 2 界面，它可以用来使输入消息更容易。
***图 2-28。*用于打字的网格 2 界面
这种单开关、多开关和网格型软件的组合对于许多残疾人来说是一种非常强大的技术。这些技术使他们能够充分使用他们的电脑，与家人和朋友交流，并上网冲浪。
老鼠仿真
另一种(更高级的)扫描类型的应用是 EZ-Keys XP，其操作稍有不同。如图 2-29 所示，EZ-Keys XP 是一款使用替代输入(如键盘或甚至使用开关激活的轻微眼球运动)提供完整鼠标模拟的软件。它允许用户使用创新的雷达型模式控制鼠标，并且它还具有其他功能，如标准键盘、扩展键盘、操纵杆以及单开关和多开关扫描。
图 2-29。 EZ-Keys 软件
切换访问、鼠标模拟和网络
交换机接入系统确实需要实际操作才能理解。这里有一个 YouTube 视频的链接，演示了如何使用 EZ-Keys 之类的软件来使用交换机访问网络。
对于使用网格显示交换机访问的视频，请访问以下站点:[www.youtube.com/watch?v=0pGleNU2Jtw](http://www.youtube.com/watch?v=0pGleNU2Jtw)。
注意我还推荐 YouTube 上的 Enable Ireland 频道，那里有很多关于 AT 的精彩视频。在这里，您可以看到各种各样的 AT 在使用。这些视频也有隐藏式字幕(CC)。
[www.youtube.com/user/enableirelandat](http://www.youtube.com/user/enableirelandat)
可达性重叠
为了帮助您解析我们在本章中介绍的信息，请记住许多 WCAG 2.0 准则和实践是重叠的。这意味着它们以积极的方式影响各种用户群体。例如，键盘可访问性和能够从键盘访问所有重要功能是创建可访问网站的核心要求，这将有助于减少所有残疾用户的障碍，无论他们使用什么 AT。那是一条有用的信息！
就可访问性而言，键盘访问是最接近银弹的东西，因为它影响广泛的残疾类型、交互模型/模式和 AT。通过提供可靠的键盘访问，您将有助于使您的网站更容易被屏幕阅读器的盲人用户、使用开关的行动不便的人、由于颤抖、痉挛和/或不自主运动而不能使用鼠标从而只能依靠键盘的人，以及像我这样喜欢通过高级用户快捷方式快速访问内容的书呆子访问。所以这是一个双赢的局面，我希望这是一个足够简单的交互模型，让你能够理解和实现。
如前所述，无障碍不仅仅是针对盲人。然而，(我在这里会后退一点)你应用到你的项目的可访问性最佳实践，使你的内容对盲人屏幕阅读器用户来说是可访问的，也将真正帮助许多其他用户组。
有时候一点点同情也会有很大帮助。例如，如果你脑海中的一个小声音告诉你，你的新 Web 3.0，动态交互部件可能有点过于工程化和复杂——你猜怎么着！大概是工程过度，复杂了吧！
简单是你的朋友。许多平面设计师，当他们第一次开始学习 PhotoShop 以及如何调整图层和使用滤镜时，会发疯。(我做到了。)他们最终会设计出大量图层和滤镜相互作用的图像，结果可能是一团糟。(我做了很多。)然而，如果你把事物剥离回来，看看你想要产生的图像的核心，并给元素一点呼吸的空间，那么物体本身固有的某种和谐就会出现。
将这种更实用的美学应用到你的设计和代码中，使用“形式服从功能”这句口头禅，会对你有所帮助。此外，看看你的用户想要什么，并试图设计一个你的用户可以理解的心智模型。
结论
在这一章，我介绍了一些不同类型的残疾，或者我应该说，我们看了不同范围的能力。我们还研究了各种可以帮助人们使用电脑和网络的技术。在接下来的几章中，我们将会看到 JavaScript，然后是一种叫做 WAI-ARIA 的新的可访问性标记语言，它可以与 HTML5(以及 HTML 的早期版本)结合使用，以创建可访问的、丰富的互联网应用。我们还将通过研究离屏模型来更详细地了解屏幕阅读器是如何工作的，您将了解 DOM 和可访问性 API。*
三、JavaScript 不是一个肮脏的词，ARIA 也不仅仅是美妙的音乐
很长一段时间，JavaScript 在可访问性圈子里是一个非常肮脏的词。它几乎是一个贱民，在面包专辑和不受欢迎的神奇宝贝中的网络开发的廉价地下室中被发现。Web 内容可访问性指南(WCAG)的第一版几乎禁止使用 JavaScript，这并没有帮助，而且开发者对使用 JavaScript 的态度也存在分歧。也有势利的人质疑它是否是一种合适的编码语言。低准入门槛，以及即使写得很差也能工作的能力，也无助于它的形象。现在这一切都改变了。
在这一章中，我们将看看如何使用 JavaScript 和其他技术来构建动态可访问网站和富互联网应用(RIA)。这些通常是使用 HTML、层叠样式表(CSS)、JavaScript 和最新产品 WAI-ARIA 的组合开发的。WAI 是基于 W3C 的 Web Accessibility Initiative，ARIA 代表可访问的富互联网应用。有时它被简称为咏叹调。
本章介绍了使用这些语言进行可访问性设计的一些常用方法，以及开发适用于每个人的动态内容——注意一些基本的良好的脚本实践。我们还将看看当前更加易于访问的 JavaScript 库。这一章也给了你一个很好的基础来帮助你过渡到可访问的 HTML5 开发，因为这里涉及的很多内容同样适用于 HTML 4 和 HTML 5。我还将概述一些在开发以支持旧的辅助技术(AT)时可能仍然需要使用的向后兼容技术。
注意本章关于脚本的部分并不是详尽的 JavaScript 操作指南；相反，它概述了一些简单的原则。写这篇文章时，我采纳了朋友们的一些好建议。(鞠个躬，Gez 柠檬。我欠你一次。)我也借用了一些现有资源的例子。当谈到一般的脚本时，真的有很多方法可以做类似的事情，所以我将留下很多关于如何根据自己的喜好应用脚本的基本细节，而是集中在一些你应该坚持的简单原则上，这将使你的项目更容易理解。
如果你需要一本关于 JavaScript 的入门书籍，我推荐 Christian Heilmann 的书，他写了大量关于这个主题的文章，是可访问性方面的专家，还有 Jeremy Keith 和 Jeffrey Sambells 的《DOM Scripting:Web Design with JavaScript and the Document Object Model 》( friends fed，2010 ),也很棒。本章假设你有一些脚本经验，但是如果不是很高级也不要担心——你会得到大概的概念。
JSLint 是一个帮助你编写更好的 JavaScript 的有用工具，它最初是由道格拉斯·克洛克福特开发的。这将向您显示常见的错误，如行尾缺少分号；没有if、for或while语句的花括号；或者那些讨厌的return、throw、continue或break语句，它们会阻止你的代码运行。在[www.jslint.com](http://www.jslint.com)有在线版本。
JavaScript:用得好的话很有用
以前的 HTML 版本主要是文档标记语言。它们是在网页还只是页面的时候设计的。它们是文本 Word 文档的在线等价物。随着时间的推移，它们变得越来越复杂，图像(然后是视频内容)可以嵌入其中。最终，web 演变成了今天的应用空间，其中 web 站点的行为更像桌面应用，用户可以在浏览器中做更复杂的事情。
所有这些 Web 2.0 的东西(因为没有更好的术语来描述更高级的功能)都是由一种相对简单的文档标记语言结合 CSS 和一些 JavaScript 实现的。事实是，有时候你不能单独使用 HTML，而一些有品位的使用 JavaScript 可以通过为用户提供额外的指导、帮助表单验证和提供更有意义的警告来增加网站的可访问性。
注意美国的 Section 508 guidelines 规定，当用户需要定时响应时(例如，当预订音乐会门票时)，您必须通知用户。单独使用 HTML 几乎是不可能的——需要使用 JavaScript。
请注意，JavaScript 完全独立于 HTML 或它可以应用的任何其他语言。它很大程度上由一系列行为组成，可以被认为是占据了 web 开发栈中的那一层。它主要用于决定你的内容在被激活或移动时的行为，以及它将如何响应触发的特定事件。
JavaScript 是一种客户端语言，这意味着它完全在浏览器中运行。还有其他语言，比如 PHP，运行在服务器端，可以和 JavaScript 一起使用，实现更复杂的服务器/客户端交互。
WAI-ARIA:这是什么？
在这一章的后面，我会讲很多关于 WAI-ARIA(有时也叫咏叹调)的内容。如前所述，WAI-ARIA 是 W3C 的 Web Accessibility Initiative(WAI)开发的一种技术规范，旨在弥合 HTML 4 和 HTML5 等标记语言之间的语义鸿沟。
注意在过去的几年里，web 从静态网页转移到了 AJAX/Web 2.0 空间，变得更像应用。ARIA 的想法是开发一种可以插入到 HTML/XHTML 等宿主语言中的语言(它也可以与 SVG 一起使用)，这可以使使用 at 的残疾人更容易访问这些应用。
当然，HTML5 有一系列全新的控件(我们将在后面讨论)来提高网站和应用的可访问性。然而，当开发人员在等待 HTML5 时(让我们面对现实吧，这是一个漫长的等待)，需要有某种东西可以描述开发人员为辅助技术制作的手工滚动的动态交互小部件和组件的目的，有时是状态和其他属性。所以一些非常聪明的人集思广益，WAI-ARIA 诞生了。
【HTML 4，3，2……怎么了？
我很惊讶在复杂的在线应用方面取得了如此大的成就，使用的实际上是一种有限的文档标记语言。(这是一种时髦的说法，“网络到底是怎么发展成现在这个样子的？”)
HTML 4 中只有两种元素可以单独通过键盘接收焦点:<ahref>锚标签和<form>控件。如前所述，键盘可访问性是可访问 web 开发的基础。在 HTML5 中，许多控件已经可以在 Opera 11、Safari 5、IE 9、Firefox 6 和 Chrome 13 等几个主要浏览器上通过键盘访问——全部或部分。这些包括<audio>元素；<datalist>元素；<color>输入元素；<date>输入元件；<date and time>输入元件；<month>、<number>、<range>和<搜索>输入元素；以及<time>, <week>和<summary>元件。
尽管可聚焦元素和控件的调色板不再那么有限，但值得注意的是一些用于使元素在浏览器中可聚焦的技术，因为它们仍然非常有用——特别是在向后兼容较旧的 at 和尚不(或不愿)支持 HTML5 的浏览器等问题上。
您还应该意识到，虽然 HTML5 中的许多新控件可以通过键盘访问，但这并不意味着它们是完全可访问的。为此，他们的角色和其他信息需要通过辅助技术的可访问性 API 公开。我刚刚列出的几个新的 HTML5 控件还没有出现这种情况。
因此，从技术上来说，虽然用户可以单独使用键盘来访问控件，但这并不意味着他们可以发现控件实际上是什么或它做什么！
提示为了处理上述情况，您可能需要使用 WAI-ARIA 添加可访问性信息。稍后我将更详细地介绍新的 HTML5 控件的可访问性，以及它们如何通过本机可访问性 API 向 AT 公开它们的角色和其他信息。
可访问的 JavaScript
就糟糕的脚本实践可能给最终用户带来的可访问性和障碍而言，许多开发人员并不真正关心。这种态度并不是有意针对残疾人的。开发人员只是喜欢他们可以用脚本做更多的事情，使页面的创作和使用更有趣，也更动态，他们被这种新语言所吸引。然而，对于使用 AT 的人来说，这些障碍往往是真实存在的。
其中一些障碍是由于当时一些用户关闭了 JavaScript，或者用户在防火墙后，或者只是在一个有限的浏览环境中。(企业环境可能非常封闭。)因此，无法访问 JavaScript 意味着许多脚本化的界面无法正常工作。
然而，在过去的几年里，这一切都改变了(除了封闭的企业环境)。JavaScript 在许多浏览器中是默认启用的，只要遵循我在这里概述的原则和实践，AT 的用户(如屏幕阅读器)就可以轻松地使用许多大量使用 JavaScript 的网站和应用。
注意世界领先的在线网页可访问性网站之一的 WebAIM 研究了屏幕阅读器的使用情况，发现 98%的屏幕阅读器用户启用了 JavaScript。
更多信息，参见[webaim.org/projects/screenreadersurvey3/#javascript](http://webaim.org/projects/screenreadersurvey3/#javascript)。
渐进增强
开发可访问脚本内容的首要原则之一是渐进增强的理念。根据这一原则来构建网站，你可以像看待 CSS 一样看待你的脚本——你可以将它们分成各自的文件或层。你的 HTML 是内容层，CSS 是表示层，JavaScript 是行为层。这种思考脚本的方式已经得到了很好的证明，并且很有意义，因为它有助于代码管理，并且使项目移交更容易，更少混乱。作为一个额外的好处，它对使用 AT 的残疾人有好处，因为基本内容总是可用的，并且不完全依赖脚本来工作。这意味着逐渐增强的内容也可以更容易地被你喜欢的搜索引擎解析。
注你可以把谷歌搜索引擎想象成一个盲人用户。它将解析人们在表面上看不到的代码——就像屏幕阅读器一样——然后运行它神奇的算法并返回结果。所以在你的设计中善待残疾人，你也会为大 g 服务。
当您分离您的内容时，您从一个可访问的网页(结构良好的 HTML 内容、正确标记的表单控件、合适的替换文本等等)开始，为您的所有表示性内容添加一个单独的 CSS 文件，然后向站点的各个方面添加 JavaScript 功能，以增强其对可以正确处理它们的用户代理的功能。
渐进式增强的核心思想是，能够充分利用更新的技术规范和创作方法的用户代理(浏览器)能够并且将会，并且您的代码不会破坏那些不能、不会或者不会的。因此，一个逐渐增强的网站将是键盘可访问的，只有键盘用户才能在访问你的网站时执行他们需要的任务。
也就是说，JavaScript 必须以独立于设备的方式应用，这意味着 JavaScript 不需要使用鼠标就能工作(这种情况经常发生)。
不引人注目的 JavaScript
JavaScript 的使用不引人注目也是至关重要的。这种方法旨在为不同的用户提供更加无缝的用户体验。他们可能不认识技术(在某种程度上，所有好的技术都应该是看不见的)，但当他们遇到不想要的行为时，他们会认识到这些行为，他们肯定会认识到那些不起作用的东西。网页上不必要的移动，复杂且通常不直观的小工具功能，以及怪异或不熟悉的控件遍布网络。不要给正典投稿。
注意渐进式增强和不引人注目的 JavaScript 有什么区别？嗯，有点像阴阳，因为是交织在一起的。它们都支持分层开发的思想，但是渐进式增强概述了以交错的方式向支持它们的用户代理提供行为的模型，并且不会破坏那些不支持它们的用户代理的内容。如果不被支持，不显眼的东西不会妨碍或扰乱用户体验。NOSCRIPT 问题就是一个很好的例子。(见下一节。)它们是同一枚硬币的不同面。
整齐的编码
在 CSS 中，你编写全局定义的声明，使用它们通过<div>元素或者id或者class属性(也称为钩子)来控制外观，然后告诉浏览器以不同的方式呈现它。您可以添加更多谨慎的挂钩，然后在您的 CSS 文件中编写表示规则，而不是在 HTML 中添加大量繁琐的 CSS 代码。你可以用同样的方式思考 JavaScript。一个好的做法是在 JavaScript 文件中定义全局行为，这些行为将自己附加到 HTML 中的 ID 和类挂钩上，这样这些行为将(如果愿意的话)级联到 HTML 文件中。
注意，你可以给你的 id 和类名起一个类似于的名字，比如 popup 或者 expand_menu ，这在你编码的时候很容易理解。或者您可以借用现有的 ID 和类名。例如，考虑这个片段:<a href="http://www.somewebsite.com" class="expand_menu">Expand me</a>
注意向钩子添加许多 JavaScript 事件的正确方法是定义元素，然后是事件，最后是动作。有几种方法可以做到这一点，比如getElementbyId、getElementsByTagName(当你想将几个具有相似行为的元素作为目标时)和getAttribute。每种方法都可以用来遍历 HTML 文档的 DOM 寻找特定的 id、元素类型或属性。然后在文档加载时对它们做些什么。添加window.onload=prepareLinks();函数还将确保您的 JavaScript 不会在页面加载之前触发。如果你的脚本在一个外部文件中，这一点很重要，因为它可能会在你的 HTML 文件之前加载。
常见的 JavaScript 可访问性问题
注意术语事件处理程序将在接下来的章节中大量使用。事件处理程序实际上是包含响应事件而执行的程序语句的方法，因此事件处理程序和方法可以互换使用。事件处理程序被添加到您的 HTML 代码中，并通过某种用户交互来激活或触发。它们也可以由浏览器本身触发，例如，当页面加载时，或者当网页的某个部分使用 XHR 对象异步更新时(这在 AJAX 开发中很常见)。
使用 JavaScript 时出现的大部分可访问性问题都是因为没有正确使用它，或者因为人们普遍缺乏对代码对用户体验的影响的认识，特别是对残疾人。这很大程度上是可以理解的，因为开发人员可能没有意识到他们如何实际应用脚本甚至是一个问题。
用 JavaScript 做类似的事情也有很多方法，看起来会产生相同的结果，但可能更多的是“黑帽子”而不是“白帽子”只有当你从一个残疾人的角度看一个严重脚本化的界面时，你才能意识到采用渐进增强这样的方法确实有意义。这一章呼吁更多的“白帽子”JavaScript，所以善待你的用户！
还有更多的易访问性问题——或者更准确地说，可用性问题——你可以用常识作为指南来解决。如果你认为你的脚本网站或者界面复杂难用，那么你猜怎么着——它可能对很多其他人来说复杂难用！当它像那样被拼写出来的时候，它似乎有点愚蠢，但是它是真实的。
但是，还有其他不太明显的可访问性问题:
-
缺少键盘可访问性: JavaScript 有一些只能用鼠标激活的事件处理程序，比如
onClick、onMouseOver、onMouseOut、onDblClick。其他方法不太特定于设备，例如onFocus、onBlur、onSelect和onChange。当一个项目或对象获得焦点时，它们被激活，这可以通过鼠标、键盘或任何输入设备，如开关(如前一章所述)。后一种方法是一种独立于设备的方式，用于向网页中的对象添加行为，这是一个简单但强大的例子，说明了如何更方便地向内容添加 JavaScript。 -
Lack of Control: Taking the previous example a step further, if a webpage has been developed with only
onClickmethods, these functions often are not accessible to a keyboard user. The user might not be able to use the widgets/controls at all and therefore is blocked out of the web site. This can also be an issue when content is hidden or removed on certain events and the user either cannot undo an action or just can’t get to some content.WCAG 2.0 成功标准中详细描述了处理各种此类情况的方法。在下一节“JavaScript 和 WCAG 2.0”中，我们将会看到他们对可访问脚本的一些建议
-
**发生了太多事情:**过度工程化、过度烹饪的界面如今变得越来越常见。随着用户体验在这个看似无限选择的时代变得越来越重要，它们越来越不被容忍。当用户对一个网站有不好的体验时，他们很幸运不必回头，并且有大量的竞争网站很乐意收购他们的业务。当一个组织是一个公共部门或联邦机构时，情况就不同了，他们有义务确保他们的 web 界面符合某种标准。
然而，我们都见过为了功能、动画和动态行为而添加的页面。许多网页清楚地反映了它们设计的时代，因为它们展示了在特定时期流行的行为。总有一天，AJAX 界面、圆角等看起来会像旧的效果，但没有什么比令人困惑和迷失方向的界面更糟糕的了，设计师已经疯了，向只有他或她才能使用或理解的非直观界面添加额外的东西。这些界面可能会令人困惑，尤其是对老年人和有认知障碍的人来说，它们可能完全适得其反，实际上阻止了许多人使用网站的功能。
键盘可访问性、仅鼠标事件和按键映射
在一个简单的onFocus方法之上，还有许多其他的事件处理程序，这是可访问脚本的基础。如果你注意到脚本的这些基础，你会发现你可以开发复杂的网站和应用，这些网站和应用也是高度可访问的。我之前也提到过，用户可能无法使用控件，因为对于只使用键盘的用户来说,onClick实际上会工作得很好(或者模拟回车键的任何其他开关设备)。
我将所有这些设备归入键盘可访问的范畴。这是因为你可以调用一个脚本函数(比如onClick)并将它附加到浏览器中具有本机键盘可访问性的控件上(比如一个链接或按钮)，或者你可以通过使用tabindex="0"使<div>可通过键盘聚焦。在幕后，onClick事件实际上被映射到一个链接或按钮的默认动作。该名称具有误导性，因为该事件将在按下 Enter 键时激活。然而，有些情况下你必须要小心一点——特别是当你添加onclick事件到<div>元素的时候。这是因为onclick事件将在文档的自然源顺序内的元素上触发，而<div>元素通常不遵循这一顺序。我在构建 HTML5 视频播放器时特别注意到了这一点(这将在第六章中出现),因为在 Firefox、Safari 和 Chrome 中onclick事件不会从键盘上触发。(IE 9 不支持<video>元素。)
在你的项目中，考虑用一些键盘友好和可访问性友好的事件处理程序来映射一些更常用的仅使用鼠标的事件可能也是一个好主意，比如那些在表 3-1 中概述的事件处理程序。
在构建 JavaScript 控件时，如果需要，可以提供两个事件处理程序，以确保鼠标和键盘都可以使用它们。当我们构建一个可访问的 HTML 5 播放器时，你会在第六章中看到一个这样的例子。
为了通过键盘触发一个行为，有时您可能需要编写您想要触发事件的实际按键的脚本。一些最常用的是空格键和回车键。你必须小心使用像onkeypress这样的事件处理程序，因为不管用户按下哪个键，它都会触发。所以如果你指的是一个特定的键，最好定义一下。
为此，您必须调用一个可以映射到特定功能的按键代码。空格键的键码是 32 ，回车键的键码是 13 。将这些事件类型附加到各种输入键采取以下形式来激活事件。下面的代码示例是为响应按键事件而修改的playVideo函数。它还检查是否是正确的密钥:
function someFunction(objEvent) { if (objEvent.type == 'keydown') { var iKeyCode = objEvent.keyCode; if (iKeyCode != 13 && iKeyCode !=32) { return true; } } someFunction(); }
一个很好的实时工具，给你键码来帮助你找出什么代码代表什么键可以在[asquare.net/javascript/tests/KeyCode.html](http://asquare.net/javascript/tests/KeyCode.html)找到。
注意事项如前所述，注意不要混淆onKeyPress和onClick。onKeyPress(除非映射到特定的键)会在按下任何键时触发一个事件或调用一个函数——所以要小心使用。它可能是一个相当钝的工具。
一些事件处理程序可访问性最佳实践
当我们谈到事件处理程序时，这里有一些通用的良好实践:
- 避免使用
onDblclick方法，因为没有可访问的等效键盘。 - 避免将鼠标坐标映射到事件处理程序。这是行不通的，因为用户不能通过键盘或其他设备在浏览器中移动系统插入符号或关注它们。
- 避免在下拉框中使用
onChange事件处理程序。使用屏幕阅读器的盲人将使用箭头键在下拉框中包含的选项之间上下导航，并通过让屏幕阅读器将它们输出为语音来找出选项。如果将onChange事件处理程序应用于菜单，而不是允许屏幕阅读器用户在其中导航，那么当用户在导航控件时点击箭头键时，该事件将被触发。然后，用户将被带到默认 URL 或列表中默认项目的 URL。通常，允许用户导航菜单项，然后让她按 Tab 键来选择 Go 按钮或类似的 UI 元素会更好。 - 对只能由特定事件处理程序激活的项目进行编码也不是好的做法。应该有一个添加事件处理程序的真实 URL 或链接，所以当 JavaScript 被禁用时，真实 URL 仍然可以获得焦点。
- 不要使用
createEvent()、initEvent()和dispatchEvent()处理程序来给出元素焦点。用element.focus()代替。 - 不要使用命名锚点(
<ahref>元素中的#属性)或内嵌代码，如javascript:window.open()，来控制动态菜单或弹出窗口。如果 JavaScript 关闭，这两种方法都不起作用，因为如果不启用脚本，href元素就无法向浏览器传递指令(就像打开 URL 时通常做的那样)。这是一个本地行为如何被脚本劫持的例子，使得交互完全依赖于新技术(JavaScript ),并且取消了href元素以默认方式运行的能力，因为它没有 URL 来提供焦点。
创建可访问的弹出菜单和内联事件处理程序
使用弹出菜单时，您应该在用户实际启动弹出菜单之前通知用户弹出菜单将被启动，最好是在链接文本本身中包含这些信息(无论您是否使用脚本)。但是，应谨慎使用弹出菜单，并且仅在需要时使用。通常情况下，你并不真的需要这么做。在下面的例子中，即使关闭了 JavaScript，用户也不会孤立无援，仍然可以访问有用的页面:
<p> Here is a my <a href="http://www.myusefulpopup.html" target="_blank">really interesting and useful pop box [Opens in new Window] </a></p>
为了确保您的popUp函数适度降级，请使用真实的 URL(如前面的示例所示)。
以下示例调用一个名为popUp的函数，它采用如下所示的一般形式:
<script type="text/javascript"> function popUp(X) { window.open(X); } </script>
以下是内联示例(这些示例不是最佳实践，但在此用于说明目的):
<a href="http://www.myusefulpopup.html" onclick="popUp('http://www.myusefulpopup.html'); return false;"> Here is my really interesting and useful pop box [Opens in new Window] </a>
这似乎是职能的重复，事实也的确如此。您可以使用 JavaScript 来简化它，只需指向它所附加的元素:
<a href="http://www.myusefulpopup.html" onclick="popUp(this.getAttribute('href')); return false;"> Here is my really interesting and useful pop box [Opens in new Window] </a>
或者您可以使用 snazzier 版本:
<a href="http://www.myusefulpopup.html" onclick="popUp(this.href); return false;"> Here is my really interesting and useful pop box [Opens in new Window] </a>
需要记住的一点是,href值是一个真实的 URL，所以当脚本关闭时，它仍然可以工作。这些是内联脚本或者包含在代码中的脚本的例子。最好将脚本放在一个单独的文件中，就像处理 CSS 一样，然后在头文件中指向该文件，引用 id、引用类名，或者像 JavaScript 允许的那样搜索元素 id 和类型。
注意脚本的“返回假”位阻止事件触发。当您有许多事件处理程序，并且希望嵌入它们并以更细粒度的方式控制它们的行为时，这很有用。不希望事件传播？然后在事件处理程序中使用“return false”。这就给浏览器发送了一个大大的“不要激活这个”标志。记住，窗口对象有一个open()方法，用于确定特定的特性。它采用以下一般形式:
Window.open(url, name, features)
使用 TabIndex 和更高级的聚焦技术
允许任何元素获得键盘焦点的最常见方式是为元素设置一个tabindex值。tabindex属性可以取几个值，确保它获得焦点的一个常见方法是将0或-1添加到属性(tabindex="0"或tabindex="-1")中。然后给出焦点的一个常见方法是使用element.focus()方法。这允许键盘用户通过箭头键导航。
在<div>元素上使用tabindex="0",如下面的代码示例所示，这意味着<div>可以在正常的页面项目跳转过程中获得焦点:
`
//Some content here
