HTML5-可访问性高级教程-全-

HTML5 可访问性高级教程（全）

原文：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 语法

HTML Syntax Document

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属性，它现在有以下新值:
- tel
- search
- url
- email
- datetime
- date
- month
- week
- time
- datetime-local
- number
- range
- color

这些新的输入类型通过浏览器提供给用户界面。它们提供了更好、更复杂的表单验证方法，无需调用服务器就可以在客户端完成。在整本书中，我们还会看到许多新的属性。

同样在 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属性允许提示是否可以对内容进行拼写检查。¹

HTML5:可访问性和功能检测

以上是对 HTML5 语言的一些新特性的介绍。正如我前面提到的，在后面的章节中，我们将会看到这些新特性是如何与可访问性相关联的，你可以用它们来做什么来构建可访问的界面，以及一些等待着你的挑战。

坏消息是，许多新的 HTML5 特性才开始被浏览器和辅助技术支持。从可访问性的角度来看，这意味着你可能必须有创造性，以确保你的内容实际工作，而不是采取“在规范中说这样做，所以这意味着它是受支持的”的方法。不幸的是，饼干不会这样碎掉。

此外，该规范并没有完全定义用户体验。(有理由认为这超出了规范的范围；然而，我倾向于另一种方式。)所以必须注意以一种实用的方式应用代码，以支持最大范围的用户。这就是你读这本书的原因，对吗？

好消息是，对 HTML5 的支持一直在改善，包括浏览器和辅助技术(at)，所以未来是光明的。您可能会发现，您想要使用的一些元素或属性在浏览器或辅助技术(有时两者都有)中得不到很好的支持，在我写这本书时，我非常清楚这一点。在可能的情况下，我将尝试说明如何以一种更老的标记也能支持的方式使用 HTML5，或者以其他可访问性语言如 WAI-ARIA(我将在后面详细介绍)支持的方式使用 HTML5。

注在撰写本文时，浏览器市场的许多大玩家都有很好的 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)的好处时，任何人都不应被抛在后面。根据欧洲委员会，电子包容意味着"包容性的信通技术和利用信通技术实现更广泛的包容目标"。 ² 它侧重于所有个人和社区参与信息社会的各个方面。因此，电子包容政策旨在缩小信通技术使用方面的差距，促进信通技术的使用，以克服排斥，改善经济表现、就业机会、生活质量、社会参与和凝聚力。"

欧盟基本权利宪章

《欧盟基本权利宪章》提到了残疾人:

除其他外，第 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 年电子欧洲。

注好了，害怕了？别担心。这些都包括在这里，只是为了描绘一幅关于可访问性是如何被认真对待的图画。是的，不同国家的程度不同，但有一个必要。所以你应该有动力去做正确的事情。

好消息是，即使你没有完全实现一个“无所不能、无所不能、无障碍上网”的网站，真诚地努力完成你的项目(以我的经验来看)对使用它的残疾人来说意义重大。

这是当人们感到他们被积极地歧视，一个组织只是不在乎会有麻烦。实际上，网站上的“可访问性”声明实际上是一种“不可访问性”声明——如果你定义了你已经做了或没有做的范围，以及正在进行的工作，这是有意义的。如果你在这种事情上开诚布公，它肯定会有助于公开性、透明度和普遍的善意——这总是一件好事。

应对变化和多样性

在许多方面，易访问性原则包含了我们作为设计师的能力，以积极的方式处理变化和开发能够适应多样性的设计。随着年龄的增长，我们中的许多人都会经历一些自然的变化，例如失明和其他身体和精神上的变化。因此，我们执行某些任务的能力和我们需要的设备也可能发生变化。真正理解可访问性包括扩展我们处理这些变化的能力。

设计师努力的成功往往取决于他们能多好地适应不同的用户需求。使用新的工具、语言和开发方法实际上只是对我们能力的测试，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:内容必须是可感知的(P)。这一原则适用于所有内容，包括多媒体、视频和音频:
- 为所有非文本内容提供文本替换。
- 为多媒体(如字幕视频、音频描述等)提供同步的替代方案
- 信息和结构必须与表示分开。
- 使前景信息与背景易于区分(例如，具有良好的颜色对比度)。
原则 2:界面元素必须是可操作的(O):
- 所有功能必须可以通过键盘操作。
- 用户必须能够控制他们的阅读或互动的限制。
- 用户必须能够避免因光敏性而导致癫痫发作的内容。
- 为用户提供查找内容、自我定位和导航的机制。
- 帮助用户避免错误，并在出现错误时更容易纠正。
原则 3:内容和控制必须易于理解(U):
- 使文本内容具有可读性和可理解性。
- 使内容的位置和功能可预测。
原则 4:内容应该足够强大，能够与当前和未来的技术协同工作(R):
- 支持与当前和未来用户代理的兼容性。
- 确保内容是可访问的，或者提供可访问的替代方案(摘自 WAI 简介，2010 年)。

我希望你能看到大部分建议都很实用。事实上，通常是“只要满足特定的标准，你如何到达那里并不重要”，就像刚刚概述的那样。

html 5 可访问性的挑战

正如你所看到的，有很多变化正在发生！正如任何新的重大变革一样，它可能不会一帆风顺。应对这种变化可能会很困难，因为目标实际上是在移动的。这部分是因为 HTML5 本身仍处于草案阶段。然而，它已经达到了它的第一个信用证(或最后一个电话)征求意见。因此，它正接近稳定状态。

这给编写 HTML5 带来了一些挑战，因为它在浏览器和 AT 中的支持才刚刚开始。然而，当浏览器实现它们时，AT 技术也随之而来。发生这种情况是因为供应商可以看到某些功能正在被使用，因此他们会选择支持什么以及这将如何影响用户体验。最终，好消息是，随着 HTML5 的出现，工具包得到了极大的扩展，尽管当涉及到如何标记 web 项目时，您可能会经常面临选择过多的问题。

正如我前面提到的，HTML 4 带来的语义盛宴非常令人惊叹。

结论

在这一章中，我向你介绍了无障碍网页设计的奇妙世界，并让你感受到了一些即将面临的挑战。会有起伏，但它真的可以很有趣。你不会总是把事情做对，但是努力去做要走很长的路。在下一章，我们将更详细地研究残疾以及一些更常用的辅助技术。

二、了解残疾和辅助技术

在本章中，我们将了解一系列不同类型的残疾，以及残疾人使用的一些辅助技术(at)的示例。本章将帮助您更好地理解残疾意味着什么，以及残疾如何改变 at 用户使用网页内容的方式。

了解你的用户

对于试图构建易访问网站的开发人员来说，最困难的事情之一是成功地理解用户的需求。你应该从几个不同的角度考虑潜在的需求。首先，你必须考虑用户的功能需求，比如他们在使用网站时希望完成的任务。这对网站所需的功能有着明显的影响，也影响着您应该对信息架构采取的方法。

然后是你的观众将要使用的设备。暂且不谈，随着智能手机使用的增长，我们许多人现在都在移动中使用网络，因此移动空间非常重要。

注意在可访问性和移动网络之间有着非常紧密的映射。你为移动设备创建内容的许多开发实践对可访问性也非常有益！

都是我，我，我和一些人！

许多设计师有意无意地为自己或朋友建造东西。然而，在过去的几年中，设计社区对可访问性有了更大的认识，并且对构建可访问界面的挑战有了更多的关注，这激发了开发人员的想象力。

下面的文字将帮助你理解残疾意味着什么，以及它如何影响你对世界的认知和与世界的互动。这种理解可以用来更好地理解如何适应残疾人的各种互动需求。它并不详尽，也不打算详尽，但它应该是一个很好的介绍。

所以不用担心。让常识成为你的向导，学会接受反馈，即使它最初看起来是负面的。真的很值钱！当一个人在你的网站上执行一项任务时遇到了问题，这意味着有更多的人也遇到了问题，只是没有说出来而已。所以，感激有人脾气暴躁到可以抱怨！通过积极的反应，你将能够提高你的设计项目的质量，同时作为一名开发人员也有所提高。所以是双赢。这可能会有点伤你的自尊，但你会克服的。

我们将在第九章“HTML 5，可用性和以用户为中心的设计”中探讨一些以用户为中心的设计技术，但是现在让我们来看看一些不同的残疾类型。

失明概述

失明有多种程度。人们通常认为盲人什么也看不见，但事实往往并非如此。盲人也许能辨认出一些光、形状和其他形式。

我的一个朋友实际上视力很好，但他被登记为法定盲人，因为他有严重的阅读障碍，这使他功能性失明，因为他的状况造成了认知混乱。所以有很多有趣的边缘案例。

也有理由认为一个人必须被正式定义为有残疾。这些原因包括获得国家援助、福利和其他服务的资格。

例如，在美国，根据社会保障法，如果符合以下条件，则被视为盲人:

使用矫正镜片后，他的好眼的中心视觉敏锐度为 20/200 或更低¹

在英国，Snellen 测试是一种测量视敏度的常用方法，通过使用不同大小字母的图表来评估一个人的视觉锐度。如果一个人正在接受视力障碍的评估，该测试将专门检查

低于 3/60 Snellen 的人(大多数低于 3/60 的人视力严重受损)
那些好于 3/60 但低于 6/60 的人
6/60 Snellen 或以上(该组中视野收缩的人，特别是如果收缩在视野的下部) ²

^①[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%) ³

注意就计算机和网络而言，盲人用户是一个真正从技术发展中受益的群体。文本到语音转换软件的发展使得 AT 的盲人用户可以从事多种工作(并非所有工作),并积极参与各种在线社区。这些都有助于一个人的包容感。

² 定义还考虑了视角或视野。您可以在[www.ssa.gov/OP_Home/ssact/title16b/1614.htm](http://www.ssa.gov/OP_Home/ssact/title16b/1614.htm)了解更多信息。

盲目性和可达性

大多数时候，当人们想到网页可访问性时，他们会想到盲人！如果你认为是这样，那也情有可原——因为盲人用户通常是网上最直言不讳的群体。

然而，网页可访问性并不仅仅与盲人计算机用户有关。当你在网上看到很多关于这两个主题的讨论时，不要陷入只把网页可访问性与盲人和屏幕阅读器联系起来的陷阱。“如果它与屏幕阅读器一起工作，它就是可访问的”这个想法只是部分正确。但这有点像说，“函数 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 视频，该模拟器显示了患有眼疾的人每天都会遇到的一些视觉问题。 ⁴

为了获得更加身临其境的模拟体验，剑桥大学开发了一套非常有用的眼镜，旨在模拟看细节能力的总体丧失，但不打算代表任何特定的眼睛状况。这种类型的损失通常发生在衰老和大多数眼睛疾病，以及没有佩戴最合适的眼镜。剑桥仿真眼镜可以帮助

理解视力丧失如何影响现实世界的任务
同情那些视力不好的人

⁴

评估任务的视觉需求，基于损伤等级 ⁵

身体残疾

有许多种身体残疾可以以不同的方式表现出来，从中度到更严重。身体残疾可能是出生时就存在的情况，也可能是在以后的生活中由于事故而导致的。

一些常见的活动问题包括缺乏对运动的身体控制或不必要的痉挛，如震颤。通常身体残疾的人很容易精疲力尽，并发现许多形式的运动非常累。

说到电脑的使用，身体残疾的人通常不会使用鼠标。当试图与计算机交互时，所使用的设备(开关、操纵杆和其他 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 内容。

⁵

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 onClick methods, 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

通过使用负值(tabindex="-1"),)元素可以获得焦点，但是会从 tab 键顺序中去掉。你为什么要这么做？嗯，您可能有一些小部件，当用户使用它们时，它们会显示功能，因此它们更具可定制性或更能响应用户需求。

//Some content here

一段简单的 JavaScript 将找到 name 元素(在本例中，我使用了 ID ‘some_control’)并调用 focus 方法来完成这一任务:

var objDiv = document.getElementById('some_control'); // Hit me objDiv.focus();

表 3-2 是一个重要的图表，展示了应用了tabindex属性的元素的行为。属性可以接受各种参数，所使用的参数会影响属性的行为。了解何时使用它们以及它们的行为方式非常重要。例如，您可能希望动态地更改控件的行为—有时给它焦点，有时不给它焦点—或者改变项目成为焦点的顺序。

有关这些核心行为的更多信息，请参见[www.w3.org/TR/wai-aria-practices/#kbd_focus](http://www.w3.org/TR/wai-aria-practices/#kbd_focus)。

提示使用负的tabindex="-1"值将从文档源顺序中删除该元素，因此用户不能跳转到该元素。使用tabindex="0"将给予元素焦点，但仍然保持它在文档标签顺序中。

注意当我谈到“Tab 键顺序”或“源代码顺序”时，我指的是元素在文档源代码中出现的顺序。这很重要，因为它准确地定义了链接、按钮和表单控件的焦点，以及它们的顺序。因此，简单地重新排列元素的顺序可以提高网站的可访问性和可用性。

JavaScript 和 WCAG 2.0

在 WCAG 1.0 的第一个版本中(你可以在[www.w3.org/TR/WCAG10/](http://www.w3.org/TR/WCAG10/)找到)，JavaScript 被称为“准则 6”。确保采用新技术的页面能够优雅地转变。”

完整的指南涵盖了与 JavaScript 不完全相关的问题，比如使用 CSS，以及确保文档在样式表丢失的情况下仍然可以阅读——这仍然是个好建议。以下是网页内容可访问性指南 1.0 ¹ 的摘录:

“即使在新技术不被支持或被关闭的情况下，也要确保页面是可访问的。”

这个想法是鼓励内容开发者使用新技术来解决现有技术带来的问题，同时继续确保他们的页面可以在旧浏览器上运行，并为那些选择关闭功能的人服务。

这仍然是合理的建议，值得在你的项目中应用。与 JavaScript 相关的检查点如下:

6.2 确保当动态内容发生变化时，动态内容的对等内容得到更新。[优先事项 1]

6.3 确保当脚本、小程序或其他编程对象被关闭或不被支持时，页面是可用的。如果不可能，请在另一个可访问的页面上提供同等信息。[优先事项 1]
6.4 对于脚本和小程序，确保事件处理程序独立于输入设备。[优先事项 2]
6.5 确保动态内容是可访问的，或者提供替代的演示或页面。[优先级 2]例如，确保触发脚本的链接在脚本被关闭或不被支持时工作(例如，不使用“javascript:”作为链接目标)。如果在没有脚本的情况下无法使用页面，请使用 NOSCRIPT 元素提供一个等效文本，或者使用服务器端脚本而不是客户端脚本，或者提供另一个可访问的页面。

为什么没有 NOSCRIPT？

我已经讨论了前面的大部分问题，在很大程度上，这是一个很好的建议。但是，我不同意关于 NOSCRIPT 的建议。与依赖回退内容相比，使用不引人注目的脚本方法是一个更好的主意。也就是说，构建项目和添加 JavaScript 时，不要破坏用户的体验，因为用户可能出于某种原因无法访问它。与回退内容相比，这种方法将带来更加流畅的体验。有些时候，您可能别无选择，只能使用回退内容，但是通过明智地使用不引人注目的 JavaScript，您可以在很大程度上避免这样做。

我将讨论 Checkpoint 6.2，“确保当动态内容发生变化时，动态内容的等价物也得到更新。[优先级 1]，”稍后，在新的 WCAG 2.0 准则的上下文中，因为自从 AJAX 和异步(客户端)内容更新出现以来，该检查点的含义已经发生了变化，变得更加技术性。

NOSCRIPT 有点像“你没有最新、最流行的浏览器，所以我们把你挡在我们华而不实、很酷的网站之外，让你回到你完全不酷的生活！”你以前收到的那种信息。令人惊讶的是，有人曾认为提供这种居高临下的信息是一个好主意，但你走了。

提示我的朋友 Gez Lemon 在他出色的 JuicyStudio 网站上写了关于 NOSCRIPT 的更好替代方案。而且是的，<NOSCRIPT>在 HTML5 中技术上还是允许的。显然，有人仍然认为<NOSCRIPT>是一个好主意。Gez 在本文中概述了为什么这不是一个好主意:
[juicystudio.com/article/say-no-to-noscript.php](http://juicystudio.com/article/say-no-to-noscript.php)。

关于如何用可访问且不引人注目的 JavaScript 替换 NOSCRIPT 的有趣文章，请参阅 Frank M. Palinkas 关于 Dev 的文章。歌剧在[dev.opera.com/articles/view/replacing-noscript-with-accessible-un](http://dev.opera.com/articles/view/replacing-noscript-with-accessible-un)上演。

WCAG 2.0 的客户端脚本技术

WCAG 1.0 和 2.0 之间的一个很大的区别是，指南的第二次迭代被设计得更加严格可测试。也有很多有用的真实世界的例子供你研究。这里有成功标准的技巧、指南和概要，以及常见失败的列表。

我在这里列出了所有的客户端脚本技术，并为您精选了其中的一些，以便您可以更详细地了解它们。我想让你对它们有一个总体的感觉，它们几乎是按原样发表在这里的。我鼓励你研究这些和这里没有显示的其他内容，你可以在[www.w3.org/TR/WCAG20-TECHS/client-side-script.html](http://www.w3.org/TR/WCAG20-TECHS/client-side-script.html)在线完成。当然，您可以调整它们以适应您的项目。

注意这些脚本技巧与特定的 WCAG 成功标准相关，你可以在网上查看。有些可能看起来有点老了。我在这里包括了一些技术，这样你就可以感受到脚本建议是如何与 WCAG 2.0 相关联的，而不是像 WCAG 的“如何做”指南一样。然而，应该很清楚，这些技术中的许多仍然是实用和有用的。

您会注意到这些例子中的!DOCTYPE是针对 HTML 4 的，但是这里概述的原则同样适用于 HTML 5(因为它只是脚本的宿主语言)。目前 WCAG 2.0 还没有任何 HTML5 测试用例，但它们正在开发中。

以下是客户端脚本技术的列表 ² ，你可以在[www.w3.org/TR/WCAG20-TECHS/client-side-script.html](http://www.w3.org/TR/WCAG20-TECHS/client-side-script.html)网站找到。在本书末尾的附录 A 中可以完整地找到它们中的一部分，它们被包括在内是为了加强我前面提到的一些内容，并介绍一些你会发现有用的新技术。以下所有技术都是根据 W3C 版权政策发布的。感谢迈克尔·库帕(W3C/WAI)的建议和帮助。

以下是客户端脚本技术的完整列表:

SCR1:允许用户延长默认时间限制
SCR2:使用冗余键盘和鼠标事件处理程序
SCR14:使用脚本使不重要的警报可选
SCR16:提供一个脚本，警告用户时间限制即将到期
SCR18:提供客户端验证和警报

SCR19:在 select 元素上使用 onchange 事件，而不改变上下文
SCR20:使用键盘和其他设备特定的功能。
SCR21:使用文档对象模型(DOM)的函数向页面添加内容
SCR22:使用脚本控制闪烁，并在 5 秒或更短时间内停止闪烁
SCR24:使用渐进式增强应用户请求打开新窗口
SCR26:将动态内容插入到文档对象模型中，紧跟在其触发元素之后
SCR27:使用文档对象模型重新排序页面部分
SCR28:使用可展开和可折叠的菜单绕过内容块
SCR29:向静态 HTML 元素添加键盘可访问的操作
SCR30:使用脚本更改链接文本
SCR31:使用脚本更改具有焦点的元素的背景色或边框
SCR32:通过 DOM 提供客户端验证和添加错误文本
SCR33:使用脚本滚动内容，并提供暂停它的机制
SCR34:以随文本大小缩放的方式计算大小和位置
SCR35:通过使用锚和按钮的 onclick 事件使操作键盘可访问
SCR36:提供一种机制，允许用户在静态窗口或区域中显示移动、滚动或自动更新的文本
SCR37:以独立于设备的方式创建自定义对话框

WCAG 2.0 中常见的脚本错误

以下是一些与动态内容和脚本相关的 WCAG 2.0 常见故障:

注意WCAG 2.0 所有常见故障列表可以在这里找到:[www.w3.org/TR/WCAG20-TECHS/failures.html](http://www.w3.org/TR/WCAG20-TECHS/failures.html)。还提供了如何修复它们的建议。

F37:当单选按钮、复选框或选择列表的状态发生变化时，在没有事先警告的情况下启动新窗口，因此未达到成功标准 3.2.2
F42:成功标准 1.3.1 和 2.1.1 失败，原因是使用脚本事件以不可编程方式确定的方式模拟链接
F44:由于使用 tabindex 创建的 tab 键顺序没有保留含义和可操作性，因此不符合成功标准 2.4.3
F50:成功标准 2.2.2 失败，原因是脚本导致闪烁效果，但没有在 5 秒或更短时间内停止闪烁的机制
F52:不符合成功标准 3.2.1 和 3.2.5，因为加载新页面后立即打开新窗口
F54:成功标准 2.1.1 失败，原因是只对某个功能使用了特定于指点设备的事件处理程序(包括手势)
F55:由于在接收到焦点时使用脚本来移除焦点，因此不符合成功标准 2.1.1、2.4.7 和 3.2.1
F59:由于使用脚本在 HTML 中制作 div 或 span 用户界面控件，导致成功标准 4.1.2 失败
F60:由于当用户在输入字段中输入文本时启动新窗口，成功标准 3.2.5 失败
F61:由于通过用户无法从内容中禁用的自动更新完全改变了主要内容，因此不符合成功标准 3.2.5
F62:成功标准 1.3.1 和 4.1.1 失败，因为 DOM 中的信息不足以确定 XML 中的特定关系
F85:成功标准 2.4.3 失败，原因是使用的对话框或菜单在顺序导航顺序中与其触发控件不相邻

注意我不会在这里一一列举(不过你应该在网上查一下)。即使粗略地看一下，也应该有助于您理解它们与前面讨论的几个问题有关，例如使用与设备无关的事件处理程序、使用可访问的表单验证、通知用户内容更新等等。

可访问的 JavaScript 工具包

作为 web 开发人员工具箱的一部分，JavaScript 的使用变得越来越普遍和重要，这个库也随之兴起。JavaScript 库是一堆现成的脚本、小部件和组件，您可以复制和粘贴，或者直接插入到您的 web 项目中。然后，您将在文档的头部分中引用这些脚本在客户机或服务器上的位置。

使用脚本库和工具包是一件喜忧参半的事情。一方面，它可以帮你省去学习大量 JavaScript 的繁重任务；另一方面，这可能是一种痛苦，因为您必须相信您使用的组件是高质量的组件，并且可以被最广泛的受众访问和使用。情况并非总是如此。事实上，这是例外而不是规律。

注意就像所有不是你自己构建的东西一样，当你不熟悉底层架构时，在不破坏你不知道的内部依赖的情况下修改代码会更加困难。话虽如此，较好的软件可以提供良好的文档和内部注释，使它们更容易适应您的需求。

然而，有几个 JavaScript 库在可访问性方面还不错，值得进一步探索。有几个我建议您避免使用，但是我不会在这里明确地提及它们，我将坚持使用那些值得注意的，因为它们在其架构中考虑了可访问性。

注意以下工具包被认为比其他工具包更容易使用的主要原因是因为它们支持并实现了 WAI-ARIA 规范。WAI-ARIA 提供了一个语义工具包，通过辅助技术(如屏幕阅读器)的可访问性 API 来描述小部件和其他脚本控件的功能。在这一章的后面，我们将更详细地研究 WAI-ARIA。

道场(迪吉特)

DIJIT 1.6 是 DOJO 的核心，支持键盘可访问的小部件，为视力受损的用户提供高对比度模式，并增加了对 WAI-ARIA 的支持。小部件的范围包括交互式菜单、对话框、进度条、灯箱等等。

Dojo Explorer: 查看 DOJO 特性浏览器页面，在这里您可以找到所有 DOJO 特性的有用演示。所有的演示都包括它们的源代码，或者是 HTML 标记，或者是 JavaScript，或者两者都有。您可以在[dojocampus.org/explorer](http://dojocampus.org/explorer)访问页面。
DIJIT Accessibility(A11y):您可以在下面的网站上找到更多关于 DOJO 小部件是如何被设计为可访问的、如何支持与设备无关的交互，以及如何为 AT 提供角色和状态信息的信息:[livedocs.dojotoolkit.org/dijit/a11y](http://livedocs.dojotoolkit.org/dijit/a11y)。
DOJO 可访问性声明:要了解完整的 DOJO 可访问性声明以及该工具包与 WCAG 2.0 和 Section 508 合规性的关系，请访问[dojotoolkit.org/reference-guide/dijit/a11y/statement.html](http://dojotoolkit.org/reference-guide/dijit/a11y/statement.html)。

jQuery UI

jQuery UI 框架位于核心 jQuery 工具包之上。一些小部件具有内置的可访问性，并且有许多可访问的插件可以添加到您的项目中。jQuery UI 有一个非常活跃的可访问性团队，支持 CSS3，以及大量的小部件，包括可访问的拖放、选项卡式菜单、可排序的表格、可访问的灯箱和表单验证。

下载 jQuery UI: 要下载 jQuery UI，请转到[jqueryui.com](http://jqueryui.com)。
可访问的 jQuery 插件:要了解所有可访问的插件，请访问[plugins.jquery.com/plugin-tags/accessibility?page=1](http://plugins.jquery.com/plugin-tags/accessibility?page=1)。

流体项目:输液

Fluid Infusion 位于 jQuery 工具包之上，结合了 JavaScript、CSS、HTML 和以用户为中心的设计原则，提供了一个强大的包容性工具包。

以下是一些关于补液的有趣事实:

灵活的标记确保您可以随意更改组件设计，而不必担心破坏 JavaScript 代码。
Infusion 使用一个强大的事件系统来通知您的代码什么时候发生了什么，这样您就可以进一步进行交互。
没有黑盒。输液中的一切都是为了适应您的需要而修改、返工和调整的。
门户、混搭和内容管理系统的理想选择。灌注是完全命名空间的，与其他代码配合得很好。
Infusion 附带了一个轻量级且方便的 CSS 库来帮助你快速充实你的布局。

流畅的“操作”指南

Fluid 附带了一些很好的教程供您入门。更多信息，参见[wiki.fluidproject.org/display/docs/How-to+Guides](http://wiki.fluidproject.org/display/docs/How-to+Guides)。

Fluid Components:Fluid Components 是可重用的用户界面，它消除了在 Web 应用中支持丰富交互的困难。考虑到用户工作流和序列，组件通常比 UI 工具包中熟悉的小部件要大。更多信息，参见[wiki.fluidproject.org/display/fluid/Components](http://wiki.fluidproject.org/display/fluid/Components)。
流体演示:流体演示页面为您提供了一个设计精美的组件“橱窗”。我喜欢它的布局方式，你可以选择一个组件，很容易地看到用来创建它的 CSS、HTML 和 JavaScript。从可访问的拖放，网格重排序系统都是可用的。更多信息，参见[build.fluidproject.org/infusion/demos](http://build.fluidproject.org/infusion/demos)。

注意其他或多或少支持 WAI-ARIA 的工具包是 YUI 库和 GWT (Google Web Toolkit)。还有其他的，支持一直在增长。如果你不确定并且你有一个你喜欢的工具包，直接让公司知道可访问性对你很重要总是一个好主意。所以给他们写封短信，如果你想的话，就参与进来吧！

提示如果你使用 Wordpress，有许多支持 ARIA 的插件是作为 AEGIS 项目的一部分开发的。有关插件的完整列表，请访问[wordpress.org/extend/plugins/profile/theofanis1999](http://wordpress.org/extend/plugins/profile/theofanis1999)。

WAI-ARIA:怎么做！

WAI-ARIA 为开发人员提供了一种方法来描述一些新的导航结构，如树型控件，创建可访问的拖放功能，添加可访问的进度条，以便盲人用户可以(实时)了解下载进度，包括可访问的滑块来更改各种用户输入的值，或修改搜索查询的选择(如在搜索房屋租赁或购买时的最小值或最大值)。

例如，WAI-ARIA 还允许你标记网页中常用的区域，并让你在 at 上使用它们。这些可以是菜单、主要内容、次要内容、横幅信息等等。

提示使用 WAI-ARIA，你可以识别网页的地标和实时区域，屏幕阅读器用户将能够“看到”这些区域，就像他们可以通过标题或链接导航并在页面上弹跳一样。

例如，WAI-ARIA live 区域用于经常更新的页面，如股票行情和聊天记录。JAWS 首选项确保 ARIA 属性值没有设置为 off。如果它是打开的，屏幕阅读器将自动检测是否有更新，并将宣布更新或更改的内容。这真的很有用，因为屏幕阅读器用户在任何给定的时间都不必关注他碰巧浏览的页面的任何部分。

这种不失去焦点并发布实时更新的问题是一个强大而有用的新功能，可以实现更完整的用户体验。此外，值得注意的是，不干扰用户的焦点是可访问 web 开发的一个重要部分，应该注意支持这一点——尤其是在开发大量脚本化的应用时。

提示打破当前焦点的一个常见方法是强制进行不必要的页面刷新。所以尽量减少这些，尽可能在客户端进行更多的表单验证。或者，如果您使用脚本来更改 DOM 并添加新内容，请将此功能包装在一个活动区域中！

实时区域属性

正如任何生活方面的交流(人类之间)，当一个人试图告诉你一些事情或做一些事情时，你不想成为话匣子或粗鲁地打断她。实时区域能够以不会不必要地打扰用户的方式设置中断级别。这些区域可以设置为关闭，礼貌，或主张。大多数情况下，您可能会使用礼貌值，但有时您想对屏幕阅读器用户说，“这真的很重要，您必须马上了解这一点”，因此您会将该值改为 assertive。曾经有一个rude属性用于 live 区域！

将该值设置为礼貌不会打断屏幕阅读器用户。当用户交互出现中断或暂停时，用户将会收到更新通知。将该值设置为 assertive 会立即通知屏幕阅读器用户，当需要用户输入或者发生了需要注意的重要事件时，该设置非常有用。

创建实时区域的原因有很多，其中之一是可以将它们用作实时数据流的容器，如股票市场信息、天气或更新新项目。

注意活动区域也可以用于表单验证或通知用户某个动作已经完成。基本上，任何输入/数据源——无论是 PHP、ASP、JSON 还是 XML——都可以使用。

基本实时区域采用以下形式:

在前面的示例中，ARIA 角色区域被添加到父元素<div>中。这使得它是“活的”ID of "SingleLiveRegion”为您的数据源提供挂钩。使用aria-live="polite"会导致只有当用户完成与网页的交互时才会宣布小工具的更新内容——因此用户在使用屏幕阅读器浏览网页的正常过程中不会被打断。

属性的使用决定了屏幕阅读器是只更新活动区域(应用了Region角色的整个<div>)中包含的部分信息，还是全部信息。

默认行为是 at 不会查看整个区域的内容，因为它假设原子值被设置为false。当同一个Live Region中有几个节点将进行更新时，这种方法很有用，因为它对 at 将宣布的内容提供了更细粒度的控制。

考虑图 3-1 中的例子，它显示了一个股票市场小部件，有五个独立的实时流。用于创建它的代码如清单 3-1 所示。

图 3-1。幻想无障碍生活区

注意有时在代码示例中，我会使用省略号，比如“…]”来表示某个示例中的某些代码是不相关的或者被有意省略了。此外，我没有包括 CSS，因为你可以自己试验。这个例子和后面的例子主要是为了说明使这些模式可访问所需的语义。你可以根据自己的喜好设计它们。

清单 3-1。构建 Fantasy 可访问 Live Region Widget 的语义代码

Multiple Embedded Live Region Table

SomeMarket

(live accessible market data) SomeMarket Ticker

` `

[...]

Market Name	Current Value	Change	Percentage Change
Dow Jones	11644.49	166.36	1.45%
Nasdaq	2667.85	47.61	1.82%
FTSE 100	5466.36	62.98	1.17%

注意清单 3-1 中的代码是一个虚幻的可访问的 live region 小部件，不是因为它不可访问，而是因为股票在上涨。

滚自己的？用咏叹调来标记和描述

Web 开发人员和设计人员通常希望设计他们自己定制的手工组件。这意味着您可能希望设计自己的图形用于您的界面，例如按钮和其他自定义控件。

对于一个视力正常的用户来说，能够看着浏览器就足以理解控件是什么，甚至它是做什么的。一个好的设计有特定的启示，可以直观地引导用户理解该做什么。如果你必须向用户解释它，它可能已经太复杂了！

一个没有视力的人无法在视觉上建立这种联系，除非以某种方式描述这个物体，否则手卷图形或整个部件的身份是未知的。当 AT 的用户激活它时，该用户可以期待什么？因此，描述元素是什么和它的功能是可访问 web 开发的核心，也是将语义正确应用于这些控件的核心。

如果您使用原生 HTML 控件，您应该知道它们具有固有的语义，这些语义用于描述一个元素以及当与 at 一起使用时它将做什么。如果没有，ARIA 是提供这些语义的一个很好的方式。以下是如何使用一些新的 ARIA 属性实现这一点的示例。

您可能对可访问性海报儿童/摇滚明星很熟悉，它是<img>元素的alt属性。这是大多数开发人员在开始学习无障碍 web 开发时要学的第一件事。这是您使用替代文本描述图像的地方。您还可以通过在图形中添加替代文本来描述图像对辅助技术的作用(当它的行为类似于链接时)。描述性图像采用以下形式:

<img src="dir/somegraphic.jpg"alt="Picture of Ruairí bouncing in his bouncer!"> or for functional images of <a><img src="dir/button_graph.png" alt="Submit your personal info"></a>

提示有时候你会想用其他的描述来描述一个手工擀面的元素是做什么的，而不是它看起来是什么样子。稍后我会详细介绍这一点以及 HTML5 中替换文本的使用。

因此，我们已经看到了使用 image 元素的alt属性来为 at 提供一些语义，以理解对象的身份，有时还理解对象的用途。ARIA 扩展了这一思想，并带来了一些强大的新特性。您可以使用这些来描述 AT 的自定义控件的标识和用途，以及其他关系、状态等。

以下是其中的一部分:

这是一种可访问地指向现有元素的方式，该元素标记了当前手工滚动的元素。当你指向一个实际在屏幕上的元素的文本，并且你想给一个元素一个可以被辅助技术识别的名字(比如“按钮”)时，你应该使用aria-labelledby。当你创建定制的控件，并且没有使用具有内在语义的通用真实 HTML 控件时，可以使用它。
Aria-label:当文本不在屏幕上时，这可以像aria-labelledby一样使用。
Aria-describedby:该属性与aria-labelledby非常相似，但旨在描述关于对象的附加信息。如果你创建了一个网页组件(比如一个按钮),并且你想描述这个按钮的用途，或者当它被激活时会发生什么，你可以使用aria-describedby来完成。

可以认为是为辅助技术提供了线索。当一个有视力的人在网页上看一个商品列表时，比如在一个网上商店，她可以在商品的图片、商品的描述和任何控件(比如按钮)之间建立联系。盲人用户不能以同样的方式做到这一点，所以他们依赖这些以编程方式提供的提示。

请考虑下面的代码示例，在该示例中，项的描述在视觉上非常清晰，并且以编程方式进行:

<div> <label for="imei">IMEI Code</label> <input type="text" name="imei" id="imei" aria-describedby="imeidesc"> <span class="cue" id="imeidesc"> International Mobile Equipment Identity: 15-digit code to identify a mobile phone, found by dialing *#06# </span> </div>

要了解这些 ARIA 的新特性，请访问网站 WebA11y:Web Accessibility Adventures， ³ ，那里有一些关于如何用 ARIA 增加按钮文本的好例子。非常感谢 Becky Gibson (IBM)允许我在这里复制她的样本。

在第[www.weba11y.com/Examples/connectionsInvite.html](http://www.weba11y.com/Examples/connectionsInvite.html)页，你会发现各种使用 ARIA 来增加按钮文本的例子。您将找到一组邀请样本，用于联系不同的同事。有一系列接受和拒绝按钮，使用 ARIA 属性的组合对每个邀请重复使用。

不同的 ARIA 方法在下面的每个例子中都有使用和记录，截图显示了 Becky 创建的各种示例，后面是使用的代码:

例 1: 艾米·琼斯的例子使用了一个独立的屏幕外跨度(使用 CSS 声明推到屏幕外，如图图 3-2 所示)来标记按钮。在配套的清单 3-2 中，span元素包含了按钮标签的文本，当按钮获得焦点时，屏幕阅读器会读出该文本。

图 3-2。截图来自 weba11y.com

清单 3-2。一个语音按钮标签

`.offscreen {
position: absolute;
margin-top: -9999px;
}

<button aria-labelledby="invite_1_accept"…>
<span class="offscreen" id="invite_1_accept">accept invitation from Amy Jones
Accept
`

示例 2:图 3-3 和清单 3-3 中显示的绿色账单示例在可视文本之后的按钮元素中使用了一个屏幕外跨度。因此，按钮的可视文本“接受”或“拒绝”在屏幕外文本之前朗读。

图 3-3。【weba11y.com 截图

清单 3-3。 CSS 将描述推离屏幕，但屏幕阅读器会看到它

`.offscreen {
position: absolute;
margin-top: -9999px;
}

<button…>Accept invitation from Bill Green`

例 3:Ima 克隆例使用了aria-label，如图图 3-4 及其后的片段所示。

图 3-4。【weba11y.com 截图

<button aria-label="accept invitation from Ima Clone"…>Accept </button>

提示通知用户的一种优雅方式是在网页中创建一个活动区域，当任一按钮被激活时，该区域就会更新。

需要 ARIA

添加关于必填字段的信息是可访问 web 开发的一个重要部分。关于下面的示例，有几点需要注意:

真的很好做。
它非常防水(正如你将看到的)。
真的很有用。
参见第 1 点。

图 3-5 和清单 3-4 中的例子在每个输入框的文本标签中包含单词“Required”。这意味着一旦屏幕阅读器用户将焦点放在输入框上，就会显示标签的内容，包括控件的名称和关键字“Required”。这也适用于旧的屏幕阅读器，所以它已经是向后兼容的了。视力正常的用户(即使是视力不好的用户)也会看到该字段也是必填的。这比使用星号(*)来表示必填字段要好得多。对于有视觉障碍的用户来说，它们非常非常容易被忽略，在一般的用户交互过程中,“star”的屏幕阅读器输出可能会被忽略。

图 3-5。具有内嵌[必需]文本的基本表单，用于向后兼容

清单 3-4 显示了生成图 3-5 的代码。

提示你可以用 CSS 将输入控件包装在<divs>中，并随心所欲地设计样式。我把它留在这里，这样您就可以专注于对表单的可访问性至关重要的结构化标记。

清单 3-4。带行内[必填]文本的基本表单

Required Delivery Details Form

Title

Your First Name [Required]

Your Last Name [Required]

` `

Email [Required]

Home Phone [Required]

Work Phone

Your Address:1 [Required]

Your Address:2 [Required]

注意你可能想知道为什么我在输入控件上同时有一个id值和一个name值。这是为了向后兼容旧的浏览器，并且不理解id值。虽然你可能会说，“哇，有些人一定是在使用古老的技术。”是的，没错。他们是。

你可以更进一步，添加一些老式的 HTML 可访问性魔法，将一些控件包装在<fieldset>和<legend>中，以添加一些更有用的数据。(参见图 3-6 和清单 3-5 。)这样做有助于屏幕阅读器用户(以及视力正常的人)理解表单控件是如何分组的。当键盘将焦点放在<legend>和<fieldset>元素中的各个输入字段上时，屏幕阅读器就会宣布这种关系。这两个元素也受到较老的 AT 的良好支持，它们使您的表单更加向后兼容和健壮。

图 3-6。咏叹调“必选”示例带<字段集>和<图例>

清单 3-5 展示了如何产生图 3-6 。

清单 3-5。使用<图例>和<字段集>和

Required Delivery Details Form

HTML5 还有一个required属性，我们稍后会看到。是的，应用它和你用 ARIA 做的非常相似。

注意添加行内单词[Required]作为输入框标签的一部分意味着这将由屏幕阅读器(包括一些旧的)在焦点上宣布。同样，当用户代理支持aria-required="true"属性时，这也将被宣布。因此要求使用更新的代理发布两次。添加<fieldset>将意味着字段集的内容将在您浏览的每个项目的焦点上公布。虽然它对前一两个表单很有用，但可能并不需要，或者对于较长的表单来说可能会很烦人。最终，你必须试着判断什么对你的用户最有利——对于残疾人来说，过多的可访问性和良好的用户体验之间是有细微差别的。

想要一个桌面类型的菜单？使用 ARIA 菜单栏

清单 3-6 是一个支持 ARIA 的菜单栏的基本轮廓，其设计看起来和行为类似于你在桌面应用中找到的菜单。

清单 3-6。咏叹调菜单

Menubar test

File
- New
- Open...
- Save
- Save As...
- Print
View
- Undo
- Redo...
- Cut
- Copy
- Paste
Edit
- Bullet List
- Numbered List
- Date
- Order ID
- Supplier

您可以随心所欲地使用 CSS 样式化它，并且您还需要提供一些脚本(使用您选择的库)来为元素提供焦点(例如在菜单中显示和隐藏)并启动您希望它们具有的任何行为。这是一个支持 ARIA 的菜单的框架轮廓。如您所见，它非常简单，因为它是一系列基本的 HTML 列表项，被赋予 ARIA 角色menubar:

<ul role="menubar">

元素被赋予了两个额外的属性:?? 和 ??。我们之前遇到过的aria-labelledby属性，它意味着带有标签的<span>的内容将由屏幕阅读器在焦点上公布——例如，文件、编辑、查看等等。

<li **role="menuitem" aria-haspopup="true" aria-labelledby="OpenFileLabel">**<span id="OpenFileLabel">File</span>

下面的角色menu和menuitem是自然子类，顾名思义:

注意您可以给列表项赋予不同的 JavaScript 行为，方法是给它们唯一的标识符，然后给它们附加一个脚本函数，或者使用编号数组以数字形式给这些节点赋予不同的函数或行为，随您喜欢。以下示例为每个项目提供一个 ID。但是，如果您希望它们以一种通用的方式运行，菜单项应该只接收一个类标识符，该标识符可以作为脚本行为的钩子。

记录地标和咏叹调

大多数网站都遵循一种已经确立的形式惯例(虽然不是大多数，但是很多都是)。这与下面类似:顶部是横幅，导航区域在左侧，内容在右侧，横跨中间。大多数开发人员(优秀的开发人员，使用 CSS 布局页面——我希望是你)会将这些部分包装在一个<div>中，并使用 CSS 定位它们。

一个有视力的人可以看着一页，很快理解每一部分的目的，它们之间的关系，等等。这对没有视力的人来说是不一样的。为了让他们理解每个部分的目的，他们需要描述页面的每个部分或块的目的的语义。HTML 的早期版本没有这种常见布局结构的语义，ARIA 提供了它们。

注意 HTML5 也有一套非常相似的语义，可以让你做和我在这里描述的差不多的事情。

图 3-7 是一个网页设计和布局的例子，就像我刚才提到的那样。请注意，与其他 Groovy 组织的任何相似之处完全是巧合。

图 3-7。 Groovy 时代公司网站

在这里，顶部有一个横幅，左侧有一个导航菜单，页面右侧的主要内容横跨中间。还有一个页脚。

作为一个线框，基本轮廓看起来有点像图 3-8 。

图 3-8。 Groovy Times Inc 线框

WAI-ARIA 现在为 AT 的用户提供了一种方式来描述这些网页内容的用途，就像屏幕阅读器一样。这显示在清单 3-7 中。

清单 3-7。描述章节内容

[...]

你可以看到，通过简单地添加文本role="banner"或role="navigation"或role="main"，你可以很容易地描述这些部分的目的。

注意记住<div>和<span>元素是语义中立的元素。它们没有任何意义，可怜的东西，只不过是空空的钩子——让你随心所欲的密码。当你赋予他们意义时，他们会高兴得无止境。生存危机解除！

您可以使用更多标志性角色，如下所示:

应用:表示页面中的一个区域，它为用户执行一组任务，或者被期望像桌面应用一样运行。它可以是整个页面或页面的一部分。然而,role="application"属性不应该在整个页面上使用。AT 如何处理具有应用角色的部分也有一些问题，因为屏幕阅读器虚拟光标被禁用，屏幕阅读器用户不能按标题浏览、提取链接等等。我将在下一章对此进行更多的讨论。
横幅:正如您之前看到的，这是可以包含徽标或网站标题的部分。
补充:任何单独有意义但支持网站主要内容的部分。
contentinfo: 这可以是版权信息、可访问性声明、页脚等等。这可以被认为是子内容。
主要:文档中的主要内容。
导航:用于导航网站的链接列表。
搜索:网站搜索工具。

注意表单和搜索也有里程碑式的作用。你会注意到它们很好地完成了你所期望的，并且很容易添加到你的页面中。最棒的是，当老版本的浏览器遇到这些 ARIA 代码片段而不理解它们时，它们只是忽略它们，所以它们不会破坏任何东西。松一口气。

本书末尾的附录 B 中包含了更详细的 ARIA 角色和控制列表。如果你想熟悉它们，现在向前看。现在我们来看看 WAI-ARIA，看看它和 HTML5 有什么关系。

WAI-ARIA 和 HTML 5

正如你所看到的，这些角色与 HTML5 中的一些元素和控件相似。您可能希望使用它们的原因是，一些 HTML5 元素可能不被辅助技术支持，而这里概述的许多角色是受支持的。

这些 ARIA 角色中的许多可以与 HTML5 元素结合使用，作为一种使它们向后兼容 AT 的遗留版本的方式。此外，当浏览器遇到 HTML5 控件和 WAI-ARIA 的组合时，通常 ARIA 控件将胜过 HTML5 控件，并由浏览器呈现，而不是 HTML5 元素的本机功能。

注意当 ARIA 被添加到任何一种宿主语言中时，它就胜过了宿主语言的语义。一般来说，添加 ARIA 功能会覆盖附加到元素的默认语义。前面的地标示例没有本地语义。通过添加一些，你赋予它们意义。快乐的日子。

WAI-ARIA 还有其他状态和属性，它们可以与您之前看到的更具描述性的角色结合使用，以更全面地描述控件的当前状态。举一个简单的例子，这可以描述一个复选框是被选中还是被取消选中。你会从我们在本章中讨论的内容中认识到一些状态和属性，但是我把它们全部包括进来，这样你就能感受到 ARIA 有多灵活。以下来自 W3C 的示例经许可使用。

当与事件处理程序和侦听器结合使用时，下列状态和属性可用于创建复杂的 Web 应用。

aria-activedescendant:标识复合小部件的当前活动后代。
aria-atomic:指示辅助技术将基于由aria-relevant属性定义的变更通知来呈现全部或部分变更区域。查看列表中相关的aria-relevant属性。
aria-autocomplete:表示是否提供用户输入的完成建议。
aria-busy (state):表示当前是否正在更新一个元素及其子树。
aria-checked (state):表示复选框、单选按钮和其他小部件的当前选中状态。参见该列表中相关的aria-pressed和aria-selected属性。
aria-controls:标识其内容或存在受当前元素控制的元素。参见该列表中相关的aria-owns属性。
aria-describedby:标识描述对象的元素(或多个元素)。
aria-disabled (state):表示元素可感知但被禁用，因此不可编辑或不可操作。参见该列表中相关的aria-hidden和aria-readonly属性。
aria-dropeffect:表示在拖放目标上释放被拖动对象时，可以执行哪些功能。这允许辅助技术向用户传达可能的拖动选项，包括应用是否提供了弹出菜单选项。通常，拖放效果功能只能在抓取对象进行拖动操作后提供，因为可用的拖放效果功能取决于被拖动的对象。
aria-expanded (state):指示该元素或其控制的另一个分组元素当前是展开还是折叠。
aria-flowto:识别内容的替代阅读顺序中的下一个元素(或多个元素),根据用户的判断，该替代阅读顺序允许辅助技术覆盖文档源顺序的一般默认阅读顺序。
aria-grabbed (state):表示拖放操作中元素的抓取状态。
aria-haspopup:表示该元素有一个弹出上下文菜单或子级菜单。
aria-hidden (state):表示作者实现的元素及其所有后代对任何用户都是不可见或不可感知的。参见该列表中相关的aria-disabled属性。
aria-invalid (state):表示输入的值不符合应用预期的格式。
aria-label:定义一个标记当前元素的字符串值。参见该列表中相关的aria-labelledby属性。
aria-labelledby:标识标记当前元素的元素。参见该列表中相关的aria-label和aria-describedby属性。
aria-level:定义结构中元素的层次级别。
aria-live:表示一个元素将被更新，并描述用户代理、辅助技术和用户期望从活动区域得到的更新类型。
aria-multiline:表示文本框是接受多行输入还是只接受单行输入。
aria-multiselectable:表示用户可以从当前可选后代中选择多个项目。
aria-orientation:表示元素和方向是水平还是垂直。
aria-owns:标识一个元素(或多个元素),以定义 DOM 元素之间的可视、功能或上下文父/子关系，其中 DOM 层次不能用于表示该关系。参见该列表中相关的aria-controls属性。
aria-posinset:定义一个元素在当前列表项或树项集中的编号或位置。如果集合中的所有元素都出现在 DOM 中，则不需要。参见该列表中相关的aria-setsize属性。
aria-pressed (state):表示切换按钮的当前按下状态。参见该列表中相关的aria-checked和aria-selected属性。
aria-readonly:表示元素不可编辑，但可操作。参见该列表中的related aria-disabled属性。
aria-relevant:表示辅助技术将在实时区域内接收到哪些用户代理变更通知(添加、删除等)。参见该列表中相关的aria-atomic属性。
aria-required:表示在提交表单之前，需要在元素上进行用户输入。
aria-selected (state):表示各种小工具的当前选中状态。参见该列表中相关的aria-checked和aria-pressed属性。
aria-setsize:定义当前列表项或树项集中的项数。如果集合中的所有元素都出现在 DOM 中，则不需要。参见该列表中相关的aria-posinset属性。
aria-sort:表示表格或网格中的项目是按升序还是降序排序。
aria-valuemax:定义范围小工具的最大允许值。
aria-valuemin:定义范围小工具的最小允许值。
aria-valuenow:定义范围小工具的当前值。参见该列表中相关的aria-valuetext属性。
aria-valuetext:为范围小部件定义了aria-valuenow的可读替代文本。

WAI-ARIA 和大白鲨

表 3-3 概述了像 JAWS 这样的主要屏幕阅读器目前是如何支持提到的许多角色和状态的。请注意，这很容易发生变化。表 3-3 是说明性的，因为出版时间可能会变得更好。屏幕阅读器对 WAI-ARIA 的支持一直在提高。一些屏幕阅读器，如 JAWS、NVDA 和 VoiceOver，已经对 ARIA 提供了高级支持。

咏叹调指出

合理的通用原则同样适用于 ARIA 状态，如表 3-3 中适用于角色。

注表 3-4 中的列表省略了一些状态，如与拖放相关的状态。

表 3-4 提供了 JAWS 识别的状态列表。

版权自由科学，经许可使用。

使用颌和界标

JAWS 将宣布您定义的 ARIA 地标的类型。它还为屏幕阅读器用户提供了使用界标导航页面的能力，就像他们通过标题或链接在页面上跳来跳去一样。

您可以使用分号和 SHIFT+分号快速导航键到达页面上的下一个和上一个地标。此外，按 INSERT+CONTROL+分号应该会弹出一个对话框，其中包含一个地标列表，屏幕阅读器用户可以使用箭头键来导航。

JAWS 支持以下标志性角色:

应用
旗帜
补充的
内容信息
形式
主要的
导航
地区
搜索

辅助拖放

JAWS 还支持 ARIA 拖放属性aria-grabbed和aria-dropeffect。这些可以被添加到对象中，屏幕阅读器将能够通知用户该项目是可抓取的、已抓取的还是可放下的。击键 WINDOWS 键+CTRL+EQUALS 打开 ARIA 拖放对话框，其中显示了页面上可拖放对象的列表。

结论

在这一章中，我们很好地介绍了一些可访问的 JavaScript 技术，以及优秀的 WAI-ARIA 规范。我们讨论了在 web 站点和应用中使用脚本时需要了解的一些基础知识。更先进的技术可以建立在坚实的基础上。你可以构建复杂的脚本化界面，我希望这一章有助于向你展示你的方法和其他东西一样重要。在下一章，我们将看看屏幕阅读技术是如何工作的，在 DOM、可访问性 API 和离屏模型(OSM)方面发生了什么。

四、理解可访问性 API、屏幕阅读器和 DOM

在本章中，我们将更详细地考虑屏幕阅读器是如何工作的，并看看辅助技术(at)用来访问 web 内容的 DOM 和可访问性 API。理解这一点很重要。虽然有些东西看起来有点抽象或学术，这一章对你构建可访问的 HTML5 内容并不重要，但它会有所帮助。从设计上来说，它也很短。

注如前所述，虽然屏幕阅读器不是残障人士访问网络的唯一技术，但它们无疑是最复杂的。此外，技术可访问性支持需求可能是最广泛的。

如果这一章看起来有点棘手，不要太担心；这不是一个容易的题目。我和残疾人一起工作了将近 10 年，当我作为一名 AT 专家工作时，我有着广泛的辅助技术经验。我很幸运地在现有的各种 AT 以及这些技术的无数应用中获得了大量的经验。

从这个经验来看，我可以诚实地说屏幕阅读器是最复杂的，无论是从可访问 web 内容的作者和 groovy 网站的设计者的角度来看，还是从用户的角度来看。屏幕阅读器熟练程度的范围或水平变化很大，从最基本的“页面周围的选项卡”或“点击全部，看看会发生什么”到虚拟光标的复杂使用、各种内容询问等等。像 VoiceOver 这样的屏幕阅读器的出现，及其对手势和转子的支持，使交互变得更加容易，我们将看到更多手势界面的趋势。然而，目前键盘交互模型过于复杂，用户要记住太多的自定义键盘组合。向移动设备的转移也将减少对键盘的依赖，并专注于更自然的输入形式，如手指滑动和其他手势。

我期待着这些技术的未来迭代，其中的技术调解了复杂性并简化了用户体验。我仍然从向屏幕阅读器用户展示如何用 AT 做新事情中获得快感，AT 用户的数字素养水平之低仍然令我惊讶。AT 用户有时抱怨一些网站或内容无法访问，而实际上障碍是用户无法正确使用他们的 AT。AT 的用户需要学习如何最大限度地使用他们的技术。这是一种双赢的方法，因为用户将从该技术中获得更长的寿命，而卫生服务提供商将获得更低的成本。此外，关注本章将帮助你更好地理解屏幕阅读器如何处理你写的代码。

注辅助技术可能非常非常昂贵，实际上是小众技术。这导致了一种创造性的、自己动手的朋克摇滚文化，这种文化将富有想象力的技术应用融合在通常有限的可用资源中，为残疾人提供解决方案。

定义辅助技术下的元素

当你看到网络内容和 AT interaction 的具体细节时，事情就复杂了。这一章让你对各种平台可访问性 API 之间发生的事情有一个大概的了解，并看看动态 DOM 更新和正确应用语义来描述定制控件。

正如我提到的，我至少花了两到三年的时间来掌握屏幕阅读器的实际工作方式，从研究用户交互模型和熟悉 JAWS 击键到理解幕后发生的事情。这只是从屏幕阅读器的角度来看——不要管数据是如何在各种 API 之间转换的！所以，如果你在海上感到有点失落，也不用担心。这一章是我试图用一种我希望几年前有人为我做的方式向你解释事情。

什么是 API？

一个 API 就是一个应用编程接口。这是一个框架或一组规则，提供用任何给定语言编程所需的代码、函数或词汇。API 可以被认为是一个代码库，你用它来告诉软件，比如浏览器或辅助技术，去做一些事情。

例如，浏览器将以 HTML5 编写的 web 内容转换为文档对象模型(DOM)。网页的这个 DOM 与浏览器使用的布局引擎相关联。然后，浏览器从布局引擎和 DOM 获取信息，以支持操作系统(OS)平台可访问性 API。该 API 允许辅助技术监控和查询浏览器向其公开的任何可访问性信息。

什么是布局引擎？

布局引擎是每个浏览器中的嵌入式组件，它在浏览器中显示 HTML、XHTML、XML 或其他此类内容和格式信息，如级联样式表(CSS)。不同的浏览器有自己的渲染引擎，有自己的显示网页内容的规则。比如 Firefox 用 Gecko 引擎，Internet Explorer 用 Trident，Safari 和 Chrome 用 Webkit 渲染引擎，Opera 有自己的渲染引擎叫做 Presto。

什么是可访问性 API？

辅助功能 API 是特定于平台的 API，可在桌面或浏览器中使用，以辅助技术可以理解的方式传达辅助功能信息。您将编写的 HTML5 代码包含标题、按钮、表单控件等元素。然后，这些元素中的每一个都有一个由可访问性 API 平台定义的角色、状态和属性集(以及与其余文档元素的父/子关系)。

以下是一些主要的可访问性 API:

断续器
UIAutomation
苹果无障碍 API
不可访问 2
AT-SPI

注意还有其他可访问 API。例如，如果您正在编写一个 JAVA 应用，并且希望它是可访问的，那么您需要使用 JAVA 访问桥来提供可访问性映射。在 JAVA 中默认是不启用的。

荧幕外的模特(OSM)

在我们更详细地研究 API 本身之前，我们需要后退一点，讨论第一个易访问性模型:离屏模型，或 OSM。它的开发是为了让早期的屏幕阅读器和盲文输出设备能够访问可视桌面和第一个图形用户界面(GUI)。对屏幕外模型的了解将有助于您更广泛地理解这些相关技术是如何交互和表现的。

早期的基于 DOS 的系统，或者命令行界面系统，因为是基于文本的，所以很容易使用。用户输入到系统中的信息，以及系统返回的信息，可以很容易地在内存缓冲区中捕获并合成为语音。这种语音输出是通过使用我在第二章“理解残疾和辅助技术”中谈到的共振峰合成来实现的。文本字符串和数据等字符存储在缓冲区(或内存存储区)中，屏幕阅读器可以轻松地直接访问这些缓冲区，然后以语音形式输出给最终用户。

注这种基本的语音输出被称为 TTS，或“文本到语音”合成。有各种各样的硬件和软件 TTS 引擎。

随着 GUI 的出现，这一切都改变了。然后，控制从通过命令行或基于文本的输入转移到分组为在屏幕上可视显示的相关可选控制(例如菜单和应用控制)，以便视力正常的人能够容易地理解。实际上，用户界面被转换成了屏幕上的图形像素，而不是更容易理解的文本。因此，不容易获得原文。因此，需要一种方法来访问来自绘图调用和窗口信息的信息，然后将这些信息转换为像素并存储在屏幕外数据模型中，以便屏幕阅读器可以访问和读取。让它工作是一个非常复杂的操作。为了处理这种复杂性，并提供一种屏幕阅读器以可访问的方式呈现屏幕内容的方法，开发并实现了离屏模型。这是使 GUI 可访问性所需要的一个缺失的环节。

注关于一段非常有趣的屏幕阅读器历史，我推荐 Richard Schwerdtfeger 的论文《让 GUI 说话》，他是 IBM 辅助功能软件组的 CTO，也是著名的辅助功能专家。Rich 还与杰出的 Jim Thatcher 博士一起工作，他开发了第一个 DOS 屏幕阅读器和第一个基于 GUI 的 PC 屏幕阅读器。你可以在ftp://service.boulder.ibm.com/sns/sr-os2/sr2doc/guitalk.txt拿到这篇论文。

对于基于 GUI 的系统，离屏模型的工作方式是捕获关于要在屏幕上可视化呈现的控件的信息，然后创建一个单独的页面版本(离屏模型——因此得名)。然后，屏幕阅读器与这个 OSM 交互，并使用其内容作为输出最终用户可以理解的语音的基础。

您可以将离屏模型想象成任何给定时间的屏幕快照。正在发生的是一种被称为屏幕抓取或挂钩图形调用的技术。如今，对于桌面系统，操作系统提供了公开和检索这些信息的工具，但是是应用及其用户界面组件通过 API 公开这些信息。

现代编程语言允许使用对象和元素的描述，屏幕阅读器可以通过可访问性 API 锁定这些描述。然后，当用户通过键盘获得焦点时，屏幕阅读器将这些名称和属性作为语音输出给用户。正如我提到的，对于桌面应用来说，维护 OSM 的需求已经减少，但并没有完全消失，在开发人员忽略了标记控件的语义的情况下，它仍然是有用的。因此，OSM 可能仍然会发挥支持作用，为屏幕阅读器提供尽可能多的信息，从而促进更完整的用户体验。

对于一个操作系统来说，让它变得可访问肯定会带来特殊的挑战，但这些挑战或多或少都被克服了，因为操作系统通常设计良好，是一个更封闭的环境类型。这使得像屏幕阅读器这样的应用的设计变得更加容易，因为良好的编程实践，例如正确标记的控件等等，可以直接集成到操作系统中。那么，什么都可以去的世界互联网呢？

注糊涂了？嗯，有点复杂，不用担心。简而言之，OSM 可以被认为是一个内部数据库，屏幕阅读器在内容呈现到屏幕之前访问它。作为一个有视力的人，你看着浏览器，得到一个页面内容和各种控件的图片，包括它们的功能等等。屏幕阅读器只是从与浏览器相同的来源获得这些信息，但它绕过了视觉呈现，使用代码来导航页面内容并将其输出为语音。

屏幕阅读器如何访问网页或应用上的信息？

如今，并不是所有的屏幕阅读器都主要使用 OSM 来与网络交互。OSM 被视为过时的技术。此外，维护一个 OSM 在技术上很困难，对开发人员来说也是一个挑战。例如，当您第一次尝试自己测试网页时，您可能会发现很难理解屏幕阅读器是怎么回事。你会失去你在页面上的位置，或者发现在某些时候很难知道屏幕阅读器的焦点在哪里。(会发生的。)这有助于理解你首先不是直接与浏览器互动，而是与这个第三位互动。

注意在与 Web 交互时，实际上“第三位置”是 DOM 和可访问性 API 输出的组合——以及一些屏幕阅读器的 OSM。当你第一次接触这些东西时，最初认为它们代表着同样的东西会有所帮助。它们并不相同，但实际上结合起来创造了“第三个位置”所以它作为一个抽象概念是有用的——这样你的脑袋就不会爆炸。

前面我们讨论了像 JAWS 这样的屏幕阅读器在与 Web 交互时使用的各种光标。电脑虚拟光标是 JAWS 用来浏览网页的主要工具。该虚拟光标实际上指向虚拟缓冲区中的内容数据库——实际上是 osm 和 API 调用组合的可用内容的缓存。屏幕上可视化内容的缓冲允许 at 用户浏览屏幕内容。因此，虚拟光标代表屏幕阅读器用户的浏览点，当视力正常的用户浏览网页时，它可能与焦点不匹配。

记住视力正常的用户在浏览器中看到的只是 DOM 内容的可视化呈现，由 CSS 样式化。注意，这不适用于插件，如 Flash 内容或 Java 小程序，或者实际上，HTML5 <canvas> API。

为了让这个快照与辅助技术一起工作，或者为了让它被认为是可访问的，离屏模型需要被提供良好的语义代码，如前所述。这意味着对可访问性更敏感的开发人员已经以符合可访问性最佳实践的方式标记了页面标题、列表项、表单控件和图形。当您这样做时，OSM 的内容是结构化的，由良好的语义支持。因此，添加你的<h1>和<li>以及你的表单输入<labels>不仅仅是一个深奥的练习，而是创建一个可访问性架构的重要方式，该架构为辅助技术提供了一个用于导航和理解的结构。

您可能还记得我之前谈到过屏幕阅读器使用的表单模式。像 JAWS 这样的屏幕阅读器使用虚拟光标，这样用户可以通过按 H 键、G 键(对于图形)或 B 键(对于按钮)来导航标题，或者在页面上调出链接对话框。这是可能的，因为虚拟光标已经捕获了击键，将它们用作导航控件。那么当你想在网页上输入一些数据的时候呢？显然，您不能同时使用屏幕阅读器的这些导航功能。

记住这就是为什么有像 JAWS 这样的屏幕阅读器的表单模式。在窗体模式下，屏幕阅读器从使用 PC 虚拟光标切换到直接与浏览器交互。这将禁用虚拟光标，并允许屏幕阅读器用户直接在表单中输入数据。

这种表单模式也给 web 开发人员带来了一定的挑战，因为当开发人员在表单模式下工作时，通过 PC 虚拟光标可以获得的重要数据可能不可用。这些丢失的数据可能是关于如何填写表单的说明等等。在表单模式下，应该注意表单验证和更新屏幕内容，这样屏幕阅读器用户就不会错过您需要给他们的指示或反馈，比如丢失输入数据等等。

简而言之，您已经看到了离屏模型的概述，以及 JAWS 等屏幕阅读器使用的一些光标。接下来，我们将查看 DOM，然后深入探讨启发式方法。

提示记住有些屏幕阅读器根本不使用离屏模式。其中包括用于 Mac 的 VoiceOver 和用于 PC 的 NVDA，这是一款优秀的免费开源屏幕阅读器，可以与屏幕阅读器用户系统上现有的一些语音合成包一起使用，如 SAPI4 或 SAPI5。

什么是 DOM？

DOM 代表文档对象模型，以一种树的形式表示网页或其他类型文档的语义结构。如图图 4-1 所示，网页中的各种 HTML 元素组成了树上的叶子，叶子就是元素节点。

图 4-1。了解创建 DOM 的 HTML】

图 4-1 所示的节点代表了浏览器或辅助技术将会看到的文档的各种结构部分。DOM 还可能提供关于节点的状态的信息。

正如您在图中看到的，您有一个 header，它包含文档的<title>，还有一个<body>，它包含一个作为标题的节点(<h1>)，一个作为段落的节点(<p>，它有一个作为<a>的子节点，还有一个作为无序列表的节点(<ul>，它有三个小小的<li>)。

注在现实中，用户代理，可能是浏览器或某种辅助技术，在构建 web 文档的图片或模型时有几种选择。它可以直接与 DOM 交互，或者使用离屏模型，或者它可以通过平台可访问性 API 获得关于这些不同节点及其状态和属性的信息。我之前提到过一些可访问性 API，比如 MSAA、iAccessible2、苹果可访问性 API 等等。

可访问性 API 是如何工作的？

可访问性 API 充当浏览器、DOM 和 AT 之间的网关或桥梁。为了让辅助技术能够理解 DOM 的内容，需要将这些内容映射到可访问性 API 中的相应角色。API 就像一个过滤器，帮助在任何给定的时间了解 DOM 中发生的事情。实际的 API 做的不止这些，因为它不是完全静态的。它可以促进用户界面组件和辅助技术之间的动态交互。

记住对于辅助技术来说，可访问性 API 就像是操作系统和网络之间的桥梁。

一个 API，比如 MSAA 或者苹果的可访问性 API，允许屏幕阅读器用户知道一个项目何时有焦点以及它的名字是什么。如果该项是一个控件，API 会让屏幕阅读器知道它是什么类型的控件。如果它是一个类似复选框的交互控件，API 会指示它处于什么状态——例如，选中或未选中。

听起来熟悉吗？这是应该的——这正是 WAI-ARIA 的目标，它让您能够向没有任何固有语义的小部件添加这些描述性的名称、角色和状态属性。这也是原生 HTML 控件所做的——它们公开它们的名称、角色等等(在这个阶段，你应该明白了！)传递给可访问性 API，当用户通过键盘给出一个项目焦点时，该信息被传递给 AT。

图 4-2 给出了正在发生的事情的概述，并展示了 DOM 的内容是如何可视化地输出到屏幕和屏幕阅读器的。

注意图 4-2 中的图表有点过于简化，但它的设计是为了概括核心 HTML 代码和屏幕阅读器输出的语音之间的交互。

图 4-2。可访问的 DOM 输出到屏幕和文本语音引擎

以下是上图中项目的描述:

第 1 项:HTML 元素—这些元素构成了 DOM。
第 2 项:DOM—这是辅助技术和浏览器用来构建文档图片的基础，以用户要求的方式呈现给用户。请注意，可视浏览器和非可视屏幕阅读器可以使用同一个核心 HTML 文档。这是相当惊人的，表明普遍接入是一个技术现实。
第 3 项:浏览器渲染引擎—这用于确定 HTML 和 CSS 的组合在浏览器中的视觉呈现方式。
第 4 项:浏览器—这是一个可视的屏幕显示，由浏览器的渲染引擎将 DOM 和 CSS 声明的内容组合在一起。它通常是视力正常的人上网时使用的主要焦点。然而，如果用户看不见，他仍然需要能够访问相同的内容。在更易访问的网页中，页面以分层的方式在浏览器中可视化呈现，例如，根据 CSS 定义的声明、由不引人注目且逐渐增强的 JavaScript 定义的行为，以及提供对辅助技术至关重要的语义的 HTML 或 WAI-ARIA 代码。
第 5 项:可访问对象树和可访问 API—可访问对象树从 DOM 映射而来。这是可访问性 API 被实例化的地方。
第 6 项:屏幕阅读器和离屏模式(OSM)—OSM 由屏幕阅读器维护。这两者之间存在着持续的相互作用。随着 DOM 内容的更新，OSM 的内容也需要更新。屏幕阅读器驱动文本到语音(TTS)引擎，该引擎是诸如 Nuance、ViaVoice、DECTalk 或 Microsoft Speech 之类的应用。

这是屏幕阅读器导航和语音输出的初始模型。但这是全部情况吗？用户交互之类的呢？

图 4-3 提供了一个包含交互模型的更完整的图片，并显示了交互和 TTS 输出。(为了使事情更清楚，我从图中删除了可视化浏览器。)

图 4-3。互动和 TTS 输出——一个动态的、互动的循环

以下是对图 4-3 中项目的描述:

第 1 项:用户通过键盘和语音输出导航或与页面交互—用户代理可能直接使用 DOM，也可能使用 OSM、可访问性 API 中实例化的可访问对象树和 DOM 数据的组合。因此，双向箭头描述了 DOM 中可以触发的事件，这些事件导致页面更新——特别是对于动态 web 内容。
第 2 项:可访问性 API 和 OSM—这些是通过 DOM 提供的，如前一项所述，屏幕阅读器可以直接与 DOM 交互，也可以与每隔几毫秒更新一次的可访问性 API/OSM 交互。
第 3 项:DOM—DOM 响应用户在浏览器中与 web 内容交互时触发的事件。

“无障碍”:电影，共同主演的“启发”

通常，屏幕阅读器需要额外的支持，以使最终用户更容易访问内容。为了做到这一点，屏幕阅读器使用了他们通过 DOM 获得的信息、可访问性 API(你刚刚见过的)和所谓的试探法的组合。这些评估帮助用户在几乎没有信息(例如无法访问的网页)的情况下构建更好的网页图片。

例如，如果一个网页的设计很糟糕，包含的可访问性信息很少(编码很差，等等)，那么就没有什么信息可以传递给屏幕阅读器。接下来发生的是，软件使用一种方法，试图通过猜测(当然是有根据的猜测)在给定的上下文中找到的某些内容可能是什么或很可能是什么来找到尽可能多的信息。这叫做启发式评估。该软件激活一套规则，试图找出什么是什么。该过程可以包括通过查看图像周围的内容来确定图像可能是什么，或者通过查看顶行中包含的第一个项目(可能是标题)来猜测文档中的表格标题可能是什么。这种依靠试探法进行修复的方法很脆弱，容易出错——因此，语义正确的代码很重要。

注意术语“启发式”只是指“一套规则”

DOM 和动态内容的变化

离屏模型也可以认为是一个虚拟缓冲区。这个缓冲区是一个临时的内存存储，包含 DOM 在任何给定时间的快照。当这个页面没有变化时，这个快照是非常静态的，屏幕阅读器可以愉快地询问页面内容，用户不必太担心事情会发生变化。

注意我不是指好警察/坏警察方式的“审问”，而是指严格意义上的用户与网页内容的互动。你可以把这种互动想象成如下的对话:

问:你是什么？答:我是一个复选框。
问:你是检查还是不检查？
我检查过了。

这不像一个好警察/坏警察的例行公事那样激动人心或富有戏剧性，但是你要做什么？

当页面内容动态变化并且缓冲区需要更新时，这种情况就明显不同了(如前所述)。几年前，当 AJAX 作为一种开发方法出现，异步内容更新成为规范时，这是一个明显的问题，这要归功于XHR对象。

注意 AJAX 开发人员将熟悉XMLHttpRequest或XHR对象，它们可以通过减少对服务器的调用来促进更多的客户端功能，并有助于创建更加动态和响应更快的 web 应用。

虽然客户端更新很棒，是一个真正的进步，但 AJAX 或 Web 2.0 应用中的动态内容更新对更注重可访问性的开发人员提出了挑战。开发人员如何让 AT 知道部分页面内容已经更新？如何以一种不引人注目的方式做到这一点？在 WAI-ARIA 出现之前，这非常棘手，因为虚拟缓冲区的更新必须是强制的，用户才能看到 DOM 中的任何变化。现在这已经不是什么大问题了，因为虚拟缓冲区每隔几毫秒就会自动更新一次，所以 DOM 的变化可以更可靠、更快速地传递给用户。

注意对于一些关于这个问题的屏幕阅读器历史，如果你喜欢放松一点，我推荐以下 Gez Lemon 和 Steve Faulkner 在[www.Juicystudio.com](http://www.Juicystudio.com)发表的文章。Gez 和我也写了关于这个主题的文章，并在英国利兹的一次技术会议上提交了一篇论文，会议由大约五个人组成，我们是其中的两个人。所以这个主题确实有广泛的吸引力，哈哈！

欲了解更多信息，请访问 JuicyStudio 网站，查看[juicystudio.com/article/making-ajax-work-with-screen-readers.php](http://juicystudio.com/article/making-ajax-work-with-screen-readers.php)和[juicystudio.com/article/improving-ajax-applications-for-jaws-users.php](http://juicystudio.com/article/improving-ajax-applications-for-jaws-users.php)。

如果你正忙于一些脚本化的网页或应用，重要的是你要把它们开发成可访问的。这些事情是可能做到的，只是需要一些额外的关心和注意。

常用辅助功能 API

以下部分描述了一些最常用的可访问性 API。这些可以在不同的平台上找到，比如 Windows、Mac 和 Linux。有些也是跨平台的。

断续器

MSAA 是较老的老大哥 API，自 80 年代中后期以来一直在 Windows 平台上使用。有一个可访问对象，它是 MSAA 的核心，并且能够传递关于元素的角色、名称、状态和其他值的重要信息。

MSAA 通过向辅助技术对象发送有关程序元素的小块信息来传递信息。AT 帮助用户与应用交互所依赖的四个关键信息是元素的角色(控件做什么)、名称(它是什么)、值(它可以是数值或输入字段的值)和状态(是否选中复选框)。

注意 MSAA 的功能相当有限，不允许更复杂或高级的用户界面控制，它只能向 at 提供相对少量的属性信息。

欢迎来到自动售货机！

随着 Windows Vista 和更新的 Windows 版本的出现，MSAA 本应被 UIAutomation 部分取代。UIAutomation 是一个更复杂、更高级的 API，具有更丰富的对象模型。这个想法是，它将扩大 MSAA 的能力，但改善其缺点。

UIAutomation 将有关用户界面组件的信息以树的形式显示给辅助技术，类似于将 DOM 树暴露给允许 AT 使用 web 内容的可访问性 API 的方式。与组件相关联的任何属性也通过 API 显示给 AT，以及系统事件等等。

该 API 涵盖了一些常见的控件类型，如下拉菜单、组合框、复选框和其他将为 at 交互做准备的控件，以及显示其支持 AT 的功能和交互类型的控件模式。这些控件类型代表不同的功能，并且可以组合起来创建复杂的交互模型和控件。

注意在 MSAA 的介绍中，我说“部分替代”是因为它仍然被广泛用作平台可访问性 API，作为向 AT 公开信息的一种方式。然而，新的 API 在支持新的标记语言如 HTML5 和 WAI-ARIA 方面有很大的潜力。两种 API 都可以访问和共享 Web 和 OS 信息。

IAccessible 2

IAccessible COM 方法是 MSAA 的核心，它能够生成您反复遇到的非常重要的树结构。

记得你开始看到一种模式了吗？它完全是关于文档树，以及树上暴露给 AT 的各种叶子或节点，以及这些节点所具有的任何属性、状态等等。这是 API 可访问性的核心。

虽然 UIAutomation 代表了一个飞跃，它有潜力丰富地描述用户界面组件及其值和状态，但 IAccessible2 是一个替代 API，它扩展了 MSAA 的功能，而不是打算取代它。从版本 3 开始，它就被内置到了像 Mozilla Firefox 这样的浏览器中，并在 JAWS、NVDA、ZoomText(一个流行的屏幕放大程序)、Window-Eyes 等浏览器中实现。

Firefox 浏览器对 IAccessible2 的支持是一个非常有趣的发展，因为 Firefox 成为了许多测试更高级辅助功能的人的首选浏览器，比如刚推出的 WAI-ARIA。因为 IAccessible2 构建于 MSAA 之上，所以与现有的 API 没有冲突，开发人员可以利用对当前角色、状态和属性的支持，通过 API 向 AT 公开重要的可访问性信息。

注意【UIAutomation 和 IAccessible2 都具有跨平台 API 的能力。例如，IAccessible2 也用于 Chrome 浏览器。

苹果无障碍 API

苹果公司开发了可访问的 API，在 OSX 和 IOS 上都可以使用。这个可访问性框架是苹果在 Mac OS X 10.2 中引入的，旨在适应较旧的 Carbon 和较新的 Cocoa 开发者框架。这件事做得相当巧妙。它使用一个可访问性对象,以统一的方式向 Carbon 和 Cocoa 应用传递关于它自己的信息(同样，它的名称、状态、角色属性等等),而不考虑开发它所使用的框架。这些可访问性对象和传递用户界面组件信息的统一方式消除了软件开发的复杂性，并减少了代码分叉等需求。

操作系统附带的标准控件已经非常容易访问。只有当你设计你自己的自定义控件时，你才必须非常小心，并为对象提供名称、角色和(你猜对了)属性。

代码和界面生成器应用使向自定义控件添加辅助功能信息变得容易。

这实际上与应用/软件有关。网络呢？

Webkit 可访问性

Webkit 是支持 Safari 浏览器和许多其他浏览器的渲染引擎。Safari 支持优秀的屏幕阅读器 VoiceOver。从可访问性的角度来看，VoiceOver 完全改变了游戏规则。它拥有优秀、先进的导航和交互功能，一个盲人电脑用户现在可以在众多苹果设备上使用同一个屏幕阅读器。

Safari 背后的 Webkit 引擎为它提供了对许多 HTML5 元素和功能的大量支持(我将在下一章中介绍)，如 HTML5 sectioning 元素、CSS3 web 字体、Web sockets、HTML5 表单验证、HTML5 音频和视频，以及隐藏字幕和臭名昭著的 2D JavaScript 渲染引擎 Canvas。(这个我以后再说。)

注苹果有开源的 Webkit，现在是 Chrome 浏览器背后的渲染引擎，还有 ion 和 Android 浏览器等。尽管 Webkit 已经外包，但这并不意味着 VoiceOver 在其他浏览器上的表现会特别好。并没有。它与 Safari 紧密相连，但 Safari 也是一个很棒的浏览器，所以这是一个双赢的局面。

LINUX 可访问性 API

您应该知道的主要 Linux 可访问性 API 是 AT-SPI，即辅助技术服务提供者接口。这是由 GNOME 项目开发的。UBUNTU 使用这个 API，UBUNTU 是 Linux 的一个优秀版本，为 ORCA 等屏幕阅读器提供了高级别的开箱即用的可访问性支持。

注意UBUNTU 操作系统还具有屏幕放大功能、修饰键(有点像 Windows 中的粘滞键)、语音识别支持和一个名为 Dasher 的有趣应用，它既不需要键盘也不需要鼠标，而是使用停顿功能和眼球跟踪器。它是完全免费的，所以非常值得一试。要查看更多内容并下载副本，请前往[www.ubuntu.com](http://www.ubuntu.com)。

HTML5 和可访问性 API

为了更好地了解 HTML5 如何映射到可访问性 API，我推荐由 Steve Faulkner(paci ello Group)和 Cynthia Shelly(微软)创建的文档。看起来可能有点抽象，但它可以让您很好地了解新 HTML5 元素的可访问性，因为它们需要映射到可访问性 API，以便 at 了解它们是什么、它们做什么以及如何与它们交互。

如文件所述:

所有特性和平台可访问性 API 之间没有一一对应的关系。当 HTML 角色、状态和属性不直接映射到可访问性 API，并且 API 中有一个方法来展示文本字符串时，通过该方法来展示未定义的角色、状态和属性。

IAccessible2 和 ATK 使用对象属性来暴露 API 中不直接支持的语义。对象属性是松散指定的名称-值对，对于在可访问性 API 中没有特定接口的地方公开内容非常灵活。例如，此时，HTML5 header 元素可以通过 object 属性公开，因为可访问性 API 没有这样的角色可用。

对于本身没有对象属性的可访问性 API，找到一个类似的机制或者开发一个新的接口来公开名称/值对是很有用的。在 Mac OS X 可访问性协议下，所有的 getters 已经是简单的名称-值对，并且在任何需要的时候都可以公开新的语义。请记住，这还需要与辅助技术开发人员合作，以获得对新语义的支持。”

注意概述 HTML5/API 映射的完整文本和详细表格可在[dev.w3.org/html5/html-api-map/overview.html](http://dev.w3.org/html5/html-api-map/overview.html)获得。

所以这些都是正在进行的工作。当您阅读本文时，各种 API 到 HTML5 的映射肯定会有所改进。

我在这里包含了一个矩阵的截屏(图 4-4 )，它概述了 HTML5 元素如何映射到可访问性 API，这样你就可以了解它是什么样子了。更多信息可以在刚刚显示的 URL 中找到。

图 4-4。html 5 和 API 映射的屏幕截图

提示如果你想找出任何 HTML5 或 ARIA 控件有什么样的作用，你可以使用几个工具来做到这一点，如 INSPECT32 (Win)或 ACC probe(Windows 上的 MSAA/IAccessible2)。当您关注浏览器中的小部件时，这些工具将让您看到它们如何映射到可访问性 API。

结论

在本章中，您学习了可访问性 API、DOM、屏幕阅读器如何通过可访问性 API 从 DOM 接收信息，以及旧的但仍在使用的离屏模型。在未来的章节中，我们将更多地使用易访问性 API 而不是 OSM。如前所述，屏幕阅读器不是 AT 现有的唯一部分，但它是最复杂的部分之一。在接下来的章节中，当我们继续更详细地研究 HTML5 时，我们在这一章中所涉及的领域肯定会对你更好地理解 at 是如何处理代码有很大的帮助。此外，我希望你能更好地理解为什么你有时可能需要提供一些额外的东西来支持旧的，例如，不使用更高级的 API。

好消息是这都是可行的，只要稍加注意，您就能够构建易于访问的 HTML5 应用，这些应用可以被支持它的新浏览器轻松使用，同时对那些不支持它的浏览器也很友好。

五、HTML5：文档标记的新语义和新方法

在这一章中，你将开始更详细地了解 HTML5 规范，尤其是与可访问接口的开发最相关的方面。有许多新的 API 进行后台客户端/服务器处理和数据存储，可以用于丰富、响应迅速的应用，但您将看到的主要是 HTML5 影响用户可访问性的方面。

您还将看到新的 HTML5 元素和用于定义文档轮廓和新的结构形式的语义。

HTML5:有什么新消息？

HTML 的早期版本是相对简单的文档标记语言。它们允许文档被链接和引用，并为构建内容提供语义以支持小范围的浏览器和平台。这种多样的内容范围很广，从数据表到通过简单链接提供交互的内容(这实际上是 Web 的核心),再到表单控件，以及一些非常简单的媒体——实现了嵌入式图形。

但是真的是这样。这些项目构成了早期 HTML 标记语言能力的基础。聪明的人随后想出了压缩音频和视频的方法，比如使用 Flash、Silverlight、Maccies 的 QuickTime 或 PC heads 的 RealPlayer 等插件(以及这些插件的真正乐趣)。这些技术使得 Web 能够被用作像动画内容和视频这样的富媒体的平台。

注意视频现在是真正的大生意，在美国网飞占所有网络流量的 22-35%(取决于你问的是谁)。因此，交付平台的性质非常重要。是的，网飞是首批采用 HTML5 向客户提供视频服务的公司之一。

HTML 的这些早期迭代被认为远远超出了职责的要求，因为 Web 已经远远超越了仅仅作为文档的页面，进入了应用空间等等。

好了，那么 HTML5 有什么新功能？相当多。以至于 HTML5 完全打破了仅仅是声明性文档标记语言的模式。HTML5 有许多新特性，涵盖了大量令人兴奋的新功能。在许多方面，它的大部分可能看起来不太像 HTML，事实上，这种语言远远超越了它的前辈。HTML5 确实是一项颠覆性的技术。

警告对于任何新的或改变游戏规则的技术，你都必须小心谨慎，采用灵活的试错法。HTML5 的采用方式(至少在某种程度上)是该规范制定了解析规则，为浏览器制造商提供了一个构建浏览器的标准。浏览器内的支持通常是以零碎的方式提供的。随着规范的发展，浏览器供应商可能只实现其中的某些部分。

从可访问性的角度来看，最终结果是浏览器或辅助技术(at)供应商支持或不支持的内容似乎有点武断。例如，CSS2 在浏览器中得到广泛支持绝对需要几年时间。当它最终被支持时，它通常只得到部分支持，这导致了错误和故障(例如“盒子模型渲染不一致”)。在 AT 的世界里也有同样的特性。例如，< table>元素的<scope>属性使得在 HTML4 中创作更易访问的数据表比使用更受支持的<headers>和for/id方法要快得多。然而，对它的支持是如此之少，不幸的是，这种更简单的创作方法不能被依赖。

新的 HTML5 语义

HTML 是一种很大程度上与意义相关联的语言。有些您已经熟悉的控件具有固有的行为(如通过键盘可点击或激活的链接等)，但这些行为是由用户代理(如浏览器)处理的。底层代码提供了一个基本结构，允许核心内容(通常是文本)被广泛的设备消费。这一内容层为“一次创作，发布到多种设备”的模式提供了实用的基础，该模式为电子通信提供了巨大的优势，实现了互操作性，而无需在过多的设备之间进行大量定制。

注意html 5 规范对元素的使用非常严格。

当您想到语义对互操作性和可访问性的重要性时，前面的观察确实有意义。想想我们已经讨论过的关于结构化内容在支持可访问性架构和通过可访问性 API 向 at 传递可用信息方面的重要性。如果你的头还疼的话，我很抱歉，但这一切现在应该清楚一点了。

然而，HTML5 规范中非常明确的“正确的工具用于正确的工作”的规则在野外确实失效了。开发人员几乎只是做他们想做的事情，只要它对他们的目的“起作用”。同样值得注意的是，当涉及到可访问性时,“它看起来不错，很有效，只是不要在引擎盖下看得太近”的概念真的不成立。

这是因为只有当你做一些专家的可访问性审计或真人用户测试时，隐藏在引擎盖下的东西才可能暴露出来。我们将在第九章中更详细地讨论这个话题。

可以说，新规范给出的建议关注的是软件的互操作性，而不是它对最终用户的影响。事实上，该规范试图不定义用户体验，并且在某种程度上存在双重标准。为什么？因为规范的某些方面确实详细地描述了用户体验应该是什么样的。然而，当谈到可访问性时——通常情况下——这并没有明确的描述。

语义忍者

同样值得注意的是，虽然我对一些开发人员对他们代码的态度有点厌烦(“对我来说似乎没问题，所以没问题”)，但如果开发人员拼凑的东西对残疾人有效的话，这实际上对我来说是没问题的。我想我对不适合残疾人和老年人的网络内容有特别的偏见。我之所以提到这一点，是因为对于可能使用 ATs 的残疾人来说，格式良好的代码、严格的验证，甚至语义正确性在积极的用户体验中排在第二、第三和第四位。

理想情况下，这些应该支持可访问性，并且在很多方面都支持——但不是在所有时间和所有情况下。如果良好的格式、验证和语义正确性是可访问性的铁一般的保证，那对所有人来说都是快乐的日子，但事实并非如此。所以不要绝对地思考；当涉及到 HTML5 和可访问性时，有许多相对的考虑。

所以当你读到这里的时候就很清楚了:我完全支持遵守规则，但前提是它们的工作方式不会破坏残疾人的用户体验——或者实际上没有残疾。我不太关心良好编码的规则，良好的格式，或者符合规范的规范大纲，或者你想叫它什么。话虽如此，我并不纵容草率的代码或以任何陈旧的方式设计代码；我只是承认，有时候你必须遵循自己的直觉或有洞察力的经验判断，而不仅仅是规范所规定的。

有些人自称了解可访问性，但实际上他们是规范狂热者，可能是验证吸血鬼。符合任何一种方法都不能保证可访问性、良好的可用性或积极的用户体验。所有这些开发工具真正能做的是表明开发人员在编写符合正式发布的语法的代码时知道她在做什么，但它们不一定在用户代理支持方面考虑用户体验，也不一定在浏览器或 at 上工作。唯一有助于开发人员理解实际情况的是用户测试或熟练使用屏幕阅读器的体验。在这一点上，开发人员自己的测试可能有助于发现什么时候工作或者不工作。这种知识非常重要，因为它基于用户体验的主观现实。

注意好吧，其实格式良好的代码很重要。良好的语义非常重要，但是现实世界的可访问性非常微妙——特别是对于新的内容和元素类型。然而，请记住，一个未编码的&符号(它将抛出一个验证错误)永远不会导致一个不可访问的网页。在网络文档上有一些标题结构，而不是没有，比仅仅确保标题以正确的方式排序要重要得多。

语义禁忌

处理新元素的 HTML5 规范的介绍部分警告不要使用不一致的内容和以不一致的方式使用一致的元素。建议您不要使用不一致的属性值(例子中为"carpet")和不一致的属性(例子中为"texture"),这在 HTML5 中是不允许的。这些工具的用法如下所示:

<label>Carpet: <input type="carpet" name="c" texture="deep pile" /></label>

知道这一点当然很好——不是很有用，但是很好。然而，规范建议下面的代码示例更符合语义，因此可能是有效的 HTML5:

<label>Carpet: <input type="text" class="carpet" name="c" data-texture="deep pile" /></label>

注意我不是在拿地毯的例子开玩笑！可以在[dev.w3.org/html5/spec/Overview.html#elements](http://dev.w3.org/html5/spec/Overview.html#elements)上查看。

好吧，虽然这个例子一开始看起来有点傻，但它不是没有目的的。你可以从中看出语义变得更有意义了。<input type="text" />段是被赋予任意属性的标准输入(class="carpet")。data-texture="deep pile"段会被不了解它的用户代理忽略，这是他们全部！

更严重的是，如果你有一个文档片段可以用来表示一个公司网站的标题，这也是不符合要求的，因为第二行不是一个小节的标题，而仅仅是一个副标题。你可能认为语义有点不确定，你是对的。然而，在早期版本的 HTML 中没有办法定义分组标题之间的关系。您可以看到以下不符合项:

<body> <h1>ABC Company</h1> <h2>Leading the way in widget design since 1432</h2> […]

HTML5 引入了一个<hgroup>元素来帮助定义一个标题在哪里可以有一个直接子标题，比如你在这里看到的:

<body> <hgroup> <h1>ABC Company</h1> <h2>Leading the way in widget design since 1432</h2> </hgroup> […]

当你有一个为你的网站或项目提供一个很酷的标语时，这种代码是很有用的。例如，如果您有一个动物收容所的网站，您可以使用以下代码:

<hgroup> <h1>Animal Sanctuary</h1> <h2>A lifeline for all creatures great and small</h2> </hgroup> ...

图 5-1 显示了一个页面中的清单 5-1 中的代码示例，以及加入一点层叠样式表(CSS)样式后的样子。

清单 5-1。使用<h 组>

`body
{
background-image:url(../img/gray_white_tile2.png);
}

hg

{
   margin: 10px;
   padding: 10px;
   border-radius: 15px;
   background-color: #333;
   height: 80px;
   margin: 20px;
   padding: 15px;
}

h1
{
   font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
   color: #C90;
   background-color: #333;
   margin: 0;
   padding: 0;
   border-radius: 15px;
}

h2
{
   font-family: Century Gothic, sans-serif;
   color: #FFF;
   font-size: 50%;
}`

图 5-1。利用新<组>举例

注前面的例子是一种新的文档布局方法的开始。这是一种更复杂的定义内容和轮廓的方式，在 HTML5 中使用了新的元素，比如<section>, <article>, <header>, <footer>,等等。HTML5 规范警告说，使用脚本会改变许多属性、文本的值，甚至整个文档的结构。您可以很容易地动态实现这一点，这样用户代理就必须更新文档的这些语义，以便正确地表示文档的当前状态。维护文档的语义完整性非常重要，这样互操作性和可访问性也可以得到适当的支持。该规范确实建议作者“尽可能使用声明性替代脚本，因为声明性机制通常更易于维护，并且许多用户禁用脚本。”这是个好建议。

html 5 中的全局属性

以下是可以添加到任何本机元素的常见属性:

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title

您以前见过一些这样的全局属性，例如id(一个元素的唯一标识符，可以用作 CSS 或 JavaScript 的钩子)class(与id相同，只是它可以在许多元素上重用)title(元素的咨询信息)accesskey(一种提供作者定义的快捷键的方式)tabindex(为元素提供连续的键盘焦点)style(添加 CSS)，等等。

注意有了accesskey属性，作者就可以在他们的网页内容中添加快捷的快捷键。这似乎是一个好主意，除非你使用 AT——因为如果你这样做，这些击键已经做了一些事情！作为一名作者，我强烈建议您避免使用访问键，除非您可以找到一些保留键，这些键还没有被大部分 at 使用。顺便说一句，祝你好运。

有许多事件处理程序属性也可以添加到任何 HTML 元素中:

奥纳博特
onblur*
在线播放
在线播放
昂哥
单击事件
上下文菜单
oncuechange
ondblclick(点击鼠标)
忍无可忍
不可忍受
翁德拉贡特
软骨叶
昂格洛夫
ondragstart
羔羊
老化变化
一个提示
统一的
恐怖片*
onfocus*
推理能力
on 无效
叔叔家
有印刷机吗
onkeyup
加载*
onloadeddata
onloadedmetadata
onloadstart
鼠标点下时
鼠标移动
你真大胆
鼠标悬停
是 mouseup
鼠标滚轮
ONP 原因
蒙皮
播放中
onprogress
最新变化
无期
onscroll*
被发现
观察
onselect
昂什
安装
昂松宾
暂停
按时更新
on volume exchange
等待中

注意前面标有星号的事件处理程序可能会改变含义，这取决于它们使用的上下文——在本例中，如果它们用在<body>元素或窗口对象上。

再来点咏叹调吗，先生？

该规范还建议，对于可能需要比当前 HTML5 规范所能提供的更多细节的辅助技术产品，可以为辅助技术产品指定一组注释(ARIA 角色和 aria-*属性)。

我们在前面的章节中已经介绍了 ARIA 的很多内容，但是这里有必要概述一下 ARIA 和 HTML5 是如何一起工作的，因为它们都有本地语义。

这里有一个启发性的引用，直接取自 HTML5 规范:

"下表定义了适用于 HTML 元素的强本机语义和相应的默认隐式 ARIA 语义。第一列中的每个 HTML 语言特性(元素或属性)暗示了同一行第二列的单元格中给出的 ARIA 语义(角色、状态和/或属性)。当多个行应用于一个元素时，必须应用定义角色的最后一行中的角色，并且必须组合所有行中的状态和属性。以下是这一工作方式的详细列表。”¹

表 5-1 概述了强本地语义及其相应的默认隐式 ARIA 语义。

注意在 ARIA 被添加到原生 HTML5 元素的情况下，一般来说，添加的 ARIA 语义将胜过 HTML 并覆盖默认语义。然而，在某些情况下，这不会发生，并且有一些限制适用。还要注意的是，任何元素都可以被赋予表现角色，不管表 5-2 中显示的限制。

其中一些看起来相当复杂和粗糙，乍一看确实如此。然而，最好了解 HTML5 和 WAI-ARIA 等新增语言之间的语义相互作用。正如您之前看到的，这两者有许多相似之处。

内容模型

新的 HTML5 元素的定义方式包括以下信息:

元素所属的类别
可以在其中使用元素的上下文
内容模型概述了应该包含的元素的子元素
元素应该实现的 DOM 接口

注意属性可以有任何字符串值，包括空字符串。有一些限制，但这些一般规则适用。

内容模型概述了元素应该包含的内容。仔细想想，这是有意义的，因为它有助于清晰地勾勒出内容应该如何表现，以及浏览器在遇到某些项目时应该做什么。当您考虑嵌套项应该如何表现时，这也变得更加相关。通常，元素的使用必须遵循其内容模型。

注意当处理强语义和弱语义，或者在某些上下文中“什么胜过什么”的决定时，这可能会有点模糊，比如你可以在表 5-1 和表 5-2 中看到的那些。我提到了对元素进行分组的 HTML 内容的类别，下面是它们的列表:

元数据内容

流动内容

切片内容

标题内容

语法内容

嵌入内容

互动内容

规范中有一个很好的交互式 SVG 图，直观地展示了这些类别之间的关系。更多信息，请访问[dev.w3.org/html5/spec/Overview.html#kinds-of-content](http://dev.w3.org/html5/spec/Overview.html#kinds-of-content)。

元数据内容

元数据内容是概述页面内容的行为或表示的内容。您将习惯使用的是典型的元数据内容，如 JavaScript 和/或 CSS，使用以下元素:

<命令>

六、HTML5 中的图像、富媒体、音频和视频

在这一章中，你将看到如何使用 HTML5 来制作图像和其他富媒体。这一章将介绍一些使图形内容可访问的可靠方法，以及一些你可能不熟悉的新技术。我将介绍用于处理富媒体的其他元素，比如<audio>和<video>，并讨论如何使用这些新元素以一种易于理解的方式呈现音频和视频内容。

就 HTML5 的“新”特性而言，没有什么比新的<canvas>元素更引人注目了。<canvas>是一个 2D 绘图 API，可用于在浏览器中创建一些非常复杂、图形丰富的动画。然而，<canvas>内容确实有一些特殊的可访问性挑战。我稍后会讨论这些。

注而<canvas>的优势在于将图形丰富的内容原生带入浏览器，无需第三方插件。Flash 内容不会消失，因为从可访问性的角度来看，它仍然有比<canvas>.更合适的用途

使图像可访问

网络主要是一种视觉媒介。虽然这是真的，但您已经看到，Web 也是一种令人惊讶的多样化媒体，许多用户，无论能力如何，都可以访问相同的内容并在网上有相似的体验。它在范围上是通用的，因为它支持多种访问模式，而不管能力如何。

太棒了。然而，有时你需要注意一些用户经历的限制，并通过正确应用标记和良好设计的原则尽你所能。

当试图使内容具有可访问性时，使图像具有可访问性通常是 web 开发人员首先要学习的事情之一。学习如何做是非常容易的，所以作为一种介绍性的可访问性技术，它的入门门槛相当低。然而，通常很容易做错或者误解你最初想要达到的目标。

来认识一下无障碍网页设计的典型代表:alt 属性

<image>元素的alt属性(或@alt)是您最常用来提供图形内容的文本替代物。这采用以下一般形式:

<img src="someimage.png" alt="Some text that provides an equivalent description or functional replacement for the image" />

所以就整体结构而言，它相当简单。您有<img>元素，后面是它的source属性和@alt。属性的顺序并不重要——如果您愿意，可以先有@alt,再有src。使用前面的方法将@alt明确地与图像相关联，并且它表示完整的结构。在所示的方法中添加替换文本也绝对不会影响图像的视觉呈现。

注意<img>元素还有一个title ( @title)属性；然而，使用@alt属性通常是提供替代文本的更健壮、更可靠的方式。对于更长的描述，还有@longdesc属性。这些我以后再说。

屏幕阅读器如何处理@alt 文本

当屏幕阅读器将焦点放在网页中的<img>元素上时，屏幕阅读器首先向用户宣布它遇到了一幅图像。它通常通过说出“图像”这个词来做到这一点如果图像有一个@alt值，它将宣布作者在其中包含的任何文本字符串。就这样。

注意 @alt在大多数图形和文本浏览器以及最常用的屏幕阅读技术中都得到了很好的支持。

如果没有一个@alt描述，屏幕阅读器将查看是否有一个title属性，并可能(我说可能是有原因的)宣布它。如果两者都不存在，屏幕阅读器将试图寻找它能找到的任何其他支持信息，通常是通过宣布src属性的内容，这可能给用户一些图像类型或图像目的的指示。

注意当图像不可用或无法加载时，大多数浏览器会在图像应该出现的地方显示一个边框，同时还会显示替换文本。默认情况下，Lynx 等纯文本浏览器会读取替代文本。详见[en.wikipedia.org/wiki/Lynx_(web_browser)](http://en.wikipedia.org/wiki/Lynx_(web_browser))。

例如，假设一个图像是一个按钮，没有替代文本或@title信息。如果文件被命名为 button.png 或其他描述其功能的名字，如 logon.png 或 logout.png 的，这可以帮助屏幕阅读器用户了解按钮的实际用途，即使缺少文本@alt。

注意一般情况下，我描述的情况在没有@alt或者@title的地方会触发所谓的启发式评估。一个启发式是经验法则或评估方法。试探法是各种事物的核心，从学习计算机科学时可能学到的基本逻辑，到更高级的算法设计。不要被这个术语所困扰，只要想想“一套规则”有时，当启发式评估被触发时，屏幕阅读器也会查看网页中周围的 HTML 内容。

另一方面，如果你的图片有一个我称之为可怕的 URL，这是一个内容管理系统(CMS)可能会使用的随机字符串( 12090_IMG.jpg 或类似不透明的东西)，屏幕阅读器将无法理解它。这将给最终用户带来问题，因为当丢失的@alt触发屏幕阅读器试探法时，软件将无法理解内容。它将输出文件的名称，但是如果这是一个长的，随机的文本字符串，它是没有用的。

记住一个好的默认行为是给你的图片起一个描述性的名字，即使你实际上是在应用替代文本描述。

@alt 缺点

因此，看起来似乎@alt属性非常健壮、可靠，而且都是好东西。有什么弊端吗？有一种观点认为，替代文本可能对“每个人”都有用，除了那些使用纯文本浏览器或有视觉障碍并使用屏幕阅读器的用户之外，其他用户也应该可以使用替代文本。虽然这听起来很有道理，也很包容，但我并不是很认同这个观点。当然，在某些情况下，替代文本描述有助于理解，但总的来说，我觉得就它所做的和它所服务的群体而言，它做得很好。这是一个漫长而微妙的讨论，我不需要在这里赘述。可以说，在 HTML5 工作组中，争论的焦点是“你不允许有视力的人访问@alt值，这是对他们的歧视。”对我来说，这种想法充其量是虚假的。一种能很好地满足 80%用户需求的标记语言要比一种不能很好地满足 100%用户需求的标记语言要好。

另一个潜在的问题是对文本大小的限制。从技术上来说，它大约是 100 个字符，但一般来说，很难得到一个关于“太长”到底有多长的明确答案。如果你从一开始就知道你的图像需要更长的描述，有其他方法(如@longest和 WAI-ARIA aria-labeledby)可以替代。

我应该怎么描述？

当开发人员试图为图像提供可选的文本描述时，面临的最大挑战之一就是到底要描述什么。这是一个很大的问题，不幸的是，这个问题通常没有实际意义。事实上，这个区域有点模糊。这可能不太让人放心，但你在这里。一些屏幕阅读器用户确实希望尽可能详细地描述每一件事情，而另一些用户只要能在任何给定的时间获得他们需要的信息就很高兴。更重要的是，当一个网站有一个特定的功能时，许多用户仅仅是为了能够完成他们设定的任务而感到高兴。他们不在乎图形是否被描述，只要他们没有丢失任何核心功能。

我在这里要做的是概述一些我多年来从做网站的用户测试和专家评估中学到的东西。这通常涉及与盲人屏幕阅读器用户以及其他辅助技术(AT)设备的用户一起工作。我将介绍当前关于 HTML5、图像和其他富媒体的可访问性最佳实践的想法。那我就让你自己拿主意了！

描述内容:不要过度

我想传授给你的第一条智慧是“不要做得太过”有时候少真的就是多，而大多数时候，适可而止其实就是适可而止。最初，你可能觉得有必要描述，嗯，一切！这通常是非常不切实际和耗时的。学习保持你的文字描述的相关性和简洁是一门艺术，你需要花一些时间来掌握。有了经验，你会发现什么样的细节是不重要的，最好不要用文字描述图像。

忽略它(第一部分)

如果你真的站在一个用户的立场上，你可能会发现有些情况下你真的不希望一张(或多张)图片被解释。事实上，为了获得最佳的用户体验，您可能希望图像完全隐藏或被忽略。所以在我继续讲下去之前，我应该回答一下我想我听到你问的问题:“我如何把一张图片留在外面？我如何不将它包含在屏幕阅读器输出的内容中？”你可以用几种不同的方法做到这一点，而且它们很容易掌握。

当网页加载时，文档中的所有 HTML 项目都被加载到 DOM 中。显然，这包括所有的图形和其他富媒体。如果你想让一个图形在视觉上呈现出来，但是你想让屏幕阅读器忽略它，最常用的方法之一就是给图像一个空值@alt。这采取以下形式:

<img src="someimage.png" alt="" />

注意@alt的引号之间没有空格。

这对屏幕阅读器来说是一个标志，告诉它忽略这个图像。屏幕阅读器会表现得好像图像根本不存在一样，不会通知用户它的存在。

“我为什么要这么做？”你可能想知道。好吧，如果一个图像纯粹是表示性的，比如你用来设计一个按钮的内嵌图形，你会想把它从屏幕阅读器中隐藏起来，因为它对用户的体验没有任何帮助。当你仔细想想，有很多图像你真的根本不需要描述，因为它们没有增加任何价值。所以 null @alt是一个强大的朋友。明智地使用它，你会发现它真的有助于去除页面中不必要的混乱。

忽略它(第二部分)

隐藏对屏幕阅读器用户没有信息价值的图像的另一种方法是使用级联样式表(CSS)。这一声明采取以下形式:

p {background-image:url('some_bullet.png');}

在这个例子中，您可以将元素名p替换为您想要应用图像的任何元素。URL部分指向您存储想要使用的图像的位置。默认情况下，该属性也是重复的，所以您可能想要设置一个no-repeat，如下所示:

p {background-image:url('some_bullet.png'); background-repeat: no-repeat; }

如果您希望图像在 X 访问上垂直重复，您的代码将采用以下形式:

`body

{background-image:url('some_repeatinggraphic.png');
background-image: repeat-x;
}`

要在 Y 轴上水平重复图像，请使用:

Body {background-image:url('some_repeatinggraphic.png'); background-image: repeat-y; }

您可能会发现您想要使用一些内联 CSS 来呈现您的图像，因此您可能会使用一些<div>或内联<span>元素来充当图像的挂钩。

忽略它(第三部分)

另一种对屏幕阅读器隐藏图像的方法是使用 WAI-ARIA 角色，role="presentation"。它采用如下所示的形式:

<img src="some_prettybutsemanticallyuselessgraphic.jpg" role="presentation" />

然而，我真的不建议这样做——部分是因为前两种方法更好地被当前和旧的用户代理支持，部分是因为使用role="presentation"在支持它的用户代理中有其他与可访问性相关的用途(大多数最新的屏幕阅读器和浏览器都是这样)。例如，如果您希望屏幕阅读器忽略父元素的语义，但不忽略子元素，这种技术就非常有用。例如，您可能需要使用一个表格来包含小部件和控件布局。使用role=“presentation”允许屏幕阅读器忽略用于包含小部件控件的表，但是它允许屏幕阅读器访问子语义(小部件的内容)。一个巧妙的诡计。

此外，请不要向我开枪，或者让长翅膀的猴子攻击我的家——用桌子来布置不是什么可及性禁忌。

不同种类的图像

我刚刚概述了一些对屏幕阅读器隐藏内容的有用技术。

那么如何写出好的替代文字呢？你从哪里开始？首先，有几种不同的图像需要考虑:

视觉上丰富的图像:一般来说，照片、素描、绘画都是视觉内容非常丰富的。例如，考虑一幅美丽的自然风景或一张全家福。很难真正捕捉到这些类型的图像或它们的精神。
图形和图表:这些图形和图表种类繁多，但可以包含非常详细的信息，以及说明各种数据之间的关系。
文本图像:这可以是包含用户不会错过的重要有用信息的图像，或者只是包含样式化的文本的图像。
功能图像:这是具有特定功能的图像，例如用于按钮的图形。
装饰性图像:没有实际功能的图像，只是作为纯粹的视觉点缀有用，比如一个漂亮的项目列表。
图标:用作视觉线索的图像，是链接的一部分。

正如您所看到的，替代描述的用例有许多种，这个列表甚至还没有穷尽！在我们继续之前，我们先来看看 HTML5 中的一些新元素，它们可以与@alt和其他描述图像的方法结合使用。

html 5 在描述图像方面有什么新功能？

描述或注释大量图表、照片和插图的两个新手是<figure>和<figcaption>。它们被用来创建一个单个单元，可以从网页的另一部分指向或引用。这就像在你的 CSS 中指向一个 ID。

图形充当某些图像、图表、插图或照片的容器，它采用以下基本形式:

好的，这就是不穿衣服的样子。要把它打扮的漂漂亮亮的，适合出门，还得加个<figcaption>来完成结构。这基本上是图的标题。

将<figcaption>添加到<figure>的基本结构如下所示:

因此,<figcaption>仅仅是:<figure>内容的标题。

接下来是更详细的例子。我只想概述一下基本结构，并说明在 HTML5 中使用<figure>比使用@alt有一个有趣的优势，因为它代表了一个完整的结构化单元，可以在页面上引用。

用咏叹调描述一个形象——描述者

使用aria-describedby属性是引用页面中元素的另一种方法，它提供了图像的适当描述。

这可能是一个非常有用的方法，因为页面中的现有文本经常可以完美地描述一幅图像。与其复制这些文本，不如以编程方式引用图像的 ID。这样你就在图像和文字描述之间建立了一个明确的联系。

例如，考虑下面的图像。第一张(图 6-1 )是我和我的岳父菲亚克拉在爱尔兰最高的山峰上的照片，该山峰位于克里郡的 Carrauntoohil。这张照片拍摄于 2011 年夏天。

图 6-1。乔希(右)和他的岳父菲亚克拉(左)，在凯里郡的卡劳恩图希尔山顶

如果这张照片被嵌入到一个谈论我们攀登的 HTML5 博客中，在添加图片和描述之前，博客帖子的代码看起来会类似于清单 6-1 中所示。

清单 6-1。一篇 HTML5 博文

my big climb this summer (2011)

Climbing the three highest mountains in Ireland

During the summer of 2011, Fiachra, Dara and I climbed the three highest mountains in Ireland. This was a stupendous day where the challenge of summiting the three peaks of Carrauntoohil, Beenkeragh & Caher was too much to resist!

The Coomloughra Horseshoe

The three peaks are ringed within in a large horseshoe shaped valley and present a very challenging climb even for experienced hill walkers. We also had fantastic views of the MacGillycuddy Reeks from Beenkeragh's high, exposed summit. The weather was also very beautiful and we totally lucked out as we couldn't have asked for a clearer day to see the spectacular views. We walked over Beenkeragh Ridge with its yawning drops and navigated the equally spectacular Caher Ridge, with the Black Valley far below, before descending from Caher into Coomloughra Glen.

Remember to bring water

It was a very hot day and after 4 hours or so we ran out of water! Fortunately we came across some fresh mountain streams in the Coomloughra Glen and could top up our water bottles […]

如果我想在第一段中包含图片，并且我想把这一段作为文本描述，我可以像清单 6-2 中所示的那样编码。

清单 6-2。在帖子中包含一张图片

My big climb this summer (2011)

Climbing the three highest mountains in Ireland

****During the summer of 2011, Fiachra, Dara and I climbed the three highest mountains in Ireland. This was a stupendous day where the challenge of summiting the three peaks of Carrauntoohil, Beenkeragh & Caher was too much to resist!

The Coomloughra Horseshoe

The three peaks are ringed within in a large horseshoe shaped valley and present a very challenging climb even for experienced hill walkers. We had fantastic views of the MacGillycuddy Reeks from Beenkeragh's high, exposed summit. The weather was also very beautiful and we totally lucked out as we couldn't have asked for a clearer day to see the spectacular views. We walked over Beenkeragh Ridge with its yawning drops and navigated the equally spectacular Caher Ridge, with the Black Valley far below, before descending from Caher into Coomloughra Glen.

Remember to bring water

It was a very hot day and after 4 hours or so we ran out of water! Fortunately we came across some fresh mountain streams in the Coomloughra Glen and could top up our water bottles […]

那么刚才显示的代码中发生了什么呢？我使用博客文章的内联文本来描述图像，通过它们的 id 指向 block 的内容。在本例中，我分别给了每个<p>元素一个 IDtext1、text2和text3。对于支持aria-describedby的用户代理(如前一章所述，许多新的屏幕阅读器都支持，那些不支持的只会忽略它)，在图像和描述之间创建一个编程连接意味着一旦图像获得焦点，描述就会被公布。此外，有一些方法可以增强这种基本行为——例如，通过向图像添加一个@alt文本描述，并将其与aria-describedby代码相结合。这看起来有点像清单 6-3 中的代码。(我省略了博文代码的第一部分和最后一部分。)

清单 6-3。增强图像描述

Climbing the three highest mountains in Ireland

** Photo of Fiachra and Josh
standing under the huge cross (over three men high) at the top of Carrauntoohil** **During the summer of 2011, Fiachra, Dara and I climbed the three highest mountains in Ireland. This was a stupendous day where the challenge of summiting the three peaks of Carrauntoohil, Beenkeragh & Caher was too much to resist!

The Coomloughra Horseshoe

This three peaks are ringed within in a large horseshoe shaped valley and present a very challenging climb even for experienced hill walkers. We had fantastic views of the MacGillycuddy Reeks from Beenkeragh's high, exposed summit. The weather was also very beautiful and we totally lucked out as we couldn't have asked for a clearer day to see the spectacular views. We walked over Beenkeragh Ridge with its yawning drops and navigated the equally spectacular Caher Ridge, with the Black Valley far below, before descending from Caher into Coomloughra Glen.

这种方法的有趣之处在于，它为不支持aria-describedby但能理解@alt内容的旧屏幕阅读器引入了向后兼容的元素。像这样处理您的标记通常是一个好主意，因为它涵盖了支持和不支持新特性的用户代理。

支持这两者的屏幕阅读器实际上将通过@alt和aria-describedby元素的内容获得丰富的文本对等物；然而，要知道aria-describedby技术目前只能用于页内描述。因此您不能引用不同网页上的描述。

注意当一个屏幕阅读器用户厌倦了描述或者听够了描述，他可以离开被描述的条目，转到下一个，或者他可以使用他的屏幕阅读器的导航功能。所以用户不必听他不想听的东西——一旦用户移动到一个新的 HTML 元素，屏幕阅读器的输出就会结束。

我应该使用哪种方法？

一般来说，这个决定归结于使用的上下文和什么是最好的描述。机制可能会有所不同，因为您正在寻找各种方式来提供描述，但在您开始之前，有一些因素您需要仔细考虑。为了进一步说明您之前看到的示例或图像类型，我们将讨论以下情况(按照之前列出的项目顺序):

视觉丰富的图像:当照片、图画或绘画等图像具有大量视觉信息时，@alt或<figcaption>可以用作标签，简要描述图像或给出图像的概述。
图形和图表:当图像是富含信息数据的图形或图表时，@alt可以用作描述性标签，给出图形主旨的简要概述。图形和图表是其他方法如aria-describedby非常有用的完美场合。
文本图像:图形设计师可能使用了用户机器上没有的 groovy 字体(在网页设计中很常见，被称为图像替换技术)，而@alt被用作图像的替换。@alt应该清楚地说明样式文本是什么。
功能图像:图像可能有功能，所以你用@alt来描述它做什么，而不是它看起来像什么。
一个装饰性的图像:一个图像可能完全是装饰性的，不需要替代的描述，它需要被隐藏起来。
图标:一幅图像可能被用作视觉线索或图标，并且是链接的一部分。

以下是支持上述用例的一些示例。

第一类:描述视觉上丰富的图像

图像通常包含大量视觉丰富的信息。很难用临床或精确的方式来描述它们。虽然你知道古老的格言“一张图胜过千言万语”，但反过来也是正确的吗？需要一千个字来描述画面吗？这可能有一定的道理。

尽管 WCAG 2.0 建议你为图片提供的文本应该是等价的或者应该替换图片，但实际上这通常是不可能的。至少不是在描述能真正做到画面公正的意义上。想象一下，试图为一幅像“蒙娜丽莎”这样的画提供文本描述。

你可以说，“这是一位带着淡淡微笑的优雅女士，”但你也可以说，“这是一位微微皱眉的优雅女士。”取决于你问的是谁，这两个问题都是正确的，而且都是描述性的。

所以，即使一幅图像非常丰富，你最好不要试图捕捉每一个细节，而是通过有趣的方式使用@alt或<figcaption>来捕捉图像的精神。例如，考虑一下图 6-2 中显示的照片，我认为这很有趣，因为拍摄对象可能是兄弟，除了其中一个是紫色的。

图 6-2。我的小男孩和他的猫头鹰伙伴

这是我儿子 Ruairí和他的大(亮紫色)猫头鹰朋友 Minerva 的照片。如果我将<figure>和<figcaption>与@alt结合使用，下面的描述可能更适合我要说的内容:

Two friends together, Ruairi and Minerva

我在这里所做的是使用@alt作为一种提供更长描述的方式，而<figcaption>仅仅是图像的标题。它们可以用于相互支持，并提供图像的各种类型的信息描述。

我想说的是，有时很难写出一幅图像的有用的文字描述。如前所述，链接到图像的单独描述或使用aria-describedby指向文档本身的描述可能会更好。

好吧，所以前面的照片很简单(虽然很可爱！).让我们考虑一些更复杂的图像，以及如何使用 HTML5 提供文本描述。

想想下面几张我过去作为艺术家的照片。(我指的是“我曾经这样做过”意义上的前世，而不是“前世”意义上的——但我想这是另一天的讨论了！)

图 6-3 是我多年前画的一张黑白钢笔画，名为《创造》。

图 6-3。《创世纪》

如果我把它放在一个在线图库中，并想用另一种文字描述来描述它，我能有效地做到吗？从技术上来说，我可以给它一个文字描述，但我如何传达其完整的视觉冲击或意义？

我可以试着做一些相对简单的事情，比如:

A large bright flaming triangle straddled by a Sun
and Moon. In the centre sits a strange symbol, and there are stars. — Pen and Ink Drawing called ‘Creation’ by Joshue O Connor

我的内容几乎达到了之前提到的 100 个字符的限制，而且——让我们面对它——描述并没有真正做到这一点。

我可以决定采用更详细的方法，使用aria-describedby方法，如下所示:

<figure><img src="josh_drawing_creation.png" alt="A large colourful pen and ink drawing with a cosmic theme of creation" aria-describedby="creation" /><figcaption>‘Creation by Joshue 0 Connor (1993)</figcaption></figure>

然后在我的网页中，我可能会包含下面的段落，我可以将id="creation"分配给它。整个事情看起来就像清单 6-4 中的。

清单 6-4。使用咏叹调的图像描述——描述者

Some Cosmic Artwork by Josh(2011)

Sample of Pen and Ink Drawings

A large colourful pen and ink drawing with a cosmic
theme of creation — ‘Creation’ by Joshue O Connor (1993)

Here is some more background about his artwork for those interested […]

This drawing illustrates the mystery of creation. It shows a large flaming triangle that holds a bright radiating sun at its apex, and a stylised smiling moon sits at its base in opposition. At the heart of the triangle there sits an exploding planet with the ancient Vedic symbol of creation the AUM at its heart. The image sits on a background framed of stars and small spaceships fly by randomly in the distance.

在 HTML 文档中找到的较长描述的例子稍微好一点。这种方法确实给了作者多一点呼吸的空间，也有希望还图像一个公道。是否是合适的描述，是否传达了图像同样的视觉丰富性？你是法官。可以说，图像功能越多，提供合适的替代文本就越容易，模糊性就越小。

最后，我的观点是，你通常不能用文字描述完全取代视觉媒介。但是，您可以使屏幕阅读器用户的用户体验更好。让体验变得更好也可以解读为“不那么可怕”。如果你发现你不知道如何描述某样东西，把图片分解成组成部分，或者找一个可能有帮助的完形视图或概述。如果都失败了，只要给图像一个空值@alt就不会影响用户体验。这是最后的手段，但在我看来，这比什么都不做并触发屏幕阅读器试探法要好。

在我们转向更多功能代码等价物的不那么模糊的水域之前，只是为了说明提供有意义的描述有多么困难，我在图 6-4 “创造的种子”中提供了我的另一幅画你会如何描述这个？另外，向那些知道一些吠陀本体论的人道歉——梵天应该有四个头。是的，我确实有很多空闲时间。

图 6-4。“创造的种子”

这是一个简单的选择。

你可能想知道是否还能使用@longdesc来描述复杂的图像。在撰写本文时，longdesc属性(或@longdesc)已经过时，不再是 HTML5 规范的一部分。@longdesc属性是一种在需要时提供更长的图像文本描述的方式，它已经被更好的技术所取代，比如我之前概述的那些技术。

@longdesc的使用采取以下一般形式:

<p><imp src="some_complexgraphic.gif" alt="a complex image" longdesc="complex_image_description.html" /></p>

如您所见，@longdesc是一种链接到当前页面或另一个页面上的更长描述的机制。说浏览器和 AT 对它的支持很差可能有点过了，但支持肯定不是很好。它在学术界之外也很少使用。对于那些认为它有用的人来说，它是有用的——如果一个元素很好地服务于一个用例，即使它的应用不是完全通用的，我对保留或改进元素功能或在规范中保留一个元素没有问题。但那是我。

然而，它确实有一些优势，尽管 ARIA 很棒，HTML5 也在许多领域取得了进步，但目前都没有提供对@longdesc的全功能替代。@longdesc有一张王牌，它可以用来引用离页 URI，还可以提供结构化内容作为文本描述。不幸的是，它在浏览器中的实现和最终的用户体验往往还有许多不足之处。然而，这可能与其实现有关，而不是不需要一个更长的描述机制。这是 HTML 工作组中的一个热门话题，您可能会发现它正在重新浮出水面。

类型 2:图形和图表

当图像是富含信息数据的图形或图表，难以用简单的@alt描述时，@alt也可以用作一种描述性标签。该标签应给出图表旨在描述的内容的简要概述。

记住图形和图表是使用aria-describedby等方法非常有用的完美场合，尤其是在页面可能包含已经与图像链接的更详细的概述的情况下。

比如考虑图 6-5 。这是我在研究关于包容性设计的专业实践者使用的各种用户测试和评估方法的硕士论文时使用的图表。

图 6-5。测试和评估方法

为了提供图表的文字描述，我将给出图表视觉传达内容的概述。大概是这样的:

<img src="disability_types.png" alt="Most user testing is done with blind and vision impaired people, and the least with Deaf users and people with Dyslexia" />

考虑图 6-6 ，这个图表显示了用户测试的主要好处。有很多视觉信息要传达。在这种情况下，使用aria-describedby当然是更好的解决方案。

图 6-6。用户测试的好处

您可能会发现，链接到网页正文中以更详细的方式概述调查结果的描述会更容易。这里我使用了@alt(作为一个短标签)和aria-describedby的组合来进行更长的描述:

<img src="benefits_of_usertesting.png" alt="Graph outlining the benefits of user testing" aria-describedby="benefit_test" />

然后在 HTML 文件的更深处，我可以有一个段落提供更丰富的描述，以及一些注释:

<p id=“benefit_test”> From this research we can see that practitioners feel some of the main benefit of user testing with people with disabilities is discovering usability issues with the interface, navigation, structure, functionality and so on. User testing as an awareness raising exercise for developers in order to first hand experience the diverse needs of people with disabilities and therefore gaining a greater understanding of how things work from the users perspective, is also an outcome of the research"</p>

对于图 6-7 ，它着眼于用户测试的规模，更容易描述。

图 6-7。测试组规模

<img src="test_sizes"alt="The majority of test group sizes are between 8 12 users." />

这是一个简洁的文本描述，但它完美地捕捉了图表中的视觉信息。有时候少即是多！

类型 3:文本图像

现在我们将处理本章前面提到的情况:图形设计师可能使用了用户机器上没有的 groovy 字体，而@alt被用作图像的替换文本。在这种情况下，@alt应该清楚地说明样式文本是什么。

例如，图 6-8 可以用作灯箱画廊或与吉他相关的图像集的图形标题，其中设计者希望使用特别风格化的字体。

图 6-8。一个图形标题

为了确保图像是可访问的，您可以如下所示对其进行标记:

<h1><img src="guitar_gallery.png" alt="The Guitar Gallery" /></h1>

注意像这样的大多数情况下，你只需在替换文本中镜像图像中的文本。下一个例子说明了为什么这种方法很重要。

图 6-9 是一个你可能在网站上看到的“特价”图片的例子。该图形旨在吸引眼球，并告知用户特价优惠。

图 6-9。图形中的文字

您可以按如下方式标记图像:

<img src="guitar_special_offers.png" alt="Special Offers on all guitars. Ends this Weds" />

如果没有替代文本，一个没有视力的人将不会知道商店正在出售他们的吉他，或者这只是一个限时优惠。也有一些情况下，一个标志可能包含一些文字或代表公司的身份。然后，您应该将公司名称作为替换文本添加到徽标图像中，而不是描述它的外观。假设图 6-10 链接到 HTML5 规范。

图 6-10。html 5 的 logo

你可以这样说，而不是像“新的 HTML5 标志看起来像一个大的橙色盾牌，中间有一个大 5”那样给图像一个替代的描述:

<a><img src="html5_logo.png" alt="For more on HTML5 specification, visit the W3C website" /></a>

这很好地引导我们进入下一种类型的图像，我在上一个例子中提到过:功能图像。

类型 4:功能性图像

当一个图像有一个特定的功能时，你应该使用@alt来描述它是做什么的，而不是它看起来像什么。

想象一下，如果你在你最喜欢的吉他商场网站上看到了图 6-11 中的图片，并且访问它的唯一方式是通过图片本身的链接。

图 6-11。想赢得一把经典吉他吗？让它触手可及，每个人都有机会！

要使其可访问，您可以将其标记如下:

<a href="competition.html"> <img src="win_a_gibson.png" alt="Win a Classic Guitar..Click here to enter" /></a>

注我在一些网站上看到过这类图片，实际上进入比赛的唯一途径就是点击链接。因此，如果链接有某种目的，你可以描述它的目的，而不是它看起来像什么！没有什么比下面的例子更能说明这一点了。

图 6-12 。购买吉他的链接图

图 6-12 展示了一个按钮，顾客将用它来购买吉他。因此，没有必要提供类似以下内容的描述

<a><img src="buy_this_guitar.png" alt="Here is a nice graphic of a Gibson Guitar stylized with some creative Photoshop filters, and using a groovy font called Rosewood /></a>

不要。你只要说它的功能是什么——字面意思，“买这把吉他。”

<img src="buy_this_guitar.png"alt="Buy this Guitar" />

好了，这样好多了！所以坚持按下按钮。你甚至不需要包括像“点击这里”这样的文字，因为这是不必要的。屏幕阅读器将向用户宣布该图形是一个链接，用户将知道如何激活它。

类型 5:纯粹的装饰性图像

图像可能完全是装饰性的，不需要替代描述。为了不触发屏幕阅读器试探法，它需要对 AT 隐藏，因为它不会给用户体验增加任何东西。

您可以通过添加空值@alt来实现这一点，空值的形式为alt=""(在“”之间没有空格)，如下例所示:

<img src="agroovy_but_semantically_useless_graphic" alt="">

我在这一章中已经多次提到这一点，但我将再次强调:明智地使用 null @alt可以增加用户体验，因为它可以用来消除大量的网页混乱。当被问到时，甚至许多有视力的人都会同意，许多网站的图形设计功能很差，有多余的混乱，或者它几乎没有给他们提供他们真正想要的功能！图像通常就在那里，占据空间，在某些情况下，实际上还会碍事。

在可访问性社区中，关于哪些图像应该被描述，哪些不应该被描述的讨论没完没了。一个人的装饰图像是另一个人的艺术。这也取决于屏幕阅读器用户的偏好。有些人可能想要描述很多额外的东西；其他人(我认为是大多数人)很高兴去掉了很多杂乱的东西。

类型 6:图标

图像可以用作视觉线索或图标，也可以作为链接的一部分。图像本身实际上不应该是活动链接，因此应该在图像上使用 null @alt,而可以使用真实的 URL。

在图 6-13 和它的同伴清单 6-5 中，内嵌图像被用作位于真实 URL 旁边的图标。

图 6-13。用作图标的内嵌图像

清单 6-5。内嵌图标代码

当屏幕阅读器将焦点放在刚刚显示的任何一个列出的链接上时，图像被忽略，而<a>元素的内容被公布。

有时你会发现链接功能的重复，图标和真正的链接文本都是可点击的。尽量避免这样做，因为这对屏幕阅读器用户来说是一种痛苦。当他们浏览一个菜单时，他们会得到一个链接的副本。对于一个有视力的人来说，如果图标和旁边的 URL 是活动的可点击链接，用户可以很容易地选择其中之一。图标具有视觉上强化控件目的或以某种方式帮助理解的效果。这种视觉强化就是视觉。

图像颜色对比

除了提供有意义和管理良好的描述，确保您的图像——尤其是文本图像——具有足够的颜色对比度也非常重要。有很好的工具可以帮助你做到这一点，比如 WAT-C 色彩对比分析仪。可以在[www.paciellogroup.com/resources/contrast-analyser.html](http://www.paciellogroup.com/resources/contrast-analyser.html)拿到。

HTML5 和可访问的<视频>和<音频>

HTML5 最大的进步之一是能够在浏览器中播放音频和视频，而不需要任何第三方插件，如 Flash、QuickTime 等。HTML5 视频是一个非常热门的话题。这对作为设计师的你会有什么影响，对用户体验又意味着什么？

HTML5 <视频>，<音频>，还有你

作为一名设计师，新的 HTML5 <video>元素比我们以前做视频的方式有很多优势。不再有繁琐的代码和担心是否使用<embed>或<object>，我希望，作为一个设计师，有一个更有凝聚力的体验。话虽如此，在技术领域中,“进步”通常意味着你用一套全新的技术来替换曾经的技术。不幸的是，尽管 HTML5 <video>真的很棒，并提供了丰富和可访问的(如果做得好)用户体验，但它仍然很复杂。

首先，您仍然需要处理不同浏览器支持的各种编解码器。对于官方支持的 HTML5 编解码器还没有达成共识，所以您有几个选择，您必须进行一些功能检测和巧妙的编码，以确保您为正确的浏览器提供正确的内容。如果只有一两个浏览器就好了，但所有浏览器都在争夺位置，每个制造商都支持(或不支持)自己的各种首选格式，以努力实现他们渴望的全球主导地位。

注整个“苹果不支持 Flash”的姿态是/是一场格式战。

HTML5 <视频>和你的用户

HTML5 视频有能力创造良好的无障碍播放器。这是个好消息。您可以使用本机控件或编写自己的脚本。我将很快向你展示如何构建你自己的无障碍播放器。

您还可以通过一些准备和跑腿工作，为您的电影创建自己的音频描述、说明和字幕。我们还将看看如何做到这一点。

【Flash 怎么了？

Flash 其实没什么问题。从可访问性的角度来看，它有很多优点，包括丰富的 API 和在创作环境中从语义上轻松描述大多数对象的能力。更加数据库驱动的平台 Flex 能够创建一些优秀的、可访问的富互联网应用，供有视觉障碍的人、屏幕阅读器用户等使用。然而，许多开发人员就是不使他们的 Flash 内容具有可访问性。Flex 应用空间略有不同，许多 Flex 组件都有一定程度的开箱即用的可访问性。

该插件是第三方解决方案。它不是浏览器自带的，而且是专有的。然而，它看起来并没有消失。HTML5 并不是进入游戏领域的唯一技术；Adobe 已经有了通过虚幻引擎(UE3)开发 Flash 的计划。现在，您可以在 Flash 环境中玩丰富的 3D 游戏。因此，焦点肯定会从视频平台转移到丰富的沉浸式游戏平台。

Flash 中的可访问性问题

如果您使用的是较新的屏幕阅读器，只需开发人员稍加努力，许多 Flash(尤其是 Flex 内容)都是可以访问的。然而，从可访问性的角度来看，Flash 存在一些实际问题(这可能是因为它不是“浏览器固有的”技术)。最明显的问题是无法使用键盘轻松地切换到 Flash 视频内容，还有一个相当反常的问题是无法切换出来(即使您设法进入了)。具有讽刺意味的是，这在 Internet Explorer 中并不是一个问题，但它确实会影响大多数其他浏览器。解决方法很复杂，因为您必须使用脚本来阻止用户返回。

打造无障碍播放器

在 HTML5 中构建一个可访问的<audio>或<video>播放器是一个大杂烩。构建它们的某些方面确实很容易，但其他方面可能需要很好的脚本知识和一些 CSS 知识。(所需的脚本水平可能会让一些人望而却步，但我建议坚持下去。)可惜在某些方面还是有点棘手。

然而，在许多方面，它并不像听起来那么令人生畏。你如何对待它，你想让它做什么，等等都是需要考虑的重要因素，它们将决定你需要投入多少努力才能得到一个可行的结果。

首先:嵌入式内容有什么新特性？

当您想要在 HTML5 页面中嵌入视频时，可以添加<video>元素。“就这些吗？”我听到你哭泣。“是的，”回答是。

清单 6-6 中的简单代码调用了浏览器中的<video>元素。图 6-14 、 6-15 和 6-16 显示了结果。

清单 6-6。调用<视频>元素

Sample native browser controls

图 6-14。火狐原生视频控件

图 6-15。戏曲原生视频控件

图 6-16。 Safari 本地视频控件

<video>元素有一些属性可以通过 Media Elements API(即将推出)来访问，但仅此而已。

<视频>回退内容

您在<video>元素中包含的任何内容都被视为后备内容。这是将由不支持视频的用户代理看到的内容。你应该仔细考虑你在里面放了什么，这样至少是有用的，而不是粗鲁的(在“你的浏览器不支持这个”或类似的无用信息的意义上)。回退内容可以是一些文本和指向备用可访问版本的链接，甚至是指向不同文件格式的链接列表。给用户一个选择总是好的，但是不要给他们太多的信息。

注意我们在这里讨论的回退内容原则上同样适用于<audio>元素内容。查看[camendesign.com/code/video_for_everybody](http://camendesign.com/code/video_for_everybody)了解如何使用 Flash 视频作为后备内容。

媒体元素 API

因此，您希望在 HTML5 页面中包含一些视频——通过向页面添加<video>元素来实现。<video>元素的公共属性是src, preload, autoplay, mediagroup, loop, muted,、controls, crossorigin,和poster。所有这些属性都非常符合你的期望。具体情况如下:

src属性:src属性是视频或音频文件的来源。如今，利用crossorigin content属性，媒体可以在许多不同的服务器上广泛传播。此属性与不同服务器之间的资源共享有关，是减少分散内容的安全顾虑和问题的一种方式。
preload属性:preload属性有各种与之相关的关键字或状态。这些是none, metadata，和auto。preload属性决定了浏览器在页面加载时如何在后台加载(或不加载)源材料。
poster属性:poster属性对于在等待用户输入时显示合适的图像非常有用，这样用户在点击播放之前就不会看到空白屏幕。它实际上是一种未来的海报。
mediagroup属性:mediagroup属性用于将几个音频或视频元素或轨道分组在一起，这对于视频和音频的播放列表很有用。
controls属性:这是一个布尔。它告诉浏览器显示控制媒体所需的本机控件，如播放、停止等。如果没有此属性，您必须提供自己的脚本控件。
autoplay、loop、muted属性:他们完全按照罐头上说的去做。

注意浏览器提供的控件通常不能开箱即用，除非你使用 Opera 浏览器。Opera 开箱即用，提供了出色的键盘可访问性，因此您可以播放、暂停和改变视频或音频的音量。不幸的是，按照大多数其他标准，Opera 不是一个非常屏幕友好的浏览器，但就 HTML5 <video>和<audio>的原生键盘访问而言，它应该低头。

入门<视频>

开始使用<video>元素很容易，您可以很快在浏览器中看到一些结果，并使用我刚刚介绍的 Media Elements API 属性定义一些基本属性。最初的步骤可能类似于清单 6-7 中的。

清单 6-7。使用<视频>

`<video width="700" height="500" preload controls poster="../img/mayer_cc_poster.jpg">

Can't access this video content?

Please visit the Creative Commons website for a format that suits you, or if you are happy with Flash content, visit the Flash version of the Mayer and Bettle creative Commons video

从清单 6-7 中的代码可以看出，您已经调用了三个 API 属性来在浏览器中执行一些魔法:

preload，预加载内容但不播放。
controls，要求浏览器显示原生浏览器控件。
poster，显示图像，直到视频播放完毕。这很有用，因为根据您的浏览器，您可能有一个空白或透明的空间，甚至可能看不清楚视频播放器控件。

我们还定义了视频的尺寸，并要求浏览器显示本地浏览器控件。

该示例有四种不同的视频源或视频类型，具体取决于访问内容时使用的浏览器。为每个浏览器提供正确的编解码器可能相当复杂，您需要手头上有一些视频转换工具，以便能够生成您需要的版本。这样做相对来说比较琐碎，但是可能比较耗时。你一个接一个地安排不同的视频格式和它们的源 URL 当浏览器点击它理解的内容时，它会预加载并播放它。如果浏览器不理解您提供的任何格式，这将触发嵌入在<video>和</video>元素之间的回退内容的显示。

一些编码工具

以下是一些对编码音频/视频媒体有用的工具列表:

Audacity: 一个优秀的、免费的、开源的录音机。在[www.audacity.sourceforge.net](http://www.audacity.sourceforge.net)拿到。
Firefogg:Firefox 的一个视频和音频编码应用。在[www.firefogg.org](http://www.firefogg.org)拿到。
FFmpeg2theora: 一个 OggTheora 文件的转换器，可在[v2v.cc/~j/ffmpeg2theora/](http://v2v.cc/~j/ffmpeg2theora/)获得。
手刹:开源视频转码器。在[www.handbrake.fr](http://www.handbrake.fr)拿到。

你是我喜欢的类型吗？

MIME 类型告诉浏览器 URL 指的是哪种媒体。将正确的 MIME 类型添加到source属性的末尾非常重要。(你可以在清单 6-7 中看到 MIME 类型。)有些浏览器对只播放附带的媒体相当严格，比如(Firefox 和 Opera)。

一些最常用的音频文件格式及其对应的 MIME 类型如下:

MP3: 音频/mpeg
OGG： 音频/视频/ogg
MP4: 音频/mp4 视频/mp4
网络视频:音频/网络视频/网络视频
WAV: 音频/wav
AAC: 音频/3gpp，音频/3gpp2，音频/mp4，音频/MP4A-LATM，音频/mpeg 4-通用

表 6-1 概述了主流浏览器支持的音频格式。

注意当编解码器表示用于传送媒体的压缩/解压缩算法时，它也表示编解码器的容器。

表 6-2 涵盖了视频编解码器，以及每种编解码器支持哪些浏览器。

某些容器可以采用多种文件格式。(记住，编解码器既是算法，也是包装器，或者保存它的容器。)在[en.wikipedia.org/wiki/Comparison_of_container_formats](http://en.wikipedia.org/wiki/Comparison_of_container_formats)你可以很好地了解容器的概况以及它们之间的比较。

提示为了让你的内容能够以最少的格式创建和解码数量到达最多的浏览器，你应该至少提供两种格式的音频，比如 MP4 和 Ogg，至少提供三种最常用的格式的视频:MP4、WebM 和 Ogg。

让您的控制易于使用

注我要特别感谢我的朋友盖兹·莱蒙，以及马克·博厄斯和西尔维亚·菲弗，感谢他们在我编写这一部分时给予的慷慨帮助、评论和建议。

在某些方面，你已经看到了容易的部分。接下来您将看到的是添加您自己的控件，并使它们既可以通过键盘访问，也可以被屏幕阅读器用户访问。我们还将看看如何使向前跳和向后跳的功能，以及控制静音的音频。不幸的是，开箱即用，目前没有一种方法可以轻松做到这一点，所以你必须编写脚本并创建自己的。

注意最难的是脚本，但是如果你保持简单，你可以实现很多，并且不会在这个过程中失去理智。嗯，这可能不完全正确。此外，您可以只使用本机 HTML 输入控件，如按钮，然后添加脚本。这为您提供了更多的开箱即用的可访问性，但是您在样式选择上有点受限。对于手卷控件，您有更多的空间来随心所欲地设计它们的样式。

有很多方法可以用来开发控件，所以我们来看几个。显然，确保你的播放器是可访问的是非常重要的，以下所有内容都着眼于可访问性。在这里，我创建了自己的图形来表示控件，然后应用了必要的 JavaScript。您还可以使用 CSS 来创建按钮并设置其样式。无论哪种方式，JavaScript 都非常相似。

图 6-17 是我在 Photoshop 中创建的控件的屏幕截图，我将用它来控制我的视频。它们分别是播放、停止、静音和向前跳/向后跳。

图 6-17。视频播放器的一组手卷控件

首先，我将每个控件包装在一个<div>元素中，然后适当地命名它。在每个<div>元素中，有一个image元素和一个合适的@alt文本值来描述控件。例如，以下是按钮控制:

在某些浏览器中，这些控件都可以通过键盘访问，当屏幕阅读器将焦点放在前面的控件上时，就会显示“播放按钮”。然而，您必须测试哪些有效，哪些无效。

注意在第一个例子中，我使用了#来通过键盘使控件成为焦点。传统上，使用#是为了给 JavaScript 一个焦点，但是随着 DOM 脚本的发展和像 jQuery 这样的工具包的普及，它并不总是必要的。如果您确实使用这个方法，一定要在它后面添加“return false();”语句，因为这会阻止“#” URL 触发。

清单 6-8 显示了所有控件的代码。首先，您将处理播放、停止和静音按钮。

清单 6-8。实现视频控制

使控件可聚焦并附加播放、停止和静音/取消静音等方法所需的 JavaScript 相当简单。我暂时忽略了向前和向后的控制；我们以后再看这些。研究清单 6-9 ，看看你是否能理解它。

清单 6-9。视频控制焦点的 JavaScript】

Oops cannot access this video content? Never fear!

Please visit the Creative Commons website for a format that suits you

图 6-18 显示了你的第一个版本的无障碍播放器的屏幕截图。

图 6-18 。无障碍视频播放器

好吧，不是很刺激，但是很管用。然而，你可以做一些事情来改善各方面的情况。

可访问的 HTML5 视频播放器版本 2

上一个示例中的代码存在一些问题。首先，如果 JavaScript 关闭或不可用会发生什么；使用#是个好主意吗？好吧，在显式控件的情况下，这一点有点不切实际。这是因为即使你想创建一个不引人注目的控件，这样做回避了你可以指向什么作为替代的问题，因为控件的目的是播放一些视频。在前面的示例中，对回退内容有一些很好的规定。如果不支持 HTML5，用户可以将浏览器指向该网站并下载内容。

你可以做一些事情来提高球员的水平。首先，您可以用“#”删除空 URL，将它们改为<divs>,，使它们可以从键盘获得焦点，并添加一些 ARIA 角色属性。

注意现在 JavaScript 保持不变。稍后您将看到为前进和后退功能以及其他一些控件添加脚本。

让我们来看看新代码:

`<div id="play" tabindex="0">
<img src="player/play_button.png" alt="Play Button" role="button" />

这里的主要变化是增加了 ARIA role=“button”属性，它告诉屏幕阅读器和浏览器<div>的用途是什么。通过添加tabindex=“0”值，您还可以从键盘访问<div>。所以这是两方面的胜利！

这两个属性都应该应用于所有控件。我还添加了以下代码，以确保控件将在键盘上突出显示焦点:

*[tabindex]:focus { outline:none; border: solid yellow 2px; }

注意关于使用 URL #作为关注控件的方式或者使用<div>和tabindex="0"的方式，你需要在尽可能多的不同浏览器中测试这两种方法。一些开发人员喜欢#方法，另一些开发人员喜欢带有tabindex的<div>，尽管后者现在得到了很好的支持。

这个例子的 JavaScript 代码(实际上同时使用了 a #和 tabindexed <div>)非常简单，但是当它最终工作起来的时候，一切看起来都很简单！

看看你是否能弄清楚清单 6-11 中发生了什么。

清单 6-11。添加播放、停止、静音、前进和后退功能的代码

`window.onload=function(){

var video = document.getElementById('access_video');
    var play = document.getElementById('play');
    var stop = document.getElementById('stop');
    var mute = document.getElementById('mute');
var forward = document.getElementById('forward');
var back = document.getElementById('back');

// Script needed to attach the onclick events with the functional buttons.
// Remember even though the event is called onclick it still works from the
// keyboard.

play.onclick = playVideo;
    stop.onclick = stopVideo;
    mute.onclick = muteVideo;
    forward.onclick = jumpForward;
    back.onclick = jumpBack;

// Duplicate onkeydown events for keyboard a11y

play.onkeydown = playVideo;
    stop.onkeydown = stopVideo;
    mute.onkeydown = muteVideo;
    forward.onkeydown = jumpForward;
    back.onkeydown = jumpBack;

// New function for play

// New function for pause

// This function allows the button to be used as a control to
// toggle the audio on or off.

// Jump forward, Jump Back

forward.onclick = jumpForward;
    function jumpForward(objEvent) {
        if (objEvent.type == keydown')
       {
               var iKeyCode = objEvent.keyCode;
               if (iKeyCode != 13 && iKeyCode !=32) {
                       return true;
               }
       }
    video.currentTime = video.currentTime + 15;
    video.play();
    return false;
    }

back.onclick = jumpBack;
    function jumpBack(objEvent) {
        if (objEvent.type == keydown')
       {
               var iKeyCode = objEvent.keyCode;
               if (iKeyCode != 13 && iKeyCode !=32) {
                       return true;
               }
       }
    video.currentTime = video.currentTime 15;
    video.play();
    return false;
    }

};

控件本身的代码如清单 6-12 所示。

清单 6-12。使用 tabindex="0 "将功能附加到定制的控件上，以关注一个< div >，而不是使用#

在[techrecord.net/html5/HTML5_video_player_no_captions_final.html](http://techrecord.net/html5/HTML5_video_player_no_captions_final.html)可以看到播放器的工作版本。

接下来，我们将看看如何给视频添加字幕。

注意如果所有这些都太多，还有现成的视频播放器可以使用，比如用于视频的 jPlayer 和 jQuery UI。您可以分别在[jplayer.org](http://jplayer.org)和[github.com/azatoth/jquery-video](https://github.com/azatoth/jquery-video)访问它们。

带有<轨道>元素的音频描述和字幕

如果你想对你的视频文件做各种各样的音频描述或者标题，HTML5 有一个新的元素叫做<track>元素。表 6-3 概述了你可以用新元素做什么。

表 6-3。媒体元素概述 ?? 1T5

要在您的视频内容中使用标题、副标题或章节信息，您可以通过kind属性添加它们。src属性指向文本存储的位置，srclang属性定义文本使用的语言，label属性给出标题。清单 6-13 详细说明了正确的用法。

清单 6-13。给<轨道>元素添加字幕

<video src="brave.webm"> <track kind="subtitles src=brave.en.vtt" srclang="en" label="English"> <track kind="captions src=brave.en.hoh.vtt" srclang="en"label="English for the Hard of Hearing"> <track kind="subtitles src=brave.fr.vtt" srclang="fr"lang="fr" label="Français"> <track kind="subtitles src=brave.de.vtt"srclang="de" lang="de" label="Deutsch"> </video><sup>2</sup>

原则上，添加音频描述和/或字幕非常简单，对吗？好吧，如果你最喜欢的浏览器支持这种东西，那就可以了，但目前还不支持(在我写这篇文章的时候)，但这将会改变。为了实现这一点，我使用了开源的 JavaScript 库 Captionator，发现它工作得非常好。

² 从[dev.w3.org/html5/spec-author-view/the-track-element.html](http://dev.w3.org/html5/spec-author-view/the-track-element.html)

注你可以在https://github.com/cgiffard/Captionator下载 JavaScript 库，获取更多关于 Captionator 的信息。

将它添加到您的视频中就像将以下脚本添加到您的页面中一样简单:

然后通过添加以下内容来启用它:

captionator.captionify(document.getElementByID("video"));

就这样。我可以继续使用 Text Wrangler 编写. vtt 文件来创建标题本身。那个。vtt 文件格式易于使用——只需打开您最喜欢的编辑器，并使用扩展名保存您创建的文件。vtt 。

提示设置

有许多不同的提示设置供您使用。详见表 6-4 。

入门相当容易。图 6-19 显示了我的视频字幕文件。您可以定义标题或副标题出现的开始和结束时间，然后使用提示设置告诉浏览器大小、对齐方式等。请看下面我的截图。我用来给视频加字幕的 vtt 文件。并做实验。奇怪的是，这是一项引人注目的工作，相当耗时，但也很有趣。

图 6-19。样本 VTT 文件

注意要了解更多关于 VTT 的信息和一篇好文章，请看一下[www.iandevlin.com/blog/2011/05/html5/webvtt-and-video-subtitles](http://www.iandevlin.com/blog/2011/05/html5/webvtt-and-video-subtitles)上伊恩·德夫林的有用概述。

您可以在图 6-20 中看到带字幕视频的视频播放器截图，并在[techrecord.net/html5/HTML5_video_player_captions_final.html](http://techrecord.net/html5/HTML5_video_player_captions_final.html)上线试用。

图 6-20。无障碍播放器字幕视频截图

注欲了解更多关于具有良好可及性角度的 HTML5 视频的信息，请参见 Silvia Pfeiffer 的新书，html 5 视频权威指南 (Apress，2010)。

创建一个<音频>播放器

这只是一个简短的说明，说明创建一个音频播放器更容易一些，你所学到的关于制作

<画布>无障碍

动态渲染动态位图图形的 2D 绘图 API 可以用来在浏览器中创建一些非常好的视觉动画(甚至更多),而不需要任何插件。有许多 groovy 测试案例和网站非常成功地全部或部分使用了<canvas>。然而，从可访问性的角度来看(为了让每个人的生活更容易)，除了漂亮的图片，不要使用<canvas>。在撰写本文时，它还不能被认为是可访问的。在万维网联盟(W3C)的幕后有大量的工作在进行，并努力使之成为现实。然而，在我看来，如果有另一种开发内容的方式更合适，你应该使用它。事实上，规范对此有如下建议:

"当有更合适的元素可用时，作者不应在文档中使用 canvas 元素。例如，使用 canvas 元素来呈现页面标题是不合适的:如果想要的标题呈现在图形上很强烈，就应该使用合适的元素(通常是 h1)来标记，然后使用 CSS 和支持技术(如 XBL)来设计样式

当作者使用 canvas 元素时，他们还必须提供内容，当呈现给用户时，传达与位图 canvas 基本相同的功能或目的。该内容可以作为 canvas 元素的内容放置。canvas 元素的内容(如果有)是元素的后备内容。⁴

使用<canvas>开发了各种本不该开发的东西。文本编辑器 Bespin 在我脑海中是一个看起来不错的工具，但实际上可能永远也不会被使用。

注您可以在[benzilla.galbraiths.org/2009/02/17/bespin-and-canvas](http://benzilla.galbraiths.org/2009/02/17/bespin-and-canvas)查看 Bespin。在很多方面，它令人印象深刻，但我认为它使用了错误的工具作为基础。

顺便说一下，我认为<canvas>的其他一些非常聪明的用法(不考虑可访问性)是:

SoundManager 2 / 360 播放器演示:可在[www.schillmania.com/projects/soundmanager2/demo/360-player/](http://www.schillmania.com/projects/soundmanager2/demo/360-player/)获得。这太棒了，这些好心人也给你看看源代码。
9 元素:在[9elements.com/io/projects/html5/canvas/](http://9elements.com/io/projects/html5/canvas/)可用。它有很好的鼠标交互和很棒的音调交互！
一个字体生成器和一个可能的 sIFR 替代品。在[cufon.shoqolate.com/generate/](http://cufon.shoqolate.com/generate/)可用。Roger Johannes 在[www.456bereastreet.com/archive/200905/cufon_and_screen_readers/](http://www.456bereastreet.com/archive/200905/cufon_and_screen_readers/)撰写了关于 Cufón 和屏幕阅读器的文章。
有一个很好的列表，列出了使用<canvas>开发的游戏、小工具等等，可以从[www.w3.org/html/wg/wiki/AddedElementCanvas](http://www.w3.org/html/wg/wiki/AddedElementCanvas)获得。在这里你还可以找到很多关于<canvas>的讨论链接，以及当试图让这个绘图 API 更容易使用时所面临的挑战。

话虽如此，<canvas>仍处于起步阶段，从可访问性的角度来看，它面临着巨大的挑战。例如，它没有 DOM，那么屏幕阅读器如何生成文档的概览呢？如果你继续使用<canvas>来吸引眼球，你会没事的。HTML5 有许多很棒的工具来构建可访问的东西，并为许多具有不同能力的用户组提供丰富的用户体验。所以当你需要勺子的时候，用勺子。虽然有人会说，“没有勺子。”

⁴

注意如果你想要一个很好的参考来创建你自己的<canvas>视觉糖果，我推荐 Nihilogics HTML5 <canvas>备忘单，它可以在[www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf](http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf)获得。

结论

在这一章中，我们看了很多可以让 HTML5 富媒体更容易访问的新方法。有许多基于您过去如何使用 HTML 4 做事情的最佳实践，您仍然可以应用，但也有一些新的技巧，我希望本章已经让您喜欢上了。在下一章，我们将看看如何使用 HTML5 来访问数据表。

七、HTML5 和可访问的数据表

在这一章中，你将学到所有你需要知道的关于使用 HTML5 创建简单和更复杂的可访问数据表的知识。

数据表通常用作可视化呈现表格数据的方式。这些数据可以是作者感兴趣的任何内容。表格布局允许作者呈现信息，以便网站用户可以轻松地将任何给定单元格中的数据与各种类别或关系相关联，这些类别或关系通常在每一列或每一行的开头定义。

这通常是在我们许多人常见的布局中完成的，单个数据单元格与不同的列和行相关。网站的用户可以查看各个数据单元格，并快速浏览以查看它们涉及哪些列和行。然后，他们可以快速理解每个单元格中的数据的含义。

桌子的麻烦

对于一个有视力的人来说，弄清楚这些关系是简单明了的，而且往往发生得非常快。如果一个表格设计得很好，那么首先会使理解这些关系变得更容易，大多数视力正常的用户在理解它们时不会有问题。他们首先关注表数据是什么——换句话说，它与什么主题相关——然后确定表中包含的信息实际上意味着什么。

对于一个没有视力的人来说，成功地完成这两个步骤需要开发者做更多的工作。这有几个原因，但主要是因为当一个表格显示在浏览器中时，视力正常的用户通常会很快得到这些关系。一个没有视力的用户将以一种非常不同的方式访问表中的数据——以线性方式，一项接一项地访问。

在一个失明的人甚至开始调查或询问(我喜欢使用这个术语，因为它与数据表和可访问性相关)数据表之前，她首先需要一种方法来容易地理解表的用途。这归结为用户在问，“这张桌子是做什么用的？”，赶紧接着问“这是什么意思？”

屏幕阅读器和数据表

创建一个视力正常的人能够容易理解的表是相当容易的(只要你试图表示的初始数据是简单明了的)。您为每一列创建一些标题，也许为它们添加粗体样式，然后添加行，也许为每一行的第一项添加粗体样式。很简单。如果这是一份纸质文件，那就好了。

然而，要使一个数据表在 HTML5 中可访问，你必须想办法以编程方式定义数据单元格和它们相应的列和行之间的关系。这样做有助于像辅助技术(AT)这样的用户代理理解数据单元及其对应的列和行之间的关系，因此它使 AT 能够以用户可以理解的方式通知失明的用户。

*对于屏幕阅读器的用户来说，HTML5 语言有定义这些关系的方法，因此首先使数据表易于理解，其次便于导航，然后，如果表与用户的需求无关，则跳过它。

注一个屏幕阅读器是一个线性输出设备。这意味着它一次向用户输出一部分信息。对于一个没有视力的用户来说，如果他对 HTML 内容有一个完形的看法，你需要使用适当的代码来帮助他。这通常是通过编写内容的文本概述并以编程方式将其与表格相关联来实现的，以便当表格获得焦点时会显示出来。在这一章的后面我会详细说明如何做到这一点。

数据表的常见模式

您可能要创建的大多数数据表都很简单，并且在形式上遵循一条老路。我可以听到你愤怒地大叫，“你是说我不会创建复杂的、多列的不规则数据表吗？”是的，我是。您创建的表可能有更多或更少的列或行，但它们主要是一个基本的网格，在列和相应行的顶部有标题。

它们可能采用表 7-1 中所示的形式。

桌子可能是正方形或长方形的，虽然并不总是这样，但总的来说，你的桌子将采用表 7-1 所示的形式。因此，我们将研究的使表格可访问的技术将同样适用于刚刚显示的简单表格和具有大量列和行的表格。在这种情况下，大小并不重要。

你需要能够做两件事。首先，对于视力正常的视觉用户，您需要创建表格，以便他们可以看到表格顶部的信息(标题信息)，然后，通常是每行的第一列。然后，他们可以查看整个表，为每个数据单元格建立必要的关联。通过这样做，他们可以看到每个单元格中的数据与什么相关。

其次，为了让屏幕阅读器用户能够访问这些表，您需要使用 HTML5 将每个单元格中的数据与其对应的列标题和行相关联，以便屏幕阅读器本身可以向用户通知哪个标题与每个数据单元格相关。

使用 HTML5 正确标记数据单元格实现了两个实用功能。首先，它通知屏幕阅读器用户当每个单元格有焦点时它所涉及的列和行的组合；第二，它允许用户在浏览表格时了解自己在表格中的位置。

屏幕阅读器用户可以使用光标键轻松地在数据单元格之间导航。我在本章剩余部分展示的内容将帮助您通过简单的步骤使您的表真正可访问。

TMI？

在我们研究如何使您的数据表可访问之前，我建议您执行以下操作:

首先，尽量使数据表尽可能简单。如果表很复杂和繁忙，代码也会很复杂。尽管创建复杂的可访问的表是可能的，但是如果您能够首先简化表的架构，这将会很有帮助。
尽量不要跨越多个单元格/行。同样，一个更简单、外观更好的表通常更容易访问。
最后，考虑下面这个问题:你要展示的信息能包含在你网站的正文中吗？换句话说，你真的需要一张桌子吗？

如何创建可访问的表格

图 7-1 ，你将在本章的后面看到，显示了一个表格，它扩展了本书其他一些例子中出现的“动物避难所”主题。该表概述了即将在我们的动物保护区举行的研讨会。

好吧，首先。如前所述，一个有视力的人可以看着桌子，从一开始就知道它是什么。你怎么能为一个没有视力的人做这些？答案是，通过添加一个<caption>元素。

元素是给视力正常的用户和屏幕阅读器用户一种理解表格用途的方式。HTML5 规范将<caption>元素描述为提供表格的标题。这是一个不错的思考方式。添加<caption>元素很容易，添加到<caption>元素的任何文本字符串都是以编程方式将与表关联起来的。一旦表格从屏幕上获得焦点，它将被通知给用户，而不需要更多的交互。这非常有用，是使数据表可访问的第一个重要步骤。它对视力正常的用户也有好处，因为它以可视化的方式呈现，并且可以使用 CSS 进行样式化。

将<caption>元素添加到数据表采用以下形式:

Animal Sanctuary workshops

[…]

使用表格的<caption>元素或标题有助于帮助屏幕阅读器理解表格是什么。如果你考虑一个有五个或六个(甚至更多)数据表的网页，以这种方式添加<caption>真的很有用。一个有视力的人可以快速浏览网页，并找出所有这些表格是什么。如前所述，屏幕阅读器用户可以通过选择各种 HTML 元素——如标题和链接——使用 AT 来浏览网页。他们可以使用页面上的任何<table>元素做同样的事情。例如，在 JAWS 中按下 T 键会导致 AT 将用户从第一个表跳到最后一个表(然后再跳回来)。如果每个表格上没有合适的<caption>，屏幕阅读器只是宣布“table”、“table”，并让用户知道表格有多少行、列等等，但它不能告诉用户表格是做什么用的。添加<caption>填补了空白。带有合适的<caption>的数据表宣布焦点上的内容。因此，如果我建议的包含六个表的页面上的所有表都有<caption>元素，屏幕阅读器用户可以很容易地找到她要找的东西——因为当每个表获得焦点时，<caption>元素的内容就会被公布。整洁！

提示当表格比较复杂时，可以给表格元素添加一个汇总属性(@summary)。该属性旨在为屏幕阅读器用户提供更复杂数据表的概述，但不幸的是，它现在在 HTML5 中已经过时了。我仍然认为@summary非常有用，因为当屏幕阅读器用户关注一个表格时，它就会显示出来。我经常在我的项目中使用@summary来提供补充信息，如果我认为它可以帮助用户理解表格，或者总的来说，有更好的用户体验。这稍微超出了它的设计范围，但是根据我的经验，它工作得很好。对于许多简单的数据表来说，@summary并不是必需的，因为一个有用的<caption>就足够了。@summary对视力正常的用户是隐藏的，但会被屏幕阅读器发现。

我认为@summary应该被保留和使用，但是 HTML5 工作组决定让它过时。我和可访问性社区的其他朋友和同事一起，反复提出保留它的理由——但是没有用。如果你想知道 grizzly 的细节，你可以看看工作组在[www.w3.org/html/wg/tracker/issues/32](http://www.w3.org/html/wg/tracker/issues/32)的“问题跟踪器”中的日志，或者访问位于[www.w3.org/html/wg/wiki/SummaryForTABLE](http://www.w3.org/html/wg/wiki/SummaryForTABLE)的 W3C ESW 维基。

做这些事情包括通知屏幕阅读器用户表格是关于什么的。如何导航表格本身并理解哪个数据单元格与哪个列和行相关？

在数据单元格、表格标题和行之间创建编程关联

有几种常见的方法来标记 HTML5 表，使它们可访问，并且更向后兼容旧的 AT(有许多用户！).第一种方法是使用标题/ID 组合来标识每个表格单元格的内容。第二种方法使用头/范围组合。

可访问的表方法 1:使用标题/ID 组合

我们要看的第一种方法稍微费时一些，但我认为它更可靠。我们将在表格 HTML 的header和ID元素之间创建关联。这是一种将数据单元格的内容与其相应的标题相关联的方式。这样做将导致屏幕阅读器在向用户宣布单元格的内容之前宣布数据单元格在的哪一列。

要创建标题/ID 关联，首先要处理标题，然后处理表体。

从给每个标题一个唯一的 ID 开始；给标题一个与内容相同的 ID 是完全可以的。关于我的动物保护区即将举办的研讨会，我的标题标识如下:

Header #1 = "课程"
标题#2 = "开始"
标题#3 = "结束"
标题#4 = "成本"
Header #5 = "Extras "

在 HTML 代码中，标题如下所示:

`Course

Start Date End Date Cost`

Additional content included in 它可以是以下内容或类似内容:

`Course

Start Date End Date Cost Included Extras`

如果您对任何命名约定感到满意，您当然可以使用它。关键是标题 id 是唯一的，因为它们用于创建与表数据的编程关联(正如您将看到的)。对我来说，他们有关系似乎更自然，但这并不重要。现在您已经有了合适的标题 id，接下来您可以将表体中每一行的单元格内容映射到一个合适的标题，如清单 7-1 所示。

清单 7-1 。映射单元格内容

`Course

Start Date End Date Cost Included Extras How do you start an Animal Sanctuary June 10 June 16 650 Euros includes lunches, one dinner and extensive materials. Working with Dogs: A beginners workshop April 12 April 16 300 Euros includes lunches, and materials.

[…]`

使用标题/ID 组合的最终可访问表

通过查看清单 7-1 中的例子，你能看出标题和数据单元内容之间的关联是如何建立的吗？

图 7-1 是决赛桌的屏幕截图。

图 7-1 。可访问数据表示例

清单 7-2 显示了最终完全编码的样本(也有合适的<caption>元素)。

清单 7-2 。可访问表方法 1 的最终表代码

Animal Sanctuary workshops

An overview of upcoming Animal Sanctuary workshops in 2012
Course	Start Date	End Date	Cost	Included Extras
How do you start an Animal Sanctuary	June 10	June 16	650 Euros	includes lunches, one dinner and extensive materials.
Working with Dogs: A beginners workshop	April 12	April 16	300 Euros	includes lunches, and materials.
Massage for You & Your Animals	September 29	October 4	400 Euros. A Half day session is 220 Euros.	includes lunch, and book.
Yoga with Animals	May 18	May 21	300 Euros	includes lunch, dinner and book.
A Creative Artistic workshop and Retreat	June 18	June 23	500 Euros	includes lunch, dinner and art supplies.
Why Compassion for Animals matter: Philosophy and Animals	July 12	July 14	200 Euros	includes lunch, and materials
Sanctuary Basics	September 22	September 24	275 Euros.	includes lunch, and class materials

可访问的表方法 2:使用头/范围组合

标记同一个表的另一种方法是将表头与scope属性(@scope)结合使用。HTML5 规范是这样描述使用标题/范围组合构建数据表的:

第一行中的标题都直接应用于其所在列中的行。
具有显式范围属性的标题适用于其行组中的所有单元格。
其余的标题只适用于它们右边的单元格。

这意味着您可以拥有不规则的表格，这些表格仍然被认为是简单的，但是它们可能具有不应该包含在特定行中的标题，或者它们可能具有包含几列的行。

规范给出了清单 7-3 中的例子。请注意，在这种情况下，具有显式范围属性的标题应用于其行组中的所有单元格，而不是第一列中的单元格。另请参见新的 HTML5 语法，即对于<th>、<td>或<tr>元素不使用结束元素，或者对于任何单元格值不使用引号。如果您愿意，您仍然可以用旧的方式编码。您还可以看到新的<thead>(表头)和<tbody>(表体)元素，它们几乎如其名称所表示的那样，允许您在表格中表示内容块。还有一个<tfoot>(表尾)元素，这里不做展示。

清单 7-3 。使用范围属性

ID	Measurement	Average	Maximum
	Cats
93	Legs	3.5	4
10	Tails	1	1
	English speakers
32	Legs	2.67	4
35	Tails	0.33	1

清单 7-3 中的代码产生了图 7-2 中的表格，这稍微复杂一些。

图 7-2 。HTML5 规格数据表示例

th元素可以指定一个scope内容属性。scope属性有以下五种状态(带有特定的关键字):

row关键字，它映射到行状态。行状态意味着标题单元格应用于同一行中的一些后续单元格。
col关键字，它映射到列状态。列状态意味着标题单元格应用于同一列中的一些后续单元格。
rowgroup关键字，它映射到行组状态。行组状态意味着标题单元格适用于行组中所有剩余的单元格。
colgroup关键字，它映射到列组状态。列组状态意味着标题单元格适用于列组中所有剩余的单元格。
自动状态。auto 状态使标题单元格应用于基于上下文选择的一组单元格。

图 7-3 来自 HTML5 规范。它直观地展示了算法是如何工作的。

图 7-3 。HTML5 范围算法^{的可视化 1}

从顶部直向下指的四个箭头代表表格标题——“ID”、“Measurement”等，并显示它们与其对应行的所有内容相关联。表格标题(<th>)的出现以及它与相关行中所有数据单元格的关联得到了大多数浏览器和的良好支持，甚至比更早的。这种基本的编程关联对表的可访问性有很大帮助。对于屏幕阅读器用户来说，它是如何工作的:当用户遇到具有适当标题的表格时，她使用光标键在数据单元格中导航，首先宣布表格标题是什么，然后宣布数据单元格的内容。

其他箭头显示了前面示例中应用的@scope元素如何与其行中剩余的单元格相关联，以及这些单元格如何应用于其右侧的单元格。

使用标题/范围组合的示例

如果您将 header/scope 方法应用于我们的表，标记将类似于清单 7-4 中所示的内容。

注意在 HTML5 中，td元素上的 scope 属性已经过时。在 HTML 4 中，您曾经可以将它添加到一个<td>单元格中，但是如果您想要有效的 HTML，您就不能再这样做了。(我将在第十章“工具、提示和技巧:评估你的可访问 HTML5 项目”中讨论验证问题。)对于 HTML5 数据表，请在th元素上使用 scope 属性。

清单 7-4 。使用标题/范围方法

Animal Sanctuary workshops

An overview of upcoming Animal Sanctuary workshops in 2012
Course	Start Date	End Date	Cost	Included Extras
How do you start an Animal Sanctuary	June 10	June 16	650 Euros	includes lunches, one dinner and extensive materials.
Working with Dogs: A beginners workshop	April 12	April 16	300 Euros	includes lunches, and materials.
Massage for You & Your Animals	September 29	October 4	400 Euros. A Half day session is 220 Euros.	includes lunch, and book.
Yoga with Animals	May 18	May 21	300 Euros.	includes lunch, dinner and book.
A Creative Artistic workshop and Retreat	June 18	June 23	500 Euros	includes lunch, dinner and art supplies.
Why Compassion for Animals matter: Philosophy and Animals	July 12	July 14	200 Euros.	includes lunch, and materials
Sanctuary Basics	September 22	September 24	275 Euros.	includes lunch, and class materials

“那么哪个最好呢？”我听到你哭泣。使用 headers/ @scope的第二种方法花费的时间更少，也更容易创作，正如你在清单 7-4 中看到的。对于屏幕阅读器的用户来说，这两个例子的最终结果几乎是一样的，只有一个例外。旧的屏幕阅读器不太支持@scope属性，所以我认为 header/ID 组合方法更健壮，向后兼容性更好。

更复杂的表格

下面是上表的一个更高级版本的示例，使用 headers/ @scope方法以及更新的 HTML5 语法进行编码。其想法是显示介绍性和高级课程的信息，每个课程的名称被编码为标题，跨越几列。

从视觉上看，该表类似于图 7-4 中所示的表。

图 7-4 。使用 HTML5 语法和 headers/@scope 方法的更高级的表格

使用 HTML5 语法构建它的代码如清单 7-5 所示。

清单 7-5 。使用 Headers/@scope 方法创建一个更高级的表

Animal Sanctuary workshops

An overview of upcoming Animal Sanctuary workshops in 2012
Course Number	Course	Start Date	End Date	Cost	Included Extras
	How do you start an Animal Sanctuary
#001	Introduction	June 10	June 16	250 Euros	includes lunches, and one dinner.
#002	Advanced	August 10	August 16	550 Euros	includes lunches, one dinner and extensive materials.
	Working with Dogs: A beginners workshop
#003	Introduction	April 12	April 16	100 Euros	includes lunches, and materials.
#004	Advanced	May 16	May 20	300 Euros	includes lunches, and materials.
	Massage for You & Your Animals
#005	Introduction	September 29	October 4	200 Euros. A Half-day session is 110 Euros.	includes lunch.
#006	Advanced	November 29	December 4	400 Euros. A Half-day session is 220 Euros.	includes lunch.
	Yoga with Animals
#007	Introduction	May 18	May 21	100 Euros.	includes lunch.
#008	Advanced	June 18	June 21	200 Euros.	includes lunch, dinner and book.
	A Creative Artistic workshop and Retreat
#009	Introduction	June 18	June 23	250 Euros	includes lunch.
#010	Advanced	June 18	June 23	500 Euros	includes lunch, dinner and art supplies.
	Why Compassion for Animals matter: Philosophy and Animals
#011	Introduction	July 12	July 14	200 Euros.	includes lunch.
#012	Advanced	August 12	August 14	400 Euros.	includes lunch, and materials.
	Sanctuary Basics
#013	Introduction	September 22	September 24	275 Euros.	includes lunch.
#014	Advanced	September 22	September 24	275 Euros.	includes lunch, and class materials

您还可以使用 Webaim 的 WAVE 工具栏(我们将在第十章中深入探讨)这样的工具来查看表格本身的标题，既可以查看数据表顶部的标题，也可以查看包含在数据表更深处的标题。图 7-5 显示了波形工具栏界面的概述。

图 7-5 。数据表中第<个>元素的视图

更复杂的表格呢？最终，对于更复杂的表格——例如，单元格跨越多行，并且标题嵌套在表格的更深处——您可以应用的真正起作用的标记会受到一些限制(从可访问性的角度来看)。我强烈建议尽可能地简化你的数据表设计，并确保你使用更可靠的方法，比如标题/ID 组合。向表中添加一个<caption>元素是一个很大的帮助，尽管目前在 HTML5 中不赞成使用@summary,但添加一个元素仍然适用于许多 AT。如果那是一座太远的桥，你可以添加aria-describedby来提供更多的说明；然而，使用这种方法意味着指令需要是页面上的描述。我会违反法律，仍然添加@summary来向盲人用户描述复杂的表格(它在视觉上是隐藏的)。话说回来，我觉得我只是对权威有意见。

应该构建复杂的表吗？当然，你可以为跨越多列或多行的数据单元格设置标题，但是你真的需要确保在更复杂的表格中嵌入标题(见图 7-5 )并使用适当的 id 在这些标题和数据单元格之间创建编程关联。

尽管随着技术的进步，有更高级的 HTML 标记方法承诺更容易创作或只是“更好”，但在实践中，这里概述的简单方法是您应该坚持的。对于更复杂的表——使用@scope 是最理想的——记住它仍然没有得到很好的支持。因此，即使一个标记方法可能是“好的”(从纯编码的角度来看)，并且在语义上有意义，你仍然必须小心，并且测试，测试，测试。困难在于 at 供应商需要赶上作者正在做的事情和规范建议的事情。其实@scope里没什么新东西。它已经存在很多年了。

注意关于新的 HTML5 表格语法，我必须承认最初我对它有着复杂的感情。然而，当我编写前面的例子时，我发现更简洁的语法首先更容易编写，然后当我检查代码时也很好。我喜欢它在网格中思考的方式。您可以在您选择的编辑器中布置代码，就像您可视化地布置数据表中的表格单元格一样。当然，您也可以用 HTML 4 做到这一点，但是新的语法要简单得多，并且使得可视化解析代码变得更加容易。虽然一开始不太情愿，但发现自己惊喜万分。

使用范围和 AT 支持

虽然从技术上来说，scope 属性应该被今天的一些屏幕阅读器支持，但实际上它真的相当有限。另一方面，对头/ID 组合的支持(如前所述)非常好。AT 供应商可能声称支持@scope，但是当您使用它构建数据表时，您可能会注意到使用@scope的表和不使用@scope的表之间的差别非常小(如果有的话)。

随着时间的推移，出于几个原因，这种情况需要改变。首先，用 header/@scope创作可访问的数据表对开发人员来说耗时更少；第二，新的 HTML5 代码更加精简，这意味着更快的页面加载速度等等。此外，@scope的使用让您有可能标记更复杂的数据表。

注几年前，HTML5 工作组采取的立场是数据表不需要标题，而@scope足以构建数据表。数据表的标题将从规范中删除。值得庆幸的是，这种情况没有发生，因为这一举动对于 AT 的老用户(有很多)来说是灾难性的。如果你对争论的细节感兴趣，可以查看 HTML5 工作组 ESW 维基: ²

描述 HTML5 表格的新方法

规范中提出了一些描述表格的新方法，为了完整起见，我在这里提供了一些例子。如果你愿意，你可以使用它们。然而，我对其中一些有异议，目前对新元素如<figcaption>和<details>的支持很差。随着时间的推移，这种情况将会改变。您需要进行一次调用，以决定是在它之前还是之后提供表的文本描述，然后在它们之间创建一些编程链接。这种模型的论点是，它有助于有认知障碍的人更好地理解表格，这肯定有一定的道理。然而，对于简单的表格来说，这通常是不必要的，更复杂的表格从@summary描述(不幸的是在 HTML5 中是无效的)或类似的描述中获益更多。

规范建议描述数据表的一些方法，可能简单，也可能更复杂，如下所示。

方法 1:以散文的形式，围着桌子

清单 7-6 中的例子使用了表格上方的<p>元素作为后面的详细文本描述。这个想法是，描述将满足所有用户的需求，因为它是在浏览器中呈现的。

清单 7-6 。数据表的详细文本描述

In the next table the number of animals we have in care are given in the first column, Number in Care, the animal type is in the second column, Animal Type, and the third column shows the number that are available currently.

The number of animals in care that we have and that are available for immediate re- housing.
Total in Care	Animal Type	Number available
12	Older Dog	7
9	Aging Cat	6
14	Young Puppy	9
23	Kitten	15
5	Pony	4
3	Horse	1

注意清单 7-6 有两个标题，因为标记用于引用表格顶部的标题和内嵌的标题。HTML5 规范允许以这种方式引用多个头。

虽然在表的正上方有一个详细的描述是一个好主意(如果需要，屏幕阅读器的用户将能够更容易地发现它，因为它非常接近表)，但它仍然有缺陷。这是因为在代码中没有显式的编程关联。正如您现在所知道的，屏幕阅读器用户可以使用他们的 AT 浏览 web 内容，所以显式关联非常有帮助，因为一旦表获得焦点，它就会被宣布。清单 7-6 中的会发生这种情况。

方法 2:对数据表使用 aria-describedby

以前解决这个问题的方法是添加一个描述表格的@summary元素。它对视力正常的用户是隐藏的，但对屏幕阅读器用户非常有用。如何提供一个更明确的以编程方式关联的描述？您可以使用一个@summary，但是您会从验证器(可从[validator.w3.org](http://validator.w3.org)获得)得到一个错误。如果你能接受，那很好。另一种方法是使用aria-describedby指向页面上的描述。代码如清单 7-7 所示。

清单 7-7 。使用 aria-describedby 描述表格

[…]`

对您的表进行这样的编码可以让屏幕阅读器指向页面上的描述。请注意，它不一定要在表格的正上方或正下方才能工作，只要描述在与表格相同的页面上的任何地方都可以工作。

方法#3:在表格的

HTML5 规范建议您可以在<caption>元素中提供这些描述。这类似于清单 7-8 中的代码。

清单 7-8 。<中描述表格的标题>

The number of animals in care that we have and that are available for immediate re- housing.
Total in Care	Animal Type	Number available
12	Older Dog	7
9	Aging Cat	6

[…]`

虽然清单 7-8 中的例子是有效的 HTML5，但我觉得它用太多的信息使<caption>超载，并且把任何标题的目的从一个简短的描述变成一个更长的描述。用更长的描述来呈现这样的信息可能会用aria-describedby更好地标记，或者用@summary更好。

方法 4:在表格的标题中，在一个
元素中

HTML5 规范还推荐将表格的<caption>与新的<details>元素结合使用，以提供如清单 7-9 所示的描述。

清单 7-9 。使用<细节>元素描述表格

Table outlining the number of animals we have in care are given in the first column, Number in Care, the animal type is in the second column, Animal Type, and the third column shows the number that are available currently.
Total in Care	Animal Type	Number available
12	Older Dog	7

[…]`

在清单 7-9 的例子中，注意两个新元素:<summary>和<details>。

新的<details>元素表示一个 disclosure 小部件，用户可以从中获得额外的信息或控件。例如，您可以使用它来创建手风琴风格的显示/隐藏控件。请注意，它不适用于脚注。新版本的 Firefox、IE9 和 Safari 5 目前支持这个新元素。同样，默认情况下，这些描述在浏览器中是可见的，但是如果需要，可以使用 CSS 隐藏它们。

<summary>元素是<details>元素的子元素，用于表示摘要或图例。它不同于 HTML5 早期版本中表格元素的@summary。

方法#5:在同一张图中，在表的旁边

下一个方法，如清单 7-10 中的所示，将整个表格包装在一个<figure>元素中，并使用<figcaption>提供最初的简短描述，使用<p>元素提供更长的描述。

清单 7-10 。用<图符>描述表格

The number of animals in care that we have and that are available for immediate re-housing.

the number of animals we have in care are given in the first column, Number in Care, the animal type is in the second column, Animal Type, and the third column shows the number that are available currently.

**The number of animals in care that we have and that are available for immediate re- housing.**

Help

the number of animals we have in care are given in the first column, Number in Care, the animal type is in the second column, Animal Type, and the third column shows the number that are available currently.
Total in Care	Animal Type	Number available
12	Older Dog	7

[…]

Total in Care	Animal Type	Number available
12	Older Dog	7

这种方法目前的问题是，除了将整个<table>包装在一个<figure>中(at 目前不太支持这种方法)，在描述性文本和表格元素之间没有其他编程关联。因此，在对<figure>元素的支持得到改善之前，使用这种方法是不明智的。在我写这篇文章的时候，Firefox 对<figure>和<figcaption>还有一些支持。

结论

从前面的例子中可以看出，有很多方法可以使用 HTML5 来描述数据表，并使它们更易于访问。越久经考验和信任的方法通常是最好的，首字母缩写 KISS(保持简单，愚蠢)中的古老格言当然适用。在下一章中，我们将看看 HTML5 表单和一些新元素和表单控件，你可以用它们来使你的表单更具响应性、可用性和可访问性。*

八、HTML5 和可访问表单

在本章中，你将学习在 HTML5 中创建可访问的表单。好消息是，以前使用 HTML 4 创建可访问表单时使用的许多技术在使用 HTML5 时仍然适用。您还将看到一些新元素，以及新的 HTML5 元素如何允许您在浏览器中进行更多的表单验证，而不需要复杂的脚本。

如果您不知道如何在 HTML4 中创建可访问的表单，不要担心——我将从头开始讲述这一切。

设计一个可访问的表单用户界面

您从上一章学到的关于创建可访问数据表的许多原则也适用于使用 HTML5 创建可访问表单。总的来说,“吻”这个咒语是适用的——不仅仅适用于可访问的形式！

表单确实受益于清晰、简单、简洁的布局。在任何时候，您都应该避免增加任何不必要的复杂性，并且在表单下，您需要在输入字段、复选框和其他元素及其相应的标签之间创建编程关联。这些实践是用 HTML5 创建可访问表单的核心。

当然，表单与数据表有很大的不同。表单是交互式的，而数据表不是。当涉及到使你的表单更易访问时，它们的交互特性确实增加了复杂性。特别是，表单的交互特性带来了如何进行表单验证的问题，以及当最终用户出错时应该怎么做。如何确保错误消息是可访问的？答案有两个部分:你必须首先让用户知道有错误，然后通知用户她需要做什么来纠正错误。稍后我会对此进行详细说明，但这些是可访问错误恢复的主要关注点。

一些形式良好的做法

你已经在第三章中看到了一些简单的表单，以及一些使用脚本的表单验证技术。出于礼貌，使用一些大量使用 JavaScript 的技术来进行表单验证并不有趣。它通常是复杂和尴尬的。使用早期版本的 HTML 创建更容易理解的错误消息的技术并不差。

首先，我将介绍 HTML5 中一些新的输入类型和元素。您将看到这些新元素是如何被设计得更容易创作的，以及它们如何减少使用脚本进行复杂验证的需要。您还将看到可访问的错误消息，并学习一些实践，引导您创建更容易访问和使用的表单——同样，表单也更容易创作和使用。所以这是一个双赢的方法。

注意你在 HTML5 中遇到的很多东西都是从 Web 超文本应用技术工作组(WHATWG)的 Web Forms 2.0 规范移植过来的。这个想法是 Web Forms 2.0 是 HTML 4 中表单特性的扩展。Web Forms 2.0 提供了新的输入字段、用于定义约束的属性、用于声明性重复表单部分的重复模型、新的 DOM 接口以及用于验证和依赖项跟踪的 DOM 事件。Web Forms 2.0 也是记录现有实践的一种尝试。如果你喜欢一些书呆子火车定位，把你的浏览器指向[www.whatwg.org/specs/web-forms/current-work](http://www.whatwg.org/specs/web-forms/current-work)。

【HTML 4 和 HTML5 之间表单元素的差异

在 HTML5 中，有 13 个新元素和许多新属性。然而，HTML 4 中也有许多您可能很熟悉的现有元素，它们仍然有效。所以值得再看一遍。

在 HTML 4 中，有许多元素可以用来创建各种输入框、组合框等等。这些与 FORM 元素一起使用来指定:

表单的布局(由表单中使用的控件、它们的顺序和位置定义)。
处理已完成并提交的表单的页面或脚本(采用action属性的形式)。
将用户数据发送到服务器的方法(method属性，如post)。

在 HTML 4 中，FORM动作将采用以下通用形式:

`<FORM action="http://yoursite.com/contact" method="post">
...form details...

这个基本语法在 HTML5 中保持不变。在表单本身中，可以(事实上，仍然可以)定义各种控件，以允许用户与表单进行交互，指定交互的性质，并阐明每个控件可能施加的相关要求。我们将在接下来的章节中回顾这些控件及其使用标准。

输入元素

INPUT 元素用于用户输入数据，如文本字符串(姓名、地址等)或数字。在 HTML 4 中，INPUT 元素有各种属性，这些属性决定了表单控件的输入类型。有几种 HTML 4 输入元素类型，如下所示:

文本
密码
检验盒
收音机
使服从
重置
文件
隐藏的
图像
按钮

所有这些输入元素类型都会在浏览器中创建一个控件，并且浏览器会继承这些类型的某些行为。如果输入类型是“密码”，浏览器会显示一系列星号(****)，而不是真正的文本。稍后我们将研究新的 HTML5 输入类型。

输入类型的语法采用以下形式:

<input type = "text"> <input type = "password"> <input type = "checkbox">

HTML5 中新类型的语法遵循相同的结构。

SELECT、OPTGROUP 和 OPTION 元素

在 HTML 4 中，您可以找到 SELECT、OPTGROUP 和 OPTION 元素。

SELECT 元素在浏览器中创建一个菜单。菜单中的每个选项都由一个选项元素表示。如果需要将任何选项元素组合在一起，作者可以使用 OPTGROUP 元素对选项进行逻辑分组。如果用户有一个很长的选项列表，而你想把它们分成相关的部分，这是很有用的。

这采用了清单 8-1 中所示的形式。

清单 8-1。选择、选择组和选项元素

字段集和图例元素

HTML 4 中的<fieldset>和<legend>元素背后的想法是它们给你的表单更多的结构。< fieldset>元素用于按主题对表单控件进行分组，<legend>就像是<legend>元素的父元素<fieldset>的内容标题。有点拗口！如果你还记得，我们已经在第三章的中看到了这些元素的使用。

注意前面所有的元素在 HTML5 中仍然有效。

元素

<label>对于创建可访问的表单控件非常重要。元素的作用是为一个控件创建一个特定的标签。这个标签允许你在<label>名称和控件本身之间创建一个编程关联。这允许辅助技术(AT)如屏幕阅读器理解INPUT元素的用途。为输入控件选择一个合适的标签是很重要的，因为一旦INPUT字段获得焦点，如果标签正确的话，屏幕阅读器就会显示出<label>的名字。

for/id 方法

HTML 4 中易于访问、标签良好的表单控件使用一种叫做for/id的方法。在这里，您用来标识输入元素的标签采用了<label for="somename">的形式，并且通过给INPUT的 id<input id="somename">赋予相同的值，它以编程方式与INPUT控件相关联。清单 8-2 详细介绍了这种方法。

清单 8-2。使用 for/id 组合使输入文本框可访问

Create new account

name属性也被设计用来指定INPUT元素的名称，并用于标识控件组。它也用于表单提交。它不是由 AT 宣布的。

因此，包含在<label>[…]</label>之间的文本会在相应的输入字段通过键盘获得焦点后立即由 at 宣布。当您希望确保屏幕阅读器用户能够访问您的表单中的一些信息时，您可以将它包含在表单的<label>中。

表单控件的 HTML5 标签

HTML5 规范概述了另一种不使用前面的for/id方法来标记表单控件的方法。这种方式实际上并不新鲜，它实际上是将表单控件包装在一个<label>.中，它采用以下一般形式:

<label>Text to label control<input type="text"></label>

注意如前所述，这个方法并不新，在 HTML 4 中就有了。在 HTML 4 中，通过使用各种标签的for属性指向控件，您还可以从技术上为一个表单控件分配几个标签元素。-但是，在 HTML5 中不能再这样做了。此外，AT 对这种方法的支持很差。

在 HTML5 中，规范建议您使用for/id方法或者在控件中包装标签。在下面的代码行中，我结合了这两种方法并将控件包装在一个标签中，同时还使用了for/id方法。这采用如下所示的形式:

<label for="a11y_label"> Text to label control <input type="text" id="a11y_label"> <label>

当我在 Mac 10.7 (Lion)上使用 VoiceOver 在 Safari 5.1 中测试它时，这很好。我还尝试在输入框之外运行更多的文本，这也是屏幕阅读器宣布的。例如:

<label for="a11y_label"> Text to label control <input type="text" id="a11y_label"> some extra useful info!</label>

有趣的是，我的朋友、Paciello Group (TPG)的辅助功能专家 Steve Faulkner 进行了一些广泛的测试，发现这两种方法在带 VoiceOver 的 Safari 5 上都不太好，但我发现现在可以了(或似乎可以了)。因此，这可能是对这些结构的支持有所改善的迹象。

注意 Jared Smith 在 WebAIM 上发表了一篇非常有趣的文章，题为“语义自动化”VoiceOver 使用语义自动化来修复某些损坏的 web 内容。这可能意味着我发现的测试结果是高级启发式评估的产物，而不是 HTML5 标记的应用。我在这里提到的不是 for/id 方法(这是经过反复试验和测试的防弹方法)，而是 HTML5 规范中推荐的在标签中包装控件的方法。欲了解更多详细信息，请访问位于[webaim.org/blog/semantic-automation](http://webaim.org/blog/semantic-automation)的 WebAIM 博客。

尽管 HTML5 规范建议的这种通过将控件包装在标签中来识别控件的新方法(原文如此)不使用for/id方法的显式关联，但如上所述，我发现它在 VoiceOver 中工作正常(但请参见前面的警告)。然而，就使您的表单更加防弹和使用旧的遗留 AT 而言，我建议现在坚持使用for/id方法。不要认为这是一种限制。如你所见，标记很简单，并且for/id方法得到了很好的支持。您可以放心地使用它，因为您知道屏幕阅读器用户也可以轻松地使用您的表单。

此外，HTML5 具有与 HTML4 相同的单选按钮、复选框等。