アクセシブルなフォームのデザイン

アクセシブルなフォームをデザインするための注意点

以下はアクセシブルなフォームをデザインするための注意点です。

• フォームが容易に使用できない場合、そのフォームはアクセシブルとは言えません。シンプルで使用しやすいフォームをデザインするよう心がけてください。ボタンおよびスイッチ類やフィールドをシンプルにレイアウトし、それぞれについての簡潔な説明をキャプションやツールヒントとして付加すれば、すべてのユーザーにとって入力しやすいフォームが作成できます。

• どのようなユーザーでもできるだけ簡単に入力できるフォームを作成するには、明確で論理的に整理されたフォームをデザインし、各項目には簡潔な説明を付加します。タブ順序やキーボードショートカットなどのナビゲーション機能は、フォーム上のオブジェクトの論理的な順番に従っている必要があります。フィールドについてのキャプションは、フィールドの入力用のスペースと同じ行に並べます。キャプションはフィールドの左右どちらかに統一して配置します。

• ユーザーにとって適切に使用できるのは、常に正しい入力が行えるフォームです。簡潔なエラーメッセージを表示すれば、万一ユーザーが入力を間違えてもその場で修正できます。

• フォームを簡単に使用できるようにするオブジェクトを選択します。例えば、テーブルを適切に使用すれば、テーブル形式の情報を整理して表示する効果的な手段となります。テーブルの階層やセクションを使用した、過度に複雑なテーブルは避けることをお勧めします。

• キーボードまたは類似の入力デバイスのみを使用してフォームの入力が完了できるようにします。四肢や視覚に障害を持つユーザーはキーボードのみで入力を行わなければならない場合があります。また、マウスを使用できるユーザーのほとんどが、キーボードのみで入力したいと考えてます。入力の方法を複数用意することで、アクセシブルなフォームが作成できるだけではなく、すべてのユーザーの要望に応えられるフォームが作成できます。

• 設定を変更しないで別のアプリケーションやシステム標準に対応したフォームをデザインしてください。例えば、標準的な Windows コントロールパネルで使用される色設定をサポートしたり、標準的なキーボードの操作を使用します。

• 適切にデザインされたフォームは、様々な支援テクノロジーに対応します。このような支援テクノロジーがどのように機能するかをよく理解し、様々な支援テクノロジーに対応したテクニックおよびユーザーインターフェイスの要素を活用してください。

• 色を適切に利用するとフォームの操作性が大きく向上します。色付きで表示することにより、フォームの任意の部分を強調し目立たせることができます。ただし、色だけで情報を伝えることは避けてください。色の付いた部分が多すぎると、ユーザーが目を痛める恐れがあります。また、色を多く使用しすぎると、最も目立つべきテキストが目立たなくなります。白の背景の上に黒というデフォルト設定のようなコントラストの大きな色の組み合わせを使用することをお勧めします。

• 画像を使用すると、障害を持つユーザーによっては、フォームをより良く理解できるようになる場合があります。ただし、多くのスクリーンリーダーはグラフィックを読み取ることができないため、画像の使用により、視覚に障害のあるユーザーに対するフォームのアクセサビリティが低下する可能性もあります。画像を使用する場合は、フォーム上のオブジェクトとその目的を説明するテキストを指定してください。

• クライアントサイドのスクリプトは、スクリプトがクライアントのアプリケーションのフォーカスを変更した場合にスクリーンリーダーおよびキーボードの動作を阻害する可能性があります。例えば、change および mouseEnter イベントをコンボボックスやリストボックスで使用した場合、間違ったアクションを引き起こすことがあります。クライアントサイドのスクリプトを記述する際は、スクリーンリーダーおよびキーボードに問題を起こさないよう注意してください。同様に、ユーザーにとって読みにくくなる可能性があるので、テキストの明滅などのビジュアル効果を生むイベントスクリプトの記述は避けてください。

• ラジオボタンは Web ブラウザーやスクリーンリーダーによって処理が不統一なため、意図した目的で使用されなかったり、障害を持つユーザーには HTML フォーム上でのアクセスが難しい場合があります。リストボックスを代わりに使用できる場合は、HTML フォームでのラジオボタンの使用は避けてください。