Web アプリケーションでのアクセシビリティの実装

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 技術およびそれら技術の使用に関する推奨事項をまとめています。表のあとに、例とともに、それら推奨事項を各項に分けて詳しく説明します。

Web 技術 推奨事項
<img> タグ
あらゆるものに alt テキストを提供する。画像に間隔を入れるには、空の alt を使用する。
要素の明滅
2 Hz 〜 55 Hz の範囲の周期で画面を明滅させない。

色とともに、テキストラベルなどの他の識別方法を組み合わせる必要がある。
スタイルシート
スタイルシートを無効にした状態でアプリケーションをナビゲートできること。また、このことがユーザー定義のスタイルシートの妨げにならないこと。
イメージマップ クライアント側イメージマップで、アクティブな領域ごとに専用の代替テキストを持たせられるようにする。ブラウザを使わないクライアントには、サーバー側のリンクを特定するのは困難なため、クライアント側イメージマップをサーバー側イメージマップに優先させる。 冗長なテキストリンクを使用して、サーバー側イメージマップでページにアクセスできるようにする。

<th> および <td> タグの headerid 属性、または<th> および <td> タグの scope 属性を使用する。
フレーム サポートされている場合は、title 属性を使用する。または、各フレームの本体内にテキストを含むフレームに、そのフレームを明確に識別するラベルを付ける。
スクリプト言語 スクリプトが表示するものに関して正確なメッセージを伝える代替テキストをスクリプトに用意する。
フォーム
<label> タグを使用して、フォームコントロールに説明を付ける。この説明は、コントロールの横に表示する。
ナビゲーションリンク
繰り返しの多いナビゲーションリンクを省略できるようジャンプリンクを提供する。
期限付き応答
プロンプトでユーザーに警告し、十分な応答時間を与える。フォームが大きすぎないようにする。フォームを短縮できない場合はタイムアウト時間を長くする。
非 HTML コンテンツの参照
アクセシビリティ要件に準拠したプラグインへのリンクを提供する。

コンテンツ

非テキスト情報

非テキスト要素とは、画像はグラフィック、オーディオクリップなど、絵 (ピクチャ) や音 (サウンド) だけで意味を伝えるものを指します。たとえばボタンやチェックボックス、ピクチャ、埋め込みまたはストリーミングオーディオなどが、これに当たります。アクセシビリティを持たせるには、非テキスト要素のすべてに、それと等価のテキストを持たせる必要があります。 

等価のテキストとは、非テキスト要素の目的を表す言葉を追加することを意味します。たとえば画像が「次の画面に移動」または「ページの先頭に戻る」などのナビゲーションアクションを示す場合、その画像には、その目的、言い替えれば、その画像が指示することを明記したテキストを付ける必要があります。 グラフィックスまたはサウンドを使用してページの内容を生成する場合、それらのコンポーネントには、説明テキストを付ける必要があります。 

非テキスト要素に関連付けられたテキスト情報は、可能な限り、その元の要素と同じ情報を伝えるようにします。たとえば画像がアクションを示す場合は、テキストでそのアクションの内容を説明します。実際にテキスト説明を必要とする非テキスト要素の種類は、内容の理解のために必要な情報を提供する要素、あるいはナビゲーションを容易にするための要素に限定されます。Web ページの作成者はしばしば、間隔を空けるのに透明なグラフィックを使用します。そうした要素に説明テキストを追加すると、スクリーンリーダーのユーザーには不必要に煩雑になります。そうしたグラフィックには、空の alt 属性が適切です。 たとえば次のように使用します。
<img src=”transparent.gif” alt=” “>
アクセス支援技術デバイスがテキスト情報を認識できるように提供する方法はいくつかあります。 たとえば <img> タグは alt 属性を受け付けるため、Web デザイナは、<img> 内に直接、ピクチャを説明するテキストを含めることができます。次に例を示します。
<img src="pictureofme.jpg" alt="this is a picture of me">
同様に、Java[tm] アプレットの <applet> タグも alt 属性を受け付けますが、これは、Java のサポートがあるブラウザでしか機能しません。低速のインターネット接続の場合、しばしば、Java アプレットのサポートは無効にされます。説明テキストを提供するためのより良い方法は、単に、開始および終了 <applet> または <object> タグの間に代替テキストを挿入することです。たとえば MyCoolApplet というアプレットとともに、そのアプレットが現在のさまざまな株価を表示するティッカーであるという説明を Web ページに含める場合は、次のコードを使用できます。
<applet code="MyCoolApplet.class" width="200", height="100">
This applet displays current stock prices for many popular stocks
</applet>
最後に、説明テキストを提供するもう 1 つの方法として、ページの周囲コンテキストにテキストを含める方法があります。
Below is a picture of me during my great vacation!<p>
<img src="pictureofme.jpg">
Web サイトにマルチメディア情報を含める場合は、アクセシビリティ機能を持つ代替の情報ソースを提供するようにします。Web ページにオーディオプレゼンテーションがある場合、そのオーディオと等価のテキストを提供して、聴力に障害がある人がその内容を理解できるようにする必要があります。オーディオとビデオ両方のマルチメディアプレゼンテーションにオーディオが含まれている場合は、オーディオ部分にキャプションを付けます。マルチメディア作品のオーディオ部分にキャプションを付ける場合、そのキャプションとオーディオを同期させます。キャプションを読む人が話し手を観察し、関係するボディーランゲージと話し言葉を関連付けられるようにするには、キャプションの同期が必要です。

Web サイトにオーディオストリームしかない場合、キャプションを付ける必要はありません。ただし、オーディオは非テキスト要素であるため、等価のテキスト (すなわち、トランスクリプト) を利用できるようにする必要があります。 同様に、Web のスライドショープレゼンテーションにオーディオによる説明を付ける必要はありませんが、どのグラフィックにも代替テキストを関連付ける必要があります。

要素の明滅

光過敏症の人の中には、表示の明滅やフラッシュ、点滅が原因で発作を起こすことがあります。特に、フラッシュが高輝度で、特定の周期範囲で起きる場合がそうです。ページは、2 Hz 〜 55 Hz の範囲の周期で、画面が明滅しないようにデザインします。 

通常、フラッシュまたは明滅する要素は、動画 GIF や Java アプレット、他社製のプラグインまたはアプリケーションなどのテクノロジを使用して追加されます。Java アプレットや他社製のプラグインは、それぞれ <applet> または <object> タグが存在することで知ることができます。 動画 GIF は通常の画像ファイルのように単一のファイルでダウンロードされる画像ですが、短い時間の間に内容が変化します。  他の画像同様、動画 GIF は通常 <img> タグを使用して取り込まれます。

構造化

画面要素またはコントロールを識別する唯一の手段として色を使用すると、色覚異常や低視力など、視力に障害がある人が Web ページを利用できないことがあります。 

色を使用して大切な機能を強調することは許されますが、色とともに、テキストラベルなどの他の識別方法を組み合わせる必要があります。強調テキストを示す色の使用だけでなく、アクションを示す色の使用にも注意してください。たとえば「開始するには緑色のボタンを押す」ことをユーザーに指示する Web ページでは、色以外の方法で緑色のボタンが特定されるようにします。 

Web ページがこの要件を満たしているかどうかを見分ける簡単な方法が 2 つあります。白黒モニターでページを表示するか、白黒プリンタでページを印刷してみます。どちらの方法でも、色を排除することによってページの使い勝手に影響があるかどうかがすぐに分かります。

スタイルシート

Web サイトのデザイナは、スタイルシートを利用することによって、統一のとれた外観を持ち、容易に更新可能な Web ページを作成できます。たとえばスタイルシートがない場合、周囲のテキストに影響がないように見出しを大きなフォントで表示するには、ドキュメントに非表示の独立したタグを埋め込み、フォントサイズや太字を制御する必要があります。このため、低視力のユーザーは、背景が黒で白い文字を使用し、特に大きなフォントですべてのテキストを生成するスタイルシートを使用することがあります。デザイナがユーザー定義のスタイルシートを無効にするようにページを作成した場合、障害のある人たちはそれらのページを使用できなくなる可能性があります。このため、アクセシビリティのためには、Web ページがユーザー定義のスタイルシートの妨げにならないようにすることが重要です。

イメージマップ

「イメージマップ」は、他の Web ページへの「リンク」を提供する、Web ページ上のピクチャです。このリンクは、画像上でユーザーのクリックした位置によって異なります。基本的に、イメージマップは、クライアント側とサーバー側の 2 種類あります。

クライアント側イメージマップでは、ピクチャ内のそれぞれのアクティブな領域に、ピクチャのその部分が選択されたときに読み出す Web ページを指定したリンクが割り当てられます。ピクチャに代替テキストを含むことができるのと同様、アクティブな領域にも、それぞれ専用の代替テキストを含めることができます。クライアント側イメージマップから特定の一群の命令を読み出すと、Web ブラウザは、そのマップの 1 つの領域が選択されたときに起きるアクションに関するすべての情報を受信します。このため、その性格上グラフィカルではありますが、クライアント側イメージマップは、マップに関するリンクを、支援技術を使用して読み取ることができるテキスト形式で表示することができます。使用できる幾何学的図形を使用して領域を定義できない場所を除き、クライアント側イメージマップはサーバー側イメージマップに優先されます。

サーバー側イメージマップの場合、領域内のクリックは、単にイメージ内の座標を指定するだけです。選択された URL は、その Web ページのサービスを提供しているコンピュータによって解読される必要があります。Web ページがサーバー側イメージマップを使用して、ユーザーに一群の選択肢を提供している場合、マップの 1 つの領域がアクティブにされたときに辿る URL を、ブラウザが指示することはできません。このため、マップを見たり、あるいはマップ内を正確にクリックしたりできない人には、ページにアクセスするための冗長なテキストリンクが必要になります。

大量のデータからなる表は、アクセシビリティの面で大変な問題をもたらします。スクリーンリーダーが読みとる特定のセルと、そのセルの対応する列見出しと行名とを関連付けることが不可能なことがあるため、スクリーンリーダーが表内で混乱する可能性があります。たとえば給与表の社員給与が等級とステップ別になっていると仮定しましょう。表の各行は等級を表し、各列はステップを表します。つまり、等級 9、ステップ 5 に対応する給与を見つけるには、9 行目、5 列目のセルを探すことになります。しかし、給与表が 15 等級、10ステップから構成される場合、表には少なくとも 150 個のセルがあります。7 行目、8 列目にあたるユーザーは、表の使用が難しくなるかもしれません。

正しく理解するために、情報を表形式にする必要がある場合は、<pre> タグによる事前の書式付きの表を使用するのではなく、適切な表タグを使用して、情報をレイアウトするようにします。データ表の場合は、行と列の見出しを定義します。 

支援技術を使用して、HTML 表を読み取りやすくする方法はいくつかあります。1 つの方法は、<th> および <td> タグの header および id 属性を使用して、セルの内容を列見出しに関連付けることです。もう 1 つの方法として、<th> および <td> タグの scope 属性を使用して、列と行を、それら列または行内のセルに関連付ける方法もあります。次に例を示します。
<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>
JavaServer Faces アプリケーションでは、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 属性を生成します。

2 つ以上の論理レベルの行または列見出しがあるデータ表では、データセルとヘッダーセルの間の関連付けは、より手間のかかるものになります。 表 1.1 は、2 つの場所 San Jose と Seattle の日付とカテゴリ (食事、ホテル、交通) 別の旅費を示しています。

表 1.1 旅費報告

食事
ホテル
交通
小計
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> タグを使用し、表の横または本体内にサマリーを置くようにするとよいでしょう。表内容のアクセシビリティのための代替手段として、表サマリーを使用してはいけません。

表に関して、スクリーンリーダーや他の種類の支援技術の利用者が頻繁に体験するもう 1 つの問題は、書式付けの目的で、語句や文などの長いテキスト要素が表内にある場合に起きます。 表のセル内でテキストが「折り返され」ている場合、支援技術の利用者がその意味を理解することは困難であるか、または不可能です。この問題を回避して、障害を持つ人に完全なアクセシビリティを提供するページの作成を望む場合は、テキストに書式を付ける際の表の使用を避けるようにしてください。

フレーム

Web サイトでフレームが使用されている場合、1 つのフレームだけ更新されて、残りのフレームは一定であることがよくあります。フレームを使用すると、画面の一定の部分がユーザーに提供されるため、フレームは Web サイトのナビゲーション用ツールバーにしばしば使用されます。また、画面全体ではなく一部だけ更新されるため、しばしば高速でもあります。説明的なラベルを付けられたフレームは、スクリーンリーダーや他の支援技術の利用者には貴重です。上、下、左などのラベルは、フレームに含まれているものに関する手がかりにはほとんどなりません。しかし、「ナビゲーションバー」や「主目次」などのラベルは、より意味があり、フレームの識別とナビゲーションを容易にします。

フレームにラベルを付けるもっとも明白な方法は、各フレームの本体内に、そのフレームを明確に識別するテキストを含めることです。たとえばナビゲーションバーの場合は、フレームのコンテンツの先頭に「ナビゲーションリンク」などの語句を入れることによって、そのフレームがナビゲーションリンクを表すことをすべてのユーザーに伝えることができます。frame タグの title 属性にフレームの機能説明を含めるという方法もあります。現状では、主要な支援技術メーカーによってサポートされていませんが、title 属性は HTML 4.0 仕様に規定されています。この属性の目的は、Web 開発者が引用符で囲まれた文字列としてフレームの説明を挿入することを可能にすることにあります。目次と主目次フレームを含むフレームセットの例を、次に示します。
<frameset ... >
    <frame title="Table of Contents" src="TOC.html" name="toc" />
    <frame title="Main Content" src="Front.html" name="main" />
</frameset>

スクリプト言語

しばしば、スクリーンリーダーは、数字と文字の無意味な寄せ集めでスクリプトの内容を読み上げます。このため、Web アプリケーション開発者は、スクリプトとともに、そのスクリプトが表示するものに関して正確なメッセージを伝えるテキストを含めるべきです。

たとえば、基本的なデフォルト値で HTML フォームの内容を埋める目的にのみ Web ページでスクリプトを使用している場合、その Web ページのアクセシビリティは良くなるでしょう。これは、スクリプトによってフォームに挿入されるテキストがスクリーンリーダーによって読み上げ可能であると考えられるからです。しかし、アイコン上にユーザーがポインタを置いたときにメニューのオプションからなるグラフィックマップを作成するためのスクリプトを Web ページが使用している場合、その Web サイトのデザイナは、メニューのオプションに対応する冗長なテキストリンクを含めるべきです。これは、機能に関する各メニューオプションのテキストを支援技術に生成できないためです。支援技術と JavaScript[tm] 規格の両方が進化し続けているため、Web ページがこの要件を満たすかどうかを判定するには、Web サイトのデザイナによる綿密なテストが必要になるかもしれません。

フォーム

HTML フォームは、Web で一般的な対話の仕組みです。情報の収集、サービスの申請許可、購入などは、数多くあるフォームの用途のほんの一部にしかすぎません。

現在のところ、フォームコントロールとスクリーンリーダー間の対話はそれらコントロールを含むページのデザインに依存しており、予測不可能となる場合があります。表の異なるセルにコントロールのラベルとコントロールそのものを配置する開発者もいれば、コントロールそのものとは離れたさまざまな場所にコントロールラベルを置く開発者もいます。後者の場合、スクリーンリーダーからの応答は、正確とはいえないものになることが多くあります。フォームコントロールの記述には <label> タグを使用し、説明がコントロールの横に表示されるようにすることを推奨します。
<label for="username">Input User Name: </label>
<input type="text" name="j_username" size="16" id="username"/>
JavaServer Faces の outputLabel タグは、特定の入力フィールドにラベルを付けるのに使用されます。この例では、outputLabel タグによって、userName 入力フィールドのラベルが生成されます。
<h:inputText id="userName" />
<h:outputLabel for="username"
    <h:outputText id="userNameLabel" value="Input User Name: " />
</h:outputLabel>

ナビゲーションリンク

Web ページの開発者は、通常、標準的な場所 (大体が、ページの上または下の横方向、またはページ側面) にいくつかのサイト固有のナビゲーションリンクを配置します。ナビゲーションリンクを選択して別のページに移動するのではなく、同じ Web ページまたはサイトに戻った場合、通常は、単にリンクをやり過ごして目的のテキストがある場所から読み始めればいいだけです。しかし、スクリーンリーダーあるいはその他の支援技術を利用している人には、支援技術が、実際の内容に行く前に標準のナビゲーションリンクを 1 つ 1 つ告げるのを待つという退屈な時間になります。このため、Web ページのデザイナは、ユーザーが繰り返しのナビゲーションリンクをスキップできるよう、ジャンプリンクなどの仕組みを提供するとよいでしょう。ジャンプリンクの例を次に示します。
<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>

期限付き応答

指定した時間内に応答がない場合に画面から消えるか期限切れになるように、スクリプトを使って Web ページをデザインすることができます。この方法は、セキュリティー上の理由であることもあれば、Web ページにサービスを提供しているコンピュータ上の要求を減らすためであることもあります。障害は、読み取り、移動、Web フォームへの入力を行うスピードに直接影響します。たとえば、きわめて低視力の人は、通常の人より読むのが遅くなります。ページを読み終える前に時間切れになるかもしれません。多くのフォームは、時間切れになると、入力されていたデータもすべて自動的に削除します。この結果、データの入力に時間がかかる人はフォームを完成できないことになります。このため、期限付きの応答が必要な場合は、十分な時間を提供できるよう、時間延長が必要かどうかを示すプロンプトでユーザーに注意を促すべきです。フォームが大きくならないようにして、データを保存するオプションを提供し、ユーザーに残り時間を通知することも役に立ちます。

HTML 以外のコンテンツの参照

多くの Web ページが標準の HTML で書かれています。これに対し、多数の HTML ページに埋め込まれているリンクは、Real Audio や Flash、PDF などの独自仕様のファイル形式を示します。こうした形式は、マルチメディアあるいは非常に正確に定義されたドキュメントなどの特殊な内容を送信、表示するためのものです。これらファイル形式は独自の仕様であるため、通常、Web ブラウザがそれらのファイルを描画することはできません。

ユーザーのコンピュータに「プラグイン」という追加プログラムをダウンロードし、インストールすることによって、Web ブラウザがそれらのファイルの内容を再生または表示できるようになります。こうしたコンテンツを提供する Web ページでは、これまでのセクションで説明した推奨事項に従った、プラグインへのリンクも同時に提供するとよいでしょう。

通常、プラグインは、ページの HTML に <object> タグがあるかどうかを調べることによって検出できます。ただし、プラグインメーカーの中には、専用のタグの使用を求めているところもあります。

プラグイン同様、アプレットも、Web ページの HTML ソースに <object> タグを置くことで指定できます。また、<applet> タグによって、Web ページへのアプレットの取り込みが指示されることもあります。

参考資料

この項目に関するさらに詳しい情報としては、次の資料を推奨します。


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