第 17 章：无障碍访问

当您了解无障碍网站的特性以及这些特性如何帮助不同类型的网站访问者时，构建无障碍网站会容易得多。如果您没有视觉障碍，有时很难“看到”问题所在。为了更容易评估您的网站，而无需成为无障碍访问方面的专家，您可以使用许多自动化测试工具在您的网站上进行测试。有些事情，例如您网站上语言的清晰度，仍然需要“手动”检查。

Web 无障碍访问指南主要有两套：Web 无障碍访问倡议 (WAI) 指南，以及美国的《康复法案》第 508 条。虽然这两套指南并非相互排斥，但使用 WAI 指南以最高级别的无障碍访问构建网站通常会创建一个符合第 508 条的网站。

WCAG 中的 Web 内容无障碍访问指南阐述了无障碍访问的四个原则。

• 信息是否可以容易地被感知（或“看到”）？

• 软件（网站）是否可以容易地被操作（或“导航”）？

• 内容是否容易理解？

• 内容是否足够健壮，可以被各种浏览器和辅助技术解释？

附录 F 包括每个无障碍访问指南的要点。

一旦您构建了网站（理想情况下是在构建网站的同时），您就需要检查是否已满足声明您的网站“无障碍”所需的所有指南。您可以使用每套指南的清单手动检查每个要点，但也有许多自动化测试可以使测试更容易、更准确。最终，您需要使用辅助设备进行用户测试，以保证您创建了一个无障碍网站。使用检查清单和至少两个自动化测试套件将发现您网站中的大多数问题。

检查清单使世界变得容易得多。它们允许您快速回顾您所做的工作并确认其已完成。完成检查清单并不能证明符合第 508 条或 WCAG 指南，但它将帮助您确保您已考虑了每个要点。

• Drupal 7 的无障碍访问指南：WCAG 2.0 和 ATAG 1.0 (http://groups.drupal.org/node/18595)

• WCAG 1.0 检查清单 (http://www.w3.org/TR/WCAG10/full-checklist.html)

• WCAG 2.0 快速参考 (http://www.w3.org/WAI/WCAG20/quickref/)

• WCAG 2.0 检查清单，HTML 格式 (WebAIM) (http://webaim.org/standards/wcag/checklist)

• WCAG 2.0 检查清单，Microsoft Word 或 PDF (web usability) (http://www.usability.com.au/resources/wcag2checklist.cfm)

• 第 508 条检查清单 (WebAIM) (http://www.webaim.org/standards/508/checklist)

易于查看

如果您能看到图像，那么一张图片才值一千个字。在您的文本中，彻底描述您正在展示的概念，以便看不到图像的人仍然可以理解您在说什么。在图像标签本身中，使用一个alt属性来描述图片显示的内容。如果您正在上传视频，请为那些听不到声音或没有必要的插件来观看视频的人提供视频的文字稿。有关如何使富文本具有无障碍访问功能的更多信息，请查看无障碍富 Internet 应用程序 (ARIA) 指南 (http://www.w3.org/WAI/intro/aria.php)。这也适用于富含 JavaScript 的网站。

屏幕阅读器无法猜测图像是什么。为了使您的网站的所有访问者都可以访问此内容，您需要为您上传到网站的每个图像提供文本描述。当您上传图像时，Drupal 将提示您添加替代文本（图 17.2）。您只需要填写框即可。

如果您在不使用图像小部件的情况下向网页添加图像，则需要记住包含一个alt属性来描述图像。如果图 17.2 中的图像是手动添加的，则 HTML 代码将如下所示

图 17.2
图像上传小部件将在图像上传后提示您添加图像的替代描述。

视频、音频和其他“富媒体”文件需要有文字稿。为了使视频更易于访问，您可以为听力障碍人士添加字幕。有关视频字幕的更多信息，请访问 http://www.webaim.org/techniques/captions/。YouTube 还提供了有关如何向您上传到其网站的视频添加字幕的具体指南 (http://www.google.com/support/youtube/bin/answer.py?hl=en&answer=100077)。文字稿和字幕也可以被翻译，使您的内容对世界各地的人们更易于访问。

易于操作

有很多不同的方法可以使您的网站易于使用，但最明显的方法是实际的导航系统。确保您的导航是键盘可访问的。导航到您网站上的一个页面，然后按 Tab 键。第一个导航元素应突出显示，或者至少在其周围有一个小点框。尽可能避免在多个方向打开的飞出式（也称为下拉）菜单。我没有行动不便的问题，但仍然需要至少两次尝试才能击中菜单中的正确项目。

计算机程序只能读取它们被提供的信息。Web 浏览软件可以为视力正常的访问者显示视觉增强效果，但除非在网页中通过正确的 HTML 标签明确包含含义，否则这些增强效果对计算机程序没有任何意义。

屏幕阅读器可以从页面上使用的 HTML 标题标签构建页面内目录。这允许使用屏幕阅读器的访问者扫描标题，而不必收听每个单词。（想象一下，如果因为没有标题和索引，您不得不阅读本书的每个单词。真糟糕，对吧？）内容子部分应使用标题级别h2到h6作为适当的级别。h1保留用于页面标题——您的主题将为您插入此标签。

易于理解

编写好的内容需要练习。有些人甚至去学校学习如何写作（我们通常称他们为“作者”或“记者”）。在 Web 上写作不像为印刷品写作。在 Web 上，您需要编写文本，使其非常容易扫描。

• 使用子标题将长页面分成多个部分。

• 使用项目符号和编号列表将关键思想分解为易于理解的信息。

• 添加插图、图表和照片以增强您的信息，但永远不要使用图形来代替文字。

• 为首字母缩略词和其他行业特定术语添加定义。

• 避免过度使用缩略形式（wouldn’t、can’t）和当地俚语或短语（例如，“that’s sik”，意思是“好”；“sick”是生病，以前是好的；以及 sic，仍然被认为是错误的）。

在将您的页面发布到 Web 之前，大声朗读它。这将帮助您发现错误。对于较大的网站，聘请专业的编辑。无论您多么优秀，编辑都会使您的写作更好。

提供帮助

提供清晰的说明，以帮助用户首次尝试即可无错误地完成表单。清楚地解释链接另一端存在的内容。不要让人猜测您网站上的鸭子图标意味着什么。让人们在使用您的网站时感到聪明，而不是愚蠢。与朋友和同事一起测试您的网站。询问他们您可以在哪些方面使事情更清楚一些。如果可行，请包含一个“帮助”区域，该区域回答常见问题并引导人们了解您网站的每个功能。

有很多方法可以测试您的网站的无障碍访问性。您需要掌握的最简单的技巧之一是一个简单的技巧。在您的 Web 浏览器中，禁用 CSS 和图像，然后尝试在您的网站上导航。它不会找到所有问题，但通常会找到相当多的问题。

纯文本浏览器

计算机辅助浏览（盲文点显器、屏幕阅读器）只能处理文本。它们无法创建不存在的含义。它们不会向您描述图片，当然也无法执行用作 JavaScript 触发器的鼠标操作，因为没有鼠标。使用纯文本浏览器测试您的网站。图 17.3 显示了在纯文本浏览器 Links 中 Drupal 7 网站的主页。如果您可以使用该网站，则很可能无法看到您的网页的人也可以使用它。

图 17.3
在 Links 中查看时，Drupal 网站显示为线性文本页面。请注意页面顶部的无障碍访问增强功能“跳到主要内容”链接。

纯文本浏览器可在线获取，网址为 http://www.delorie.com/web/lynxview.html 和 http://www.standards-schmandards.com/projects/fangs/.

您可以使用 Firefox 的 Web Developer Toolbar 插件来模拟纯文本浏览器。安装后，使用 Web Developer 工具栏禁用 CSS 和 JavaScript 并关闭图像。禁用 CSS 和 JavaScript 后，尝试浏览您的网站，看看您是否仍然可以找到信息和购买产品。

自动化测试工具

创建或更新网页后，立即检查以查看页面是否正在使用有效的 HTML 标记并符合您网站的无障碍访问标准。改造网站将比首先确保仅生成无障碍页面花费更长的时间。用于检查网站是否符合无障碍访问指南的工具通常会返回已发现错误的摘要表，或显示您网站的叠加层，向您准确显示错误所在的位置。图 17.4 显示了 Drupal.org 的 WAVE 报告，报告没有错误。图 17.5 显示了在 Microsoft.com 上运行的同一报告，其中包含一些小错误。图 17.6 显示了 Drupal.org 的第二个自动化测试

• WAVE，Web 网站在线无障碍访问检查器 (http://wave.webaim.org/http://fae.cita.uiuc.edu/)

• Truwex Online，Web 无障碍访问测试工具：WCAG 和第 508 条合规性 (http://checkwebsite.erigami.com/accessibility.html)

• 斯坦福在线 Web 无障碍访问检查器，适用于 Web 网站 (http://www.stanford.edu/group/accessibility/cgi-bin/accessibilitychecker/checker/index.php)

• Worldspace 无障碍访问检查器（包括 PDF 测试） (http://-worldspace.dequecloud.com/worldspace/wsservice/eval/checkCompliance.jsp)

• 运行 FAE；通过创建一个免费用户帐户，您还可以通过 Web 爬网测试多个页面并生成站点范围的报告 (http://fae.cita.uiuc.edu/)

• TAW Online 也测试移动设备 (http://www.tawdis.net/)

图 17.4
Drupal.org 通过了 WAVE 自动化无障碍访问测试。

图 17.5
Microsoft.com 未通过 WAVE 自动化无障碍访问测试，出现四个非常小的错误。

图 17.6
Drupal.org 未通过使用 Truwex online 的 WCAG 1.0，优先级级别 2 自动化测试。

基于浏览器的工具将对您当前正在查看的页面执行检查。图 17.7 显示了一个网站的无障碍访问错误的弹出窗口摘要，图 17.8 显示了包含有关此页面上的无障碍访问错误的附加信息的“摘要”。

• Firefox Accessibility Extension (https://addons.mozilla.org/en-US/firefox/addon/5809/)

• Firefox Colour Contrast Analyser (https://addons.mozilla.org/en-US/firefox/addon/7313/)

图 17.7
Firefox Accessibility Extension 提供页面上潜在无障碍访问问题的摘要。

图 17.8
Firefox Accessibility Extension 还提供了无障碍访问问题的详细摘要。

本节选自 Emma Jane Hogbin 编写的《Drupal 用户指南：构建和管理成功的 Drupal 驱动的网站》，由 Pearson/Prentice Hall Professional 出版，2011 年 9 月出版，ISBN 0137041292，版权 2012 Pearson Education, Inc.。有关更多信息，请访问出版社网站：www.informit.com/title/0137041292

© 版权 Pearson Education 所有。保留所有权利。