Making Web Applications Accessible: Design Details

The design of this sample application illustrates some of the techniques for making an application accessible. This sample application is very simple and is just a set of HTML pages where each page demonstrates one of the strategies for making a web application accessible. (For another example, the Java[TM] Adventure Builder Reference application uses this same type of mechanism in its consumer web application, which has been made accessible and complies with the 508 rules.)

We will briefly explain some of the pages from the example application: The following sections describe these pages in more detail.

image.html: This page shows how an image can use the alt tag to provide a text description of an image. The key HTML source code is:
 <img src="logo_java_grey.gif" alt="this is a java logo image">
which causes the text "this is a java logo image" to display when the mouse rolls over the image.

color.html: This page shows how some other method of identification than color, such as text labels, must be combined. The page has two buttons, one red and one green. The key source code is:
<img src="button-green.gif" alt="this is a green button">
<img src="button-red.gif" alt="this is a red button">

form.html: This page shows how to use the <label> tag to describe a form control. The description should appear adjacent to the control. Here are some of the key parts of this code:

<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: This page shows how to handle navigational links for accessibility. Here is a key code snippet:
 <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: This page shows how to use the header and id attributes of the <th> and <td> tags or use the scope attribute of the <th> and <td> tags for accessibility. Here is the key source for this page:

 <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>

You can examine the example application and code for more detail.


© Sun Microsystems 2005. All of the material in The Java BluePrints Solutions Catalog is copyright-protected and may not be published in other works without express written permission from Sun Microsystems.