フォームの入力要素には <label> 要素でラベルを付ける

先の記事「プレースホルダーについて考える」をまとめる中で再認識したのですが、Web サイトのフォームの各入力要素 (<input> 要素、<textarea> 要素、<select> 要素) には、そのすぐ手前に、常に見える形で、ラベル (項目名) を配置するべきだと考えます。

これは、Web アクセシビリティの基本のひとつであり、JIS X8341-3:2010 でも、下記のとおり規定されています。

コンテンツが利用者の入力を要求する場合は、入力箇所のラベル又は入力方法についての説明文を提供していなければならない。

出典 : JIS-X8341-3:2010「7.3.3.2 ラベル又は説明文に関する達成基準 (等級A)」

このラベルは、入力要素の近くに「ただ書いてあればよい」というわけではありません。各入力要素に対するラベルは、<label> 要素を用いて、セマンティックに (マシンリーダブルな形で) マークアップするようにしましょう。以下、ソースコードの例です。

<label for="name">お名前</label>
<input type="text" id="name" name="name" />

<label for="pref">都道府県</label>
<select id="pref" name="pref">
<option value="00"></option>
<option value="01">北海道</option>
<option value="02">青森県</option>
<option value="03">岩手県</option>
<option value="04">宮城県</option>
<option value="05">秋田県</option>
<option value="06">山形県</option>
<option value="07">福島県</option>
：
<option value="47">沖縄県</option>
</select>

入力要素の id 属性と、<labal> 要素の for 属性が同じ値 (文字列) の場合、その入力要素とラベルが一対の組として紐づけられます。

<label> 要素でラベルを付けるメリット

上記のように <label> 要素を用いてマークアップすることで、以下のようなユーザビリティ/アクセシビリティのメリットがあります。

  • チェックボックスやラジオボタンの選択が容易になる。小さなターゲット (ボックスやボタン) を正確にクリック/タップできなくても、隣接するラベルをクリック/タップすることで、選択肢を選ぶことができる。
  • チェックボックスやラジオボタン以外の入力要素であっても、ラベルをクリック/タップすることで、その入力要素 (テキスト入力欄やセレクトメニューなど) にフォーカスを当てることができる。
  • スクリーンリーダーを使いながら [Tab] キ―でフォーカス位置を移動させている場合、フォーム入力要素にフォーカスが当たったときに、その要素に紐づいたラベルも併せて音声読み上げされる。

上記の箇条書きのうち、上のふたつは、従来であれば精緻なマウス操作ができない高齢者や障害者への配慮と考えられていましたが、スマートフォンやタブレットといったタッチインターフェース機器が普及した昨今では、より多くのユーザーに恩恵をもたらすと言えます (指によるタッチは、マウスよりも精緻さに欠ける...という経験は多くの方にあるのではないでしょうか？英語圏のユーザビリティ専門家の間では「"fat finger" problem ("太った指" 問題)」と呼ばれています)。

視覚的にラベルを非表示にしたい場合は？

原則としては、ラベルは各入力要素のすぐ手前に、常に見える形で配置するべきですが、実際問題として、ラベルを視覚的に非表示にしたいこともあるでしょう。たとえば、サイト内検索機能のテキストボックスには、ラベルが無いケースがほとんどだと思います。また、ID とパスワードを入力させる程度のシンプルなログインフォームであれば、ラベルの機能をプレースホルダーに担わせて、すっきりとした表示にまとめたい、ということもあると思います。

そのような場合でも、アクセシビリティ確保の観点から、<label> 要素によるラベル付けはしておきたいものです。そのうえで、CSS の「オフレフト」テクニックによって、あくまでも「外観上は」表示されない...という形にしておくのがよいでしょう。

<label> 要素を用いることができないケースであれば、WCAG 2.0 の実装方法集 (H65 : label要素を用いることができないとき、title 属性を用いてフォーム・コントロールを特定する) にあるように入力要素内に title 属性を記述したり、W3C の ARIA Techniques (ARIA14：可視ラベルが使用できない場合に不可視ラベルを提供するためにaria-labelを使用する) にあるように aria-label 属性を記述する手もあります。W3C の Web Accessibility Tutorials (Labeling Controls) によると、title 属性よりは aria-label を用いるほうがアプローチの優先度としては上のようです。

入力要素の直後に単位表記などが続く場合は？

入力要素のすぐ手前に配置するラベルについては、<label> 要素を用いてセマンティックに (マシンリーダブルな形で) マークアップするとして、では、入力要素の直後に単位表記などが続く場合は、どうそれをセマンティックに入力要素と紐付ければよいでしょうか？

このようなケースでは、WAI-ARIA で規定されている「aria-labelledby」が使えそうです。以下、ソースコードの例です。

<span id="number_of_people_label"><label for="number_of_people">参加人数</label></span>
<input type="number" id="number_of_people" name="number_of_people" aria-labelledby="number_of_people_label number_of_people number_of_people_unit" /><span id="number_of_people_unit">人</span>

「Using aria-labelledby to concatenate a label from several text nodes - WCAG WG」という W3C のページで紹介されている記述方法ですが :
<label> 要素を <span> 要素で囲み、ラベルである旨の id 属性 (上記の例では id="number_of_people_label") を記述します。併せて、単位表記部分を <span> 要素で囲み、単位である旨の id 属性 (上記の例では id="number_of_people_unit") を記述します。そのうえで、入力要素 (上記の例では <input> 要素) に aria-labelledby を記述します。aria-labelledby の属性値には、ラベルの id、単位表記の id、さらに、当該入力要素自体の id を併記します (上記の例では aria-labelledby="number_of_people_label number_of_people number_of_people_unit")。

このようにマークアップすることで、たとえば、スクリーンリーダーを使いながら [Tab] キ―でフォーカス位置を移動させている場合、入力要素にフォーカスが当たると、紐づけられたラベルと単位表記が併せて読み上げられることが期待できます。

筆者の環境で試したところ、Windows の Firefox と NVDA の組み合わせでは「参加人数 3人」という具合に読み上げてくれましたが、他の支援技術も含めると、まだ対応が安定していないように見受けられます (たとえば、iOS や Mac OS X の VoiceOver を使用する場合、上記ソースコード例のうち、 aria-labelledby 属性値には当該入力要素自体の id を含めないほうが、期待に近い読み上げをしてくれます)。

マークアップ自体はとても簡単なので、多くのユーザーエージェント (ブラウザと支援技術の組み合わせ) が安定して対応してくれれば、ぜひ実装したいところです。