使 Web 应用程序易于访问

作者:Stephanie Bodoff 及 Amy Roh

问题描述

词典将 accessible 定义为很容易接近或访问。对于残障人士(例如视力或听力障碍的人士)来说,Web 应用程序和用来调用应用程序的用户代理(浏览器)通常并非易于访问。除鼠标之外,它们可能不支持使用其他交互技术,或者可能包含让视力障碍的人士无法感知的事物,如图像。  

为了便于访问,Web 页和应用程序必须支持辅助技术。辅助技术对于残障人士是很有用的。辅助技术提供了专用的输入和输出功能。  

提供辅助技术的示例包括:

美国联邦法律规定,美国政府采购信息技术产品时应满足特定的要求,即保证提供易访问性功能。第 508 条款部分要求联邦机构所拥有的电子和信息技术对于残障人士来说是易于访问的。除了美国政府的要求外,万维网联合会 (http://w3c.org) Web 易访问性计划制订了一系列的准则和技术建议,如需了解为 Web 开发者提供帮助来创建易于访问的 Web 站点和应用程序的信息,请访问 http://w3c.org/TR/WCAG10-TECHS/。  

以下各部分概述了美国政府和万维网联合会对 Web 内容易访问性的建议。这些部分围绕着与内容相关的主题(例如多媒体)和 HTML 页构建机制(例如框架)进行组织。  

如果不能在任何其他方面保证遵守上述建议,也应该提供具有等效信息或功能的只包含文本的页面。只包含文本的页面内容都应当随着主要页面的更改而进行更新。

解决方案

下表概述了 Web 技术以及使用它们的建议。在每一部分都提供了更详细的建议和示例。

Web 技术 建议
<img> 标记
为所有内容提供 alt 文本。使用空的 alt 为图像提供间距。
闪烁元素
避免屏幕在频率大于 2 Hz 和小于 55 Hz 时闪烁。
颜色
某些其他标识方法(如文本标签)必须与颜色结合使用。
样式表
确保可以导航未启用样式表的应用程序,并确保这不会影响用户定义的样式表。
图像映射 通过客户端图像映射,每个活动区域都可以具有其自己的替代文本。客户端图像映射要优于服务器端图像映射,这是因为确定服务器端上的链接对非浏览器客户端来说是很困难的。如果使用服务器端图像映射,则必须使用冗余的文本链接才能访问页面。

使用 <th><td> 标记的 headerid 属性,或者使用 <th><td> 标记的 scope 属性。
框架 使用 title 属性(如果支持),或者标记框架(在每个框架主体内的清晰标识框架的标签上包含文本)。
脚本语言 提供替代的脚本文本,该文本传达脚本所显示内容的准确消息。
表单
使用 <label> 标记描述表单控件。描述应该显示在控件附近。
导航链接
提供一个跳转链接,用户可以通过该链接跳过重复的导航链接。
计时响应
发出提示来提醒用户,并为他们提供充足的响应时间。应确保表单不能太大,如果不能缩小表单,则必须增加超时时间。
引用非 HTML 内容
提供一个指向插件的链接,该插件符合易用性要求。

内容

非文本信息

非文本元素是指图像、图形、音频剪辑或者图片或声音所单独传达意思的其他功能。其中包括按钮、复选框、图片以及嵌入式音频或流式音频示例。为了易于访问,每个非文本元素都必须具有文本等效项。 

文本等效项是指添加文字来表示非文本元素的用途。例如,当图像指示导航操作(如“移到下一屏”或“返回页首”)时,图像必须附带有说明图像用途的文本,换句话说,图像告诉您要做些什么。当使用图形或声音呈现页面内容时,那些组件必须附带有文本描述。 

如有可能,与非文本元素关联的文本信息会传达与其关联元素传达的相同信息。例如,当图像指示操作时,必须用文本来描述该操作。需要实际文本描述的非文本元素类型仅限于提供理解内容所需的信息的那些元素,或用来方便导航的元素。Web 页作者通常使用透明图形来表示间距。为这些元素添加文本描述将对屏幕阅读器用户产生不必要的混乱。对于这样的图形,适合使用空的 alt 属性,例如:
<img src=”transparent.gif” alt=” “>
可以使用若干种方法提供文本信息以便它可以由辅助技术设备进行识别。例如,<img> 标记可以接受 alt 属性,通过该属性 Web 设计者可以将描述图片的文本直接包含在 <img> 标记中。例如:
<img src="pictureofme.jpg" alt="this is a picture of me">
同样,Java[TM] Applet 的 <applet> 标记也接受 alt 属性,但是它仅适用于提供 Java 支持的浏览器。通常,使用较慢 Internet 连接的用户会禁用对 Java applet 的支持。提供文本描述的一种更好的替代方法是,只需将替代文本包含在开始和结束的 <applet><object> 标记之间。例如,如果 Web 设计者要在 Web 页中包含名为 MyCoolApplet 的 Applet,以及 Applet 显示股票报价机(它显示各种股票的当前价格)的描述,则可以包括以下代码:
<applet code="MyCoolApplet.class" width="200", height="100">
This applet displays current stock prices for many popular stocks
</applet>
最后,提供文本描述的另一种方法是,将它包括在页中的上下文中:
Below is a picture of me during my great vacation!<p>
<img src="pictureofme.jpg">
当 Web 站点包括多媒体信息时,它应该提供替代的、易于访问的信息源。当音频表示可以在 Web 页上使用时,必须提供等效于音频的文本,以便耳聋或听力有障碍的人士理解其内容。如果音频是同时具有音频和视频的多媒体表示的一部分,则应该为音频部分添加字幕。在为多媒体产品的音频部分添加字幕时,字幕应该与音频同步。需要使字幕同步,以便阅读字幕的人可以观察说话者并将相关的身体语言与语音相关联。

如果 Web 站点仅具有音频流,则不必添加字幕。但是,由于音频是非文本元素,因此必须提供等效的文本(即脚本)。同样,Web 幻灯片放映演示不必附带音频描述,但是需要与任何图形关联的文本替代内容。

闪烁元素

一些具有感光癫痫症的个人可能因闪烁、闪光或闪亮而发病,尤其是在频繁闪烁且在某些频率范围内时。设计页面时应该避免屏幕在频率大于 2 Hz 和小于 55 Hz 时闪烁。 

闪光或闪烁元素通常是通过诸如动画 GIF、Java Applet 或者第三方插件或软件之类的技术添加的。Java Applet 和第三方插件可以通过是否存在 <applet><object> 标记进行识别。动画 GIF 是在单个文件中下载的图像,与普通图像文件类似,但是其内容会在短时间内发生更改。与其他图像一样,通常使用 <img> 标记来包含它们。

结构化机制

颜色

将颜色用作标识屏幕元素或控件的唯一方法时,色盲、盲人或视力很差的人可能会发现 Web 页不可用。 

允许使用颜色增强重要功能的标识。但是,必须在使用颜色的同时还使用某些其他标识方法,如文本标签。请注意,不要使用颜色既表示强调的文本,也表示操作。例如,将用户定向到“按绿色按钮启动”的 Web 页还应该使用颜色之外的其他某种方式来标识绿色按钮。 

可以使用两种简单的方法来测试 Web 页是否满足此要求:在黑白监视器上查看页面,或在黑白打印机上打印它。这两种方法都将快速显示删除颜色是否会影响页面的可用性。

样式表

使用样式表,Web 站点设计者可以创建具有一致外观、可轻松更新的 Web 页。例如,在没有样式表的情况下,如果要使标题显示为大字体而不影响周围文本,则需要文档中隐藏的单独标记来控制字体的大小和粗体。因此,视力很差的用户可能使用这样一个样式表,即黑底白字的特大字体呈现所有文本。如果设计者将其页面设置为忽略用户定义的样式表,则残障人士可能无法使用那些页面。因此,为了更好地进行访问,设计者必须确保其 Web 页不影响用户定义的样式表。

图像映射

图像映射是 Web 页上提供指向其他 Web 页的不同“链接”的图片,具体情况取决于用户在图像中单击的位置。有两种基本类型的图像映射:客户端图像映射和服务器端图像映射。

使用客户端图像映射,可以为图片中的每个活动区域分配一个链接,该链接指定在选择图片的某一部分时要检索的 Web 页。每个活动区域都可以包括自己的替代文本,就像图片可以包括替代文本那样。当 Web 浏览器从客户端图像映射中检索一组特定的说明时,它还会接收有关在选择映射的某个区域时将发生的操作的所有信息。因此,虽然客户端图像映射在本质上是图形,但是它能够以文本格式显示与映射关联的链接,该文本格式可以通过辅助技术进行阅读。客户端图像映射要优于服务器端图像映射,但是不能使用可用的几何形状定义区域除外。

使用服务器端图像映射,只需在区域内单击就可指定图像内的坐标。选定的 URL 必须由提供 Web 页的计算机进行解密。当 Web 页使用服务器端图像映射为用户提供一组选项时,浏览器无法向用户指明在激活映射区域时所到达的 URL。因此,对于视力有障碍或不能准确在映射内单击的任何人,需要使用冗余的文本链接才能访问页面。

大型的数据表为易访问性带来了重大的问题。屏幕阅读器无法在表中进行定位,因为屏幕阅读器所读取的特定单元格不能与该单元格对应的列标题和行名称关联。例如,假定一个薪水表包括按等级和级差划分的雇员薪水。表中的每行可能表示级别,而每列表示级差。因此,在查找与 9 级、级差为 5 对应的薪水时,可能会在第九行第五列中找到该单元格。但是,对于有 15 个级别和 10 个级差的薪水表,表中至少有 150 个单元格。第 7 行第 8 列上的用户可能不便于使用此表。

当信息需要以表的格式排列以便正确理解时,应该使用相应的表标记来排列信息,而不是将预先格式化的表与 <pre> 标记一起使用。应该为数据表标识行标题和列标题。 

可以使用若干种方法通过辅助技术来阅读 HTML 表。一种方法是使用 <th><td> 标记的标题和 ID 属性,使单元格的内容与列标题关联。另一种方法是使用 <th><td> 标记的 scope 属性,使列和行与位于那些列或行中的单元格关联。例如:
<table border="1" summary="This table charts ...">
    <caption>Cups of coffee consumed by each senator.</caption>
    <tr>
        <th scope="col">Name</th>
        <th scope="col">Cups</th>
        <th scope="col">Type of Coffee</th>
        <th scope="col">Sugar?</th>
    <tr>
        <td>T. Sexton</td>
        <td>10</td>
        <td>Espresso</td>
        <td>No</td>
    <tr>
        <td>J. Dinnen</td>
        <td>5</td>
        <td>Decaf</td>
        <td>Yes</td>
    </tr>
    ...
</table>
在 JavaServer Faces 应用程序中,您可以使用 dataTable 标记生成相同的表:
<h:dataTable id="senators" value="#{senators}" var="senator">
    <h:column >
        <f:facet name="header">
            <h:outputText value="Name" />
        </f:facet>
    <h:outputText size="24" value="#{senator.name}" >
    </h:column>
    <h:column>
        <f:facet name="header">
            <h:outputText value="Cups"/>
        </f:facet>
        <h:outputText size="24" value="#{senator.cups}" >
    </h:column>
    ...
</h:dataTable>
注意 - dataTable 标记的呈现器会自动在 <th> 标记中生成 scope 属性。

在具有两个或多个行标题或列标题的逻辑级别的数据表中,在数据单元格和标题单元格之间建立关联是很困难的。表 1.1 按日期和类别(饮食、旅馆和交通)列出了在圣何塞和西雅图两个位置的旅行费用。

表 1.1 旅行费用报表

Meals
Hotels
Transport
Subtotals
San Jose




24-Aug-2004
37
112
45

25-Aug-2004
27
112
45

Subtotals
64
224
90
378
Seattle




26-Aug-2004
95
109
36

27-Aug-2004
35
109
36

Subtotals
130
218
72
420
Totals
195
442
162
798

在具有多个级别的表中,您应该使用方法在标题与其相关信息之间提供关联。以下示例显示了如何使用 axis 属性在表内创建类别。
<TABLE>
  <CAPTION>Travel Expense Report</CAPTION>
  <TR>
    <TH>
    <TH id="header2" axis="expenses">Meals
    <TH id="header3" axis="expenses">Hotels
    <TH id="header4" axis="expenses">Transport
    <TD>Subtotals</TD>
  <TR>
    <TH id="header6" axis="location">San Jose
    <TH> <TH> <TH> <TD>
  <TR>
    <TD id="header7" axis="date">24-Aug-04
    <TD headers="header6 header7 header2">37
    <TD headers="header6 header7 header3">112
    <TD headers="header6 header7 header4">45
    <TD>
  <TR>
    <TD id="header8" axis="date">25-Aug-04
    <TD headers="header6 header8 header2">27
    <TD headers="header6 header8 header3">112
    <TD headers="header6 header8 header4">45
    <TD>
  <TR>
    <TD>Subtotals
    <TD>64 <TD>224 <TD>90 <TD>379
  <TR>
    <TH id="header10" axis="location">Seattle
    <TH> <TH> <TH> <TD>
  <TR>
    <TD id="header11" axis="date">26-Aug-04
    <TD headers="header10 header11 header2">95
    <TD headers="header10 header11 header3">109
    <TD headers="header10 header11 header4">36
    <TD>
  <TR>
    <TD id="header12" axis="date">27-Aug-04
    <TD headers="header10 header12 header2">35
    <TD headers="header10 header12 header3">109
    <TD headers="header10 header12 header4">36
    <TD>
  <TR>
    <TD>subtotals
    <TD>130 <TD>218 <TD>72 <TD>421
  <TR>
    <TH>Totals
    <TD>195 <TD>442 <TD>162 <TD>798
</TABLE>
虽然有人强烈建议此为汇总表内容的方式,但是主要辅助技术制造商并未对 <table> 标记的 summary 属性提供完全支持来确保实现建议的内容。因此,Web 开发者应该使用 <caption> 标记在表的旁边或表的主体中放置摘要内容。Web 开发者不应该使用表摘要作为访问其表内容的一种替代方式。

在表内放置的诸如短语或句子之类的长文本元素进行格式设置时,使用屏幕阅读器和其他辅助技术类型的用户经常面临的另一个问题又出现了,例如当文本在表单元格内“换行”时,一些辅助技术的用户很难或不可能看懂它。为了避免此问题,希望残障人士能够完全访问其页面的 Web 开发者应该避免使用表来设置文本格式。

框架

当 Web 站点使用框架时,通常只有一个框架会随信息而更新,而其他框架保持不变。由于使用框架可以为用户提供一致的屏幕部分,因此它们通常用作 Web 站点的导航工具栏。由于只更新屏幕的一部分,而不是整个屏幕,因此能够更快地呈现它们。如果框架上的标签是显式的,则使用框架对于屏幕阅读器和其他辅助技术的用户来说是有好处的。诸如“顶部”、“低部”或“左侧”之类的标签对框架包含的内容不提供任何线索。但是,诸如“导航栏”或“主要内容”之类的标签却具有更多的含义,便于识别框架并进行框架导航。

标记框架的最明显的方法是,在每个框架的主体内包括清晰标识框架的文本。例如,对于导航栏,您可以在框架内容开始处放置诸如“导航链接”之类的文字,让所有用户都知道该框架描述了导航链接。另外一个方法是在框架标记的 title 属性中包括框架功能的描述。虽然当前辅助技术的主要制造商不提供 title 属性的支持,但是该属性是 HTML 4.0 规范的一部分,旨在让 Web 开发者将框架的描述包含为引号引用的字符串。下面是一个包含目录和主要内容框架的框架集的示例:
<frameset ... >
    <frame title="Table of Contents" src="TOC.html" name="toc" />
    <frame title="Main Content" src="Front.html" name="main" />
</frameset>

脚本语言

屏幕阅读器通常在阅读脚本内容时,将其作为杂乱而无意义的数字和字母。因此,Web 应用程序开发者应该使用脚本来包含文本,以传达有关脚本显示内容的准确消息。

例如,如果 Web 页使用脚本只是为了用基本缺省值填充 HTML 表单的内容,则该 Web 页很可能是易于访问的,因为由脚本插入到表单中的文本可以通过屏幕阅读器进行阅读。但是,如果在用户将指针移到图标上,Web 页使用脚本创建菜单选择的图形映射时,则 Web 站点设计者应该包括与菜单选择匹配的冗余文本链接,因为无法向辅助技术呈现每个菜单选择的功能文本。为了确定 Web 页是否满足此要求,Web 站点设计者可能需要仔细测试,尤其是随着辅助技术和 JavaScript[TM] 标准继续进展。

表单

HTML 表单是 Web 上的通用交互机制。收集信息、允许用户申请服务以及进行采购,仅仅是许多表单应用的一些内容。

目前,表单控件和屏幕阅读器之间的交互可能是不可预知的,具体情况取决于包含这些控件的页面的设计。某些开发者在不同的表单元格中放置控件标签和控件。其他开发者在与控件本身不同的距离的各个位置放置控件标签,因此来自屏幕阅读器的响应的准确度会下降许多倍。您应该使用 <label> 标记描述表单控件,并且描述应该出现在控件旁边:
<label for="username">Input User Name: </label>
<input type="text" name="j_username" size="16" id="username"/>
JavaServer Faces outputLabel 标记用于将标签附加到指定的输入字段。在以下示例中,outputLabel 标记呈现 userName 输入字段的标签:
<h:inputText id="userName" />
<h:outputLabel for="username"
    <h:outputText id="userNameLabel" value="Input User Name: " />
</h:outputLabel>

导航链接

Web 页开发者在标准位置上定期放置许多特定于站点的导航链接 - 通常在页的顶部、底部或一侧。当访问者返回到 Web 页或站点以查看特定页的内容,而不是选择导航链接转到其他页时,访问者可能只是浏览链接,并从所需文本的位置开始阅读。但是,对于使用屏幕阅读器或其他辅助技术类型的访问者来说,在到达实际内容之前等待辅助技术告知每个标准导航链接可能是很乏味的。因此,Web 页设计者应该提供一种机制,如跳转链接,以允许用户跳过重复的导航链接。以下是跳转链接的一个示例:
<a href="#skip" title="Skip navigation links"></a>
    <table width="550" summary="layout">
    <tr>
    <td align="left" valign="center">
    <a accesskey="d" href="download.html">Download</a>
    </td>
    <td align="center" valign="center">
    <a accesskey="p" href="prev.html">Previous Page</a>&nbsp;&nbsp;
    <a accesskey="n" href="next.html">Next Page</a>
    </td>
    <td align="right" valign="center">
    <a accesskey="s" href="search.html">Search</a>
    </td>
    </tr>
    </table>
<a name="skip"></a>

计时响应

可以使用脚本设计 Web 页,以便在指定时间内没有收到响应时,Web 页将消失或过期。有时,出于安全原因才使用此技术,或者为了减少对提供 Web 页的计算机的需求。残障人士会直接影响其阅读、移动或填写 Web 表单的速度。例如,视力极差者的阅读速度可能要比普通阅读者的速度慢。在阅读者能够读完某页之前,该页可能会超时。许多表单在自动超时时还会删除已经输入的任何数据。结果是输入数据慢的用户无法完成表单输入。因此,当需要计时响应时,应该通过提示来提醒用户,并为他们提供充足的时间以表明是否需要额外的时间。确保表单不致过大,并且具有稍后保存数据的选项以及提醒用户还有多少剩余时间都是很有帮助的。

引用非 HTML 内容

大多数 Web 页是使用标准 HTML 编码的。但是,嵌入许多 HTML 页中的链接会指向专用文件格式,如 Real Audio、Flash 或 PDF。使用此类格式是为了传输和显示特殊内容,如多媒体或准确定义的文档。由于这些文件格式是专用的,因此 Web 浏览器通常无法呈现它们。

可以下载附加程序或“插件”并将其安装在用户计算机上,以便其 Web 浏览器可以显示或播放这些文件的内容。提供此类内容的所有 Web 页还应该提供指向插件的链接,该插件符合前面各部分所述的建议内容。

插件通常可以通过检查页面的 HTML 中是否存在 <object> 标记进行检测。但是,某些插件制造商会要求使用专用标记。

与插件一样,Applet 也可以通过在 Web 页的 HTML 源文件中是否存在 <object> 标记进行识别。此外,<applet> 标记也可能表示 Web 页中包含 Applet。

参考资料

建议参阅下列资源来获取本主题的详细信息:


© Sun Microsystems 2005。Java BluePrints Solutions Catalog 中的所有内容受版权保护,未经 Sun Microsystems 的明确书面许可,不得在其他产品中发布。