使 Web 应用程序易于访问:设计详细信息

此样例应用程序的设计说明了使应用程序易于访问的一些技术。此样例应用程序非常简单,它就是一组 HTML 页,其中每一页都演示了一个使 Web 应用程序易于访问的策略。(另一个示例 Java[TM] Adventure Builder Reference 应用程序在其使用者 Web 应用程序(易于访问且符合 508 条款规则)中使用同一类型的机制。)

我们将简单说明一下示例应用程序中的某些页: 以下各部分对这些页进行了更详细的描述。

image.html此页显示图像如何使用 alt 标记提供图像的文本描述。主要的 HTML 源代码显示如下:
 <img src="logo_java_grey.gif" alt="this is a java logo image">
当鼠标滚动到图像上时,会显示文本 "this is a java logo image"

color.html此页显示了如何结合使用除颜色外的其他标识方法,如文本标签。该页具有两个按钮:一个为红色,一个为绿色。主要的源代码显示如下:
<img src="button-green.gif" alt="this is a green button">
<img src="button-red.gif" alt="this is a red button">

form.html此页显示了如何使用 <label> 标记描述表单控件。描述应该显示在控件的周围。下面是此代码的一些主要部分:

<label for="username">Input User Name: </label>
<input type="text" name="j_username" size="16" id="username">
<label for="password">Password: </label>
<input type="password" name="j_password" size="16" id="password">


navigational_link.html此页显示了如何处理易访问性的导航链接。下面是主要的代码片段:
 <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>
table.html:此页显示了如何将 <th><td> 标记的 headerid 属性或者将 <th><td> 标记的 scope 属性用于易访问性。下面是此页的主要源代码:

 <TABLE cellpadding="2" cellspacing="2" border="1" width="100%">
<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>

您可以查看示例应用程序和代码以了解更多详细信息。


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