フォームオブジェクトの挿入

今回はフォームについて考えてみよう。フォームのアクセシビリティでは特に、音声読み上げソフトや特殊な入力デバイスなどの支援技術を利用して閲覧するユーザーにとっての問題を認識し、それらに対応しなければならない。

JIS X8341-3 『高齢者・障害者等配慮設計指針−情報機器における機器・ソフトウェア・サービス−第三部：ウェブコンテンツ』では、5.3a 操作及び入力のa) で「ウェブコンテンツは、特定の単一デバイスによる操作に依存せず、少なくともキーボードによってすべての操作が可能でなければならない。」、b) で「入力欄を使用するときには、何を入力すればよいかを理解しやすく示し、操作しやすいよう配慮しなければならない。」と規定している。

つまり、アクセシブルなフォームに必要なポイントとしては、「入力する内容と入力箇所を明快にする」「入力箇所へのフォーカス移動を容易にする」といったことが大切だと言える。

これらのポイントをクリアするためには、ラベルとコントロールの適切な関連づけを行い、どこに何を入力したら良いのかを明快に表現することが必要だ。フォームの要素をリニアライズ（線形化）したときに、情報の出現順序が論理的に意味がとおることも重要。そして、マウスを利用せず、キーボードで操作を行うユーザーに対する配慮が求められる。

ラベルとコントロールの関連づけ

ラベルとは、テキストフィールドやラジオボタンなどのフォームオブジェクト（コントロール）のそばに置く文字列のこと。例えば、Eメールアドレスを入力してもらうためのテキストフィールドを配置する場合、普通はその横に「Eメールアドレス」といった文字列を置くはずだ。これがラベルである。

しかし単にラベルとコントロールを並べて配置しただけでは、その関連性は曖昧な状態と言える。ラベルとコントロールが交互にいくつも並んでいる状態や、テーブルの中でラベルとコントロールが別のセルに置かれているような場合、音声読み上げソフトを利用しているユーザーにはどのラベルがどのコントロールのためのものか分からなくなる恐れがある。

そういった問題を解決するために、HTMLにはラベルとコントロールを論理的に関連づけるための label 要素というものがある。ラベルとなる文字列を label 要素でマークアップし、for 属性によって関連するコントロールを指定するのだが、Dreamweaver を使えばこの作業を効率的に行える。

また、ラベルとコントロールを関連づければ、ラジオボタンやチェックボックスにおいて、コントロール自体だけでなく、ラベルのクリックでも選択行為ができるようになる。これは細かなマウス操作が困難なユーザーにとって非常に助かる改善だろう。

アクセスキーとタブインデックスを設定する

フォームオブジェクトには、他にもアクセシビリティ向上に役立つ属性がある。accesskey（アクセスキー）属性と tabindex（タブインデックス）属性だ。例えば、input 要素に accesskey 属性として任意の文字（ショートカットキー）を指定しておけば、ユーザーはページ中の特定のコントロールに「alt + ショートカットキー」で直接フォーカスを移動させることができる。

同様に、tabindex 属性で各コントロールにユニークな番号をふっておけば、ユーザーが tab キーを押しながらフォーカスを移動する順序を制御することができる。これらの属性を手作業で記述するのは大変だが、Dreamweaver を使えば簡単に行うことができる。

では、Dreamweaver MX 2004 を使って、ラベルとコントロールの関連づけ、アクセスキーやタブインデックスの指定を行ってみよう。まず Dreamweaver MX 2004 の［環境設定］で“アクセシビリティ”を選択し、“フォームオブジェクト”にチェックを入れておこう。

こうしておくことによって、フォームオブジェクトを挿入する際に、専用のダイアログボックスが表示されるようになる。このダイアログで、ラベルとなる文字列の入力、label 要素の使い方の選択、ラベルの表示位置、アクセスキー、タブインデックスの指定などをいとも簡単に一括して行うことができる。

ラベルとコントロールがソース上で隣接している場合、両者の関連づけは、このダイアログの“ラベルタグで囲む”を選択することで簡単にできる。ただし、明示的なラベルとコントロールの関連づけを行う場合や、ラベルとコントロールがソース上で離れた場所に記述される場合（ラベルとコントロールをテーブル内の違うセルに入れるような場合）には、“for 属性によるラベルタグの添付”を選択して、id 属性や name 属性を適切に記述しなければならない。

フォームオブジェクトの挿入時にこれらの作業をすれば楽なのだが、すでにできあがったフォームページに対して後から明示的な関連づけを行うのは非常に手間がかかる。しかし LIFT を使えば、ラベルとコントロールの関連づけ作業を後から一括して行うことが可能だ。例えば、ひとつのテーブルの中に複数のラベルやコントロールが混在している場合でも、LIFT の修正ウィザードを使うことで、半自動的に label 要素の挿入と、id 属性の適切な指定ができる。詳しくは下のページを見てほしい。

• LIFT：入力フォームのチュートリアル

ここまでの作業が適切に行われていれば、音声ブラウザーやテキストブラウザーを利用するユーザー、キーボードのみで操作を行うユーザーにとっても操作可能なフォームになっているはずだ。最後に情報の出現順序に問題がなく、論理性が崩れていないか、フォームをリニアライズ（線形化）して自分の目で確認してみよう。

• LIFT：リニアライザー

ページ 4 / 4