DHTMLのアクセシビリティ

  • [アーティクル]
DHTML Accessibility DHTML Accessibility *
*前のトピック: フレーム間のスクリプト記述とセキュリティ
*次のトピック: DHTMLリファレンス

DHTMLのアクセシビリティ

Internet Explorer 4.0でのアクセスしやすいDynamic HTMLページの記述

従来のHTMLはWebページのコンテントと同様に構造化できるため、Webページをハンディキャップを持つユーザーにアクセスしやすいツールとして作成することは簡単であった。Dynamic HTMLでは、さらにこのアクセシビリティのサポートが機能的に強化された。以下では、インタラクティブなDynamic HTMLページを作成するオーサーに対して、誰にでもアクセスしやすいWebページであるかを確認できるヒントを示す。

アクセスしやすいWebページとは?

アクセシビリティの問題は、Webページのユーザーインターフェイスの問題である。ハンディキャップを持つユーザーにとって、ページのコンテント表示方法や、対話的な入力処理に不自由を感じる場合がそれである。このような場合、ページの表示方法やページへの入力方法を変更することで、誰でもアクセスしやすいWebページとなる。

アクセシビリティでまず必要なことは、ページを非視覚的に表現することである。たとえば、Microsoft® Internet Explorerと連動してScreen Readersプログラム（画面上のテキストを読み上げてくれるプログラム）を利用すれば、ユーザーに音声（ボイス シンセサイザ）方式のページを提供することができる。次に必要なことは、Webページへのアクセスにキーボードが使えるようにすることである。マウスクリックでページにアクセスする代わりに、キーボードからページのすべての部分にアクセスできるようにする。

HTMLの構造上の性質を利用すれば、Internet ExplorerでほとんどのWebページに簡単にアクセスすることができる。例えば、ページ上のリンク位置をAタグは示しているが、Internet Explorerでは、ユーザーはTABキーを使うことで、このAタグを順に移動することができる。また、Aタグはリンク情報のテキストを囲んでいるので、そのままInternet ExplorerでScreen Readersプログラムに提供でき、その情報をユーザーに順番に示すことが可能となる。

しかし、アクセシビリティを配慮したWebページを公開するInternet Explorerの機能を妨げる可能性もある。次に示すチップスを参考にすれば、これらの問題を回避できる。

Tip#1：マウスクリックに反応するページ上の全テキスト領域に対してAタグを使用する

Dynamic HTMLではあらゆるテキスト エレメントにクリック イベントを関連付けられるが、アクセシビリティ用途のためだけにAタグに使うようにすべきである。そうすれば、キーボード ユーザーをキーボード操作だけでこれらの領域にナビゲートでき、Screen Readersプログラムにも情報を提供することができる。Aタグを使う他の利点は、アンカー上にマウスカーソルが移動すると、自動的にカーソル形状が"手の形"に変化することである。

通常、Aタグはクリックされると、他のWebページやブックマークにナビゲートする。これを利用不可にするには、window.eventオブジェクトのreturnValueプロパティを、アンカーがクリックされたときに実行されるスクリプトでの設定と同様にFALSEにすればよい。これでデフォルトアクション（ナビゲート）がキャンセルされる。

Aタグがクリックされたときに、指定されたVisual Basic® Scripting Edition (VBScript)を実行するには、次に示す構文を使用する。

    <A HREF="" ID=anchor1>Click here</A>
    <SCRIPT LANGUAGE=vbscript>
    function anchor1_onclick

      msgbox "you clicked on anchor1"
      window.event.returnValue=FALSE

    end function
    </SCRIPT>

Tip #2：LABELタグを使って、テキストとコントロールを関連付ける

HTML 3.2の仕様では、オーサーがテキストを固有のコントロール（ラジオボタンやテキストボックスなど）と関連付ける方法がなかった。Aタグとは異なり、 INPUTタグには終了タグがない。このため、ユーザーにコントロールを記述するために使われるテキストを、Screen Readersプログラムなどで検出するのが困難であった。HTML 4.0ではLABELタグが導入され、オーサーがテキストを他のHTMLエレメントと関連付けることができるようになった。テキストを固有のコントロールに関連付ける場合にとても便利である。固有のコントロールをページで使うときは必ず、LABELタグで関連するテキストを囲むとよい。その他の利点としては、ラベルをクリックすると、関連した固有のコントロールの値を切り替えることもできる。

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>

Tip #3；常にTITLE属性に値を割り当てておくようにする

HTML 4.0のTITLE属性を使えば、HTMLタグに関する追加情報をテキストとして指定できる。この機能は、そのタグに関する説明となるテキスト情報を持たないエレメントの場合、特に重要である。例えば、AREAタグ（イメージマップでのホットスポット指定に使う）や、BGSOUNDタグ（Webページのバックグラウンドで再生するサウンドファイルを指定する）などである。TITLE属性は、これらのタグを扱う場合に常に使用すべきである。次に例を示す。 

<BGSOUND SRC="soundfile.mid" TITLE="Sound of falling water">

Tip #4：CSS Positioningを使う場合は必ず"em"単位で座標を指定する

Internet Explorer 4.0のDynamic HTMLで重要な点は、CSS Positioningを使えば、HTMLエレメントを表示したい位置を正確に指定できることである。しかし、ユーザーがデフォルトのフォントサイズを変更したり、Webページ上のフォントサイズをオーバーライドした場合には、問題が生じる。この場合、絶対位置指定されたエレメントは、そのエレメントが適切に表示されるサイズまで大きくなる。"em"単位でオブジェクトの位置を指定すると、この問題は解決できる。emは、デフォルトのフォントサイズを変更しない限り、ピクセルやインチと同様に単位として使うことができる。つまり、デフォルトのフォントサイズが大きくなると、emのサイズも同様に大きくなる。emでサイズと位置を指定したコンテントは、大きくなったフォントサイズに対応して調節される。

例えば、絶対位置指定をした<DIV>タグを指定するには、次に示す構文を使用する。 

<DIV STYLE="position: absolute; left: 10em;top: 12em;height: 5em; width: 5em">Here is some positioned text!</DIV>

emは、ピクセルのような単位と比較されがちである。一般的に、標準のフォントサイズでは、1emが10ピクセルとほぼ同じである。

Tip #5：位置指定したHTMLが使いやすいかどうかテストする

位置指定したオブジェクトのアクセシビリティをテストする方法を紹介する。em単位で位置指定したHTMLエレメントを使ってページを作成する場合、まずWindowsの［画面のプロパティ］の［フォントサイズ］の設定で"小さいフォント"と"大きいフォント"のそれぞれを試してみる。次に、［インターネット オプション］ダイアログの［全般］タブの［ユーザー補助］で［Webページで指定されたフォント スタイルを使用しない］を選択した後、［表示］メニューの［フォント］でIEのフォントサイズを［最大］に設定して試してみる。最後のテストは、Windowsの［コントロール パネル］の［ユーザー補助］で、［画像］タブの［ハイコントラストを使う］チェックボックスをチェックして試してみる。これらのテストを行ってから、最終的にページ上のエレメントのフォントサイズを調整するとよい。ハンディキャップを持つユーザーでも無理なく使えるように設定されていなければならない。

Tip #6：クライアントサイド イメージマップをキーボードでナビゲートできるようにする

クライアント イメージマップは、ユーザーがTABキーでクリッカブルエリアを順に移動できるので、サーバーサイド イメージマップに比べてアクセスしやい。しかし、クリッカブルエリアの作り方によってはわかりにくいことも多いので、キーボードによるナビゲーションもサポートしておくべきである。キーボードユーザーのサポートとしては、クリッカブルエリアでの指定と同じアンカーをその説明のテキストとともに追加するだけである。

関連リンク

アクセシビリティについては、次のリンク先で詳しく説明しているので参照すること。

Up トップに戻る
© 1997 Microsoft Corporation. All rights reserved. Terms of Use.