Web アプリケーションでのアクセシビリティの実装: デザインの詳細
このサンプルアプリケーションのデザインでは、アプリケーションのアクセシビリティを実装する方法の一部を具体的に紹介します。非常に単純なアプリケーションで、Web アプリケーションのアクセシビリティを実装する方法の具体例となる一群の HTML ページから構成されているだけです。(もう 1 つの例の Java[tm] Adventure Builder Reference では、その消費側 Web アプリケーションでこれと同じ種類の仕組みが使用されており、508 規則に準拠して、アクセシビリティを実装しています)。
以下は、サンプルアプリケーションの一部ページの簡単な紹介です。
image.html
color.html
form.html
navigational_link.html
table.html
以下では、これらのページについてもう少し詳しく説明します。
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
: このページは、テキストラベルなどの、色以外の識別方法を組み合わせる方法を示しています。ページに、赤と緑の 2 つのボタンがあります。次がそのソースコードです。
<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>
<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>
タグの header
と id
属性を使用する方法、あるいは <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. 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.