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:
image.html
color.html
form.html
navigational_link.html
table.html
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>
<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.