作者:Stephanie Bodoff 及 Amy Roh
词典将 accessible 定义为很容易接近或访问。对于残障人士(例如视力或听力障碍的人士)来说,Web 应用程序和用来调用应用程序的用户代理(浏览器)通常并非易于访问。除鼠标之外,它们可能不支持使用其他交互技术,或者可能包含让视力障碍的人士无法感知的事物,如图像。
为了便于访问,Web 页和应用程序必须支持辅助技术。辅助技术对于残障人士是很有用的。辅助技术提供了专用的输入和输出功能。
提供辅助技术的示例包括:
美国联邦法律规定,美国政府采购信息技术产品时应满足特定的要求,即保证提供易访问性功能。第 508 条款部分要求联邦机构所拥有的电子和信息技术对于残障人士来说是易于访问的。除了美国政府的要求外,万维网联合会 (http://w3c.org)
Web 易访问性计划制订了一系列的准则和技术建议,如需了解为 Web 开发者提供帮助来创建易于访问的 Web 站点和应用程序的信息,请访问 http://w3c.org/TR/WCAG10-TECHS/
。
以下各部分概述了美国政府和万维网联合会对 Web 内容易访问性的建议。这些部分围绕着与内容相关的主题(例如多媒体)和 HTML 页构建机制(例如框架)进行组织。
如果不能在任何其他方面保证遵守上述建议,也应该提供具有等效信息或功能的只包含文本的页面。只包含文本的页面内容都应当随着主要页面的更改而进行更新。
Web 技术 | 建议 |
---|---|
<img> 标记 |
为所有内容提供 alt 文本。使用空的 alt 为图像提供间距。 |
闪烁元素 |
避免屏幕在频率大于 2 Hz 和小于 55 Hz 时闪烁。 |
颜色 |
某些其他标识方法(如文本标签)必须与颜色结合使用。 |
样式表 |
确保可以导航未启用样式表的应用程序,并确保这不会影响用户定义的样式表。 |
图像映射 | 通过客户端图像映射,每个活动区域都可以具有其自己的替代文本。客户端图像映射要优于服务器端图像映射,这是因为确定服务器端上的链接对非浏览器客户端来说是很困难的。如果使用服务器端图像映射,则必须使用冗余的文本链接才能访问页面。 |
表 |
使用 <th> 和 <td> 标记的 header 和 id 属性,或者使用 <th> 和 <td> 标记的 scope 属性。 |
框架 | 使用 title 属性(如果支持),或者标记框架(在每个框架主体内的清晰标识框架的标签上包含文本)。 |
脚本语言 | 提供替代的脚本文本,该文本传达脚本所显示内容的准确消息。 |
表单 |
使用 <label> 标记描述表单控件。描述应该显示在控件附近。 |
导航链接 |
提供一个跳转链接,用户可以通过该链接跳过重复的导航链接。 |
计时响应 |
发出提示来提醒用户,并为他们提供充足的响应时间。应确保表单不能太大,如果不能缩小表单,则必须增加超时时间。 |
引用非 HTML 内容 |
提供一个指向插件的链接,该插件符合易用性要求。 |
alt
属性,例如:
可以使用若干种方法提供文本信息以便它可以由辅助技术设备进行识别。例如,<img src=”transparent.gif” alt=” “>
<img>
标记可以接受 alt
属性,通过该属性 Web 设计者可以将描述图片的文本直接包含在 <img>
标记中。例如:
同样,Java[TM] Applet 的<img src="pictureofme.jpg" alt="this is a picture of me">
<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>
当 Web 站点包括多媒体信息时,它应该提供替代的、易于访问的信息源。当音频表示可以在 Web 页上使用时,必须提供等效于音频的文本,以便耳聋或听力有障碍的人士理解其内容。如果音频是同时具有音频和视频的多媒体表示的一部分,则应该为音频部分添加字幕。在为多媒体产品的音频部分添加字幕时,字幕应该与音频同步。需要使字幕同步,以便阅读字幕的人可以观察说话者并将相关的身体语言与语音相关联。Below is a picture of me during my great vacation!<p>
<img src="pictureofme.jpg">
<applet>
或 <object>
标记进行识别。动画 GIF 是在单个文件中下载的图像,与普通图像文件类似,但是其内容会在短时间内发生更改。与其他图像一样,通常使用 <img>
标记来包含它们。<pre>
标记一起使用。应该为数据表标识行标题和列标题。 <th>
和 <td>
标记的标题和 ID 属性,使单元格的内容与列标题关联。另一种方法是使用 <th>
和 <td>
标记的 scope
属性,使列和行与位于那些列或行中的单元格关联。例如:在 JavaServer Faces 应用程序中,您可以使用<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>
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
属性。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 开发者不应该使用表摘要作为访问其表内容的一种替代方式。<frameset ... >
<frame title="Table of Contents" src="TOC.html" name="toc" />
<frame title="Main Content" src="Front.html" name="main" />
</frameset>
<label>
标记描述表单控件,并且描述应该出现在控件旁边:JavaServer Faces<label for="username">Input User Name: </label>
<input type="text" name="j_username" size="16" id="username"/>
outputLabel
标记用于将标签附加到指定的输入字段。在以下示例中,outputLabel
标记呈现 userName
输入字段的标签:<h:inputText id="userName" />
<h:outputLabel for="username"
<h:outputText id="userNameLabel" value="Input User Name: " />
</h:outputLabel>
<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>
<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>
<object>
标记进行检测。但是,某些插件制造商会要求使用专用标记。<object>
标记进行识别。此外,<applet>
标记也可能表示 Web 页中包含 Applet。建议参阅下列资源来获取本主题的详细信息: