フォームのアクセシビリティ要件として、第一にラベルとコントロールを関連付けるということが必要です。この関連付けによって、スクリーンリーダー利用者は [tab] キーで入力枠等を移動していった場合に何を入力あるいは選択すればいいか分かります。また、マウスを使ってる場合はラベルのテキストをクリックすればコントロールをフォーカスでき、特にラジオボタンやチェックボックスの選択が容易になります。

しかし、CMS によってシステム的にフォームが出力される場合や、メルマガ配信サービスで出力される HTML を貼り付ける場合に、このラベルとコントロールの関連付けがなされていない場合があります。ラジオボタンやチェックボックスについては、暗示的なラベル付け（コントロールとラベルをまとめて label 要素で囲む）によって関連付けされていることが多いですが、テキストフィールドやセレクトメニューについては関連付けされていない場合があります。

最近上記のような事例があり、フロント側で HTML を編集することもできないため、jQuery を使って関連付けを設定してみました。フォームはよくあるテーブルによるマークアップの単純なもので、一行テキストフィールド、複数行テキストエリア、セレクトメニューに対して、ラベルとの関連付けを設定します。

“jQuery でフォームをアクセシブルに” の続きを読む »