Stephanie Bodoff、Amy Roh
英語の辞書では、「accessible」は近付きやすい、あるいは入りやすいと定義されています。 視力や聴力に障害をもつ人には、しばしば、Web アプリケーション、およびそのアプリケーションの呼び出しに使用するユーザーエージェント (ブラウザ) のアクセシビリティが良くないことがあります。マウス以外の対話方法を使用できるようになっていなかったり、視力に障害のある人が知覚できない画像などのアーティファクトが含まれていたりすることがあります。
アクセシビリティを実装するには、Web ページやアプリケーションが「アクセス支援技術」をサポートしている必要があります。 支援技術は、障害を持つ人に役立ちます。 支援技術は、特化された入力および出力機能を提供します。
支援技術としてはたとえば次のようなものがあります。
連邦法により、米国政府の情報調達技術は、アクセシビリティを保証するいくつかの要件を満たすように求められています。米国リハビリテーション法 508 条では、連邦政府機関の電子および情報技術は、障害を持つ人がアクセスできることを求めています。米国政府の要件に加えて、World Wide Web コンソーシアム (http://w3c.org)
の Web アクセシビリティ構想では、Web 開発者がアクセシビリティを備えた Web サイトおよびアプリケーションを作成するのに役立つ、一連の指針および技術的な推奨事項 (http://w3c.org/TR/WCAG10-TECHS/
) を策定しています。
以降のセクションでは、Web コンテンツのアクセシビリティに関する 米国政府および WWW コンソーシアムの推奨事項をまとめています。マルチメディアなどのコンテンツと、フレームなどの 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] アプレットの<img src="pictureofme.jpg" alt="this is a picture of me">
<applet>
タグも alt 属性を受け付けますが、これは、Java のサポートがあるブラウザでしか機能しません。低速のインターネット接続の場合、しばしば、Java アプレットのサポートは無効にされます。説明テキストを提供するためのより良い方法は、単に、開始および終了 <applet>
または <object>
タグの間に代替テキストを挿入することです。たとえば MyCoolApplet
というアプレットとともに、そのアプレットが現在のさまざまな株価を表示するティッカーであるという説明を Web ページに含める場合は、次のコードを使用できます。
最後に、説明テキストを提供するもう 1 つの方法として、ページの周囲コンテキストにテキストを含める方法があります。<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 は通常の画像ファイルのように単一のファイルでダウンロードされる画像ですが、短い時間の間に内容が変化します。
他の画像同様、動画 GIF は通常 <img>
タグを使用して取り込まれます。<pre>
タグによる事前の書式付きの表を使用するのではなく、適切な表タグを使用して、情報をレイアウトするようにします。データ表の場合は、行と列の見出しを定義します。 <th>
および <td>
タグの header および id 属性を使用して、セルの内容を列見出しに関連付けることです。もう 1 つの方法として、<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
属性を生成します。食事 |
ホテル |
交通 |
小計 |
|
San Jose |
||||
24-Aug-2004 |
37 |
112 |
45 |
|
25-Aug-2004 |
27 |
112 |
45 |
|
小計 |
64 |
224 |
90 |
378 |
Seattle |
||||
26-Aug-2004 |
95 |
109 |
36 |
|
27-Aug-2004 |
35 |
109 |
36 |
|
小計 |
130 |
218 |
72 |
420 |
合計 |
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 属性は、表内容の要約方法の 1 つとして一部の人により強く推奨されていますが、実際には確実に推奨できるほどは主要な支援技術メーカーによってサポートされていません。このため、Web 開発者は、<caption>
タグを使用し、表の横または本体内にサマリーを置くようにするとよいでしょう。表内容のアクセシビリティのための代替手段として、表サマリーを使用してはいけません。<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 ページへのアプレットの取り込みが指示されることもあります。この項目に関するさらに詳しい情報としては、次の資料を推奨します。