日々適当にIT技術とか関係無いこととかをつらつらと。

今回は、label要素を用いた、アクセシビリティの向上についてお話しする。

実はFC2 Blogのテンプレートにも、最初から幾つかラベリングされている。コメントの投稿フォーム部分だ。

例えば、以下のHTMLを見てみよう。
<label for="name">Name</label>
どこだろう。コメント投稿エリア、名前入力部分の「Name」の文字列だ。

何をしているのか。次の行を見てみよう。以下の要素が目に入るはずだ。
<input id="name" type="text" 〜>
id属性値がlabel要素のfor属性値と同じだ。そう、このラベルは名前入力用の1行テキストフォームと連動している。試しに、「Name」の文字列をクリックしてみよう。名前入力フォームにフォーカスが移動したはずだ。

この要素を使用することで、各種フォーム部品とテキスト等を関連付けることができるのだ。

使い方はお分かり頂けただろうか。では、意外と忘れられがちな、そして現にテンプレートにおいて忘れられている、ラベリングについてお話ししよう。
ラジオボタンとチェックボックスに対するラベリングである。これらの部品は特に小さく、文字と違って、文字サイズを変更してもこれらの部品は大きくならない。クリックしづらい部品なのである。

こちらのテンプレートにおいても、文字列「Secret」にはラベリングされているものの、肝心の文字列「管理者にだけ表示を許可する」「秘密にする」には、ラベリングされていない。これらに対して、フォーム部品との関連付けを行う。
<input id="himitu" type="checkbox" 〜><label for="himitu">秘密にする</label>
やり方は説明部分と何ら変わりない。

本当は、もっと簡単なやり方が存在する。以下のように、フォーム部品とテキストを丸ごと、labelタグで囲ってしまう方法である。
<label><input id="himitu" type="checkbox" 〜>秘密にする</label>
この方法だと、無駄なIDを多数使用してしまうこともない。ただ、現状では某ブラウザがこれに対応していない。いささか冗長になってしまうが、先に説明した方法で対応するのが望ましい。

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

×

この広告は60日間更新がないwikiに表示されております。

フリーエリア

編集にはIDが必要です