DHTML アクセシビリティ
Microsoft Corporation
日本語版最終更新日 2001 年 5 月 31 日
この記事では、DHTML (Dynamic HTML) と Microsoft® Internet Explorer 4.0 およびそれ以降を使用して、アクセシビリティの高い Web ページを作成する方法について説明します。アクセシビリティの高い Web ページは、Web ページの表示と入力のための代替方式を提供します。従来の HTML はコンテンツを階層として表現し、Web ページを特殊なニーズを持つユーザーにとってアクセスしやすくするツールを簡単に開発できるようにしていました。DHTML は、アクセシビリティのサポートの強化を含めて、その他の機能を追加しています。
この記事には、アクセシビリティの高い Web ページの作成の要件を説明する以下のセクションがあります。
アクセシビリティの高い Web ページとは何か ?
ユーザーが Web ページを対話的に操作するときには、アクセシビリティの問題が発生することがあります。たとえば、ユーザーは視覚に障害があるためにページの内容を見られないことがありますし、マウスをうまく操作できないためにページを対話的に操作できないことがあります。アクセシビリティの高い Web ページは、これらのタスクを実行するための代替手段を提供します。
Web ページの第 1 のアクセシビリティ要件は、そのコンテンツを視覚的に、および非視覚的に表現できるということです。画面読み上げソフトと呼ばれるタイプのプログラムを Internet Explorer と組み合わせることで、音声 (ボイス シンセサイザー) や触覚 (点字) などの視覚以外の感覚を通してユーザーにページを提示することができます。第 2 の要件は、ユーザーがマウス以外の装置 (キーボード入力など) を使って、Web ページのすべてのパーツにアクセスできなくてはならないということです。
Internet Explorer は、HTML の階層構造を利用して、大部分の Web ページを自動的にアクセス可能にします。たとえば、a オブジェクトはページ上のどの領域をユーザーがクリックできるのかを示しているので、Internet Explorer はユーザーが任意の a オブジェクトに TAB キーで移動し、ENTER キーを押してリンクを追えるようにします。また、Internet Explorer は a 要素が囲んでいるテキストを自動的に画面読み上げソフトに渡し、リンクを音声で説明させます。
アクセシビリティの高い Web ページの作成のためのヒント
アクセシビリティの高い Web ページを作成しようとすると、Internet Explorer が Web ページをアクセス可能な形で公開するのを妨げる問題に遭遇することがあります。このセクションのヒントに従うことで、これらの問題を回避することができます。
- マウス クリックに応答する、ページ上のすべてのテキスト領域に、アンカーを使用します。
DHTML を使うと、クリック イベントをほぼ任意のテキスト要素に関連付けることができますが、アクセシビリティ上の理由から、このイベントは a 要素のみに関連付けるようにしてください。アンカーにより、キーボード ユーザーは、キーボードを使ってページ上の領域にナビゲートできるようになります。また、アンカーを使うと、画面読み上げソフトが、Web ページのどの部分がインタラクティブなのかを識別するために使用するヒントを提供することができます。また、アンカーを使ってクリック可能な領域を指定することで、ユーザーがこれらの領域にマウスを置いたときに、マウス カーソルを自動的に「手」のカーソルに変化させることができます。
注 通常、アンカーは、クリックされると他の Web ページやブックマークにナビゲートします。アンカーが他の位置に自動的にナビゲートするのを防ぐには、アンカーのクリック時に実行されるスクリプトで、 window. event オブジェクトの returnValue プロパティを false に設定します。
- label オブジェクトを使って、組み込みコントロールにテキストを関連付けます。
HTML 3.2 仕様は、ラジオ ボタンやテキスト ボックスなどの組み込みコントロールにテキストを関連付ける手段を持っていません。終了要素 (/A) でテキストを囲む a 要素とは異なり、input 要素は終了要素を持っていません。
終了要素がないため、画面読み上げソフトは、コントロールをユーザーに対して説明するために使うテキストを探すのが難しくなります。HTML 4.0 では、テキストを組み込みコントロールなどの他の HTML 要素に関連付けるために使用できる label オブジェクトが追加されました。label オブジェクトを使うことのもう 1 つの利点は、ユーザーがラベルをクリックしても、対応するコントロールを直接にクリックしても、同じ効果が発生することです。
label オブジェクトをラジオ ボタンに関連付けるには、次の HTML 構文を使用します。
<FORM>
<INPUT TYPE=radio ID=FirstButton NAME=radio1>
<LABEL FOR=FirstButton>I'm the text for the first radio button</LABEL><BR>
<INPUT TYPE=radio ID=SecondButton NAME=radio1>
<LABEL FOR=SecondButton>I'm the text for the second radio button</LABEL>
</FORM> - つねに TITLE 属性の値を割り当てます。
HTML 4.0 の TITLE 属性を使って、HTML タグに説明を追加することができます。この機能は、通常はテキスト情報が関連付けられていない要素にとって特に重要です。このような要素には、イメージ マップの領域を指定するために使われる area オブジェクトや、Web ページのバックグラウンドで再生するサウンド ファイルを指定する bgSound オブジェクトなどがあります。
次の例は、bgSound オブジェクトと TITLE 属性を使って、バックグラウンド サウンドの説明を追加しています。
<BGSOUND SRC="soundfile.mid" TITLE="Sound of falling water"> - カスケーディング スタイル シート (CSS) のポジショニング機能を使用するときには、座標を "em" 単位で指定します。
Internet Explorer 4.0 およびそれ以降では、CSS の配置機能を使って、要素を Web ページ上の正確な位置に配置することができます。ただし、ユーザーがデフォルトのフォント サイズを変更したり、ページ上のフォント サイズを上書きしていると、問題が生じることがあります。絶対配置されたオブジェクトは、正しく作成されないと、サイズが大きくなって互いに重なり合うことがあります。この問題を避けるには、配置するオブジェクトの座標を "em" 単位で指定します。
em は、インチやピクセルに似た測定単位ですが、デフォルトのフォント サイズに応じて変わる点が異なります。言い換えると、デフォルトのフォント サイズが増えると、1 em の値も増えます。em はピクセルよりも大きいサイズです。1 em は、標準のフォント サイズではほぼ 10 ピクセルに相当します。em 単位で正しく配置され、サイズが指定されたコンテンツは、フォント サイズが拡大されても自動的に調整されます。 絶対配置される div 要素を指定するには、次の構文を使用します。
<DIV STYLE="position: absolute; left: 10em;top: 12em;height: 5em; width: 5em">
Here is some positioned text!
</DIV> - 配置された HTML コードのアクセシビリティをテストします。
このセクションでは、配置されたオブジェクトのアクセシビリティをテストすべき状況の例を示します。たとえば、em 単位で配置された HTML 要素を使用するページを作成するときには、Microsoft® Windows® の画面設定で、小さなフォントと大きいフォントを切り替えてみます。また、[インターネット オプション] ダイアログ ボックスの [ユーザー補助] オプションで、[Web ページで指定されたフォント サイズを使用しない] を選択します。次に、[表示] メニューの Internet Explorer のフォント サイズを [最大] に設定します。最後のテストとして、コントロール パネルの [ユーザー補助] オプションの [画面] タブで、ハイコントラスト モードをオンにします。これらの設定は、Web ページの要素のフォント サイズを、障害のある方が一般に使用する値に設定します。 - クライアント サイド イメージ マップを使ってキーボード ナビゲーションを単純化します。
クライアント サイド イメージ マップは、ユーザーが個々の定義済み領域間を TAB キーで移動できるので、サーバー サイド イメージ マップよりもアクセシビリティが高くなります。キーボード ナビゲーションをさらに簡略化するには、イメージ マップの個々の定義済み領域にアンカーを追加します。これにより、ユーザーは目的のリンクに TAB キーで移動し、ENTER キーを押すだけで済むようになります。
アクセス可能な HTML 要素
HTML 要素の中には、アクセス可能なもの (画像、テキスト、およびリンク) とそうでないものがあります。HTML ドキュメントの中の個々のアクセス可能な要素 (タグ) は、ドキュメントのアクセシビリティ階層の中に表現されます。アクセシビリティ階層の詳細については、Active Accessibility サポート を参照してください。
以下の要素がアクセス可能です。
アクセス不可能な要素は、要素の TABINDEX 属性の値を指定することでアクセス可能にすることができます。以下の要素はアクセス不可能です。
|
