label 要素を使用できない場合に、フォームコントロールを特定するために、title 属性を使用する

例 1: 検索対象を絞り込むプルダウンメニュー

検索フォームで検索対象を絞り込むプルダウンメニューを用いている。そのプルダウンメニューは、検索語を入力するテキストフィールドのすぐそばにある。テキストフィールドとプルダウンメニューの関係は、ビジュアルデザインを見ることができる利用者には明白であり、別途可視ラベルを置くスペースはない。そこで、select 要素を特定するのに title 属性を利用している。title 属性はスクリーンリーダーによって読み上げられたり、画面拡大ソフトを使っている利用者にはツールチップとして表示されたりする。

<label for="searchTerm">Search for:</label>
<input id="searchTerm" type="text" size="30" value="" name="searchTerm">
<select title="Search in" id="scope">
…
</select> 

例 2: 電話番号の入力フィールド

ウェブページの中に、アメリカでの電話番号を入力するコントロールがあり、市外局番、市内局番、下 4 桁の三つのフィールドで構成されている。

<fieldset><legend>Phone number</legend>
<input id="areaCode" name="areaCode" title="Area Code" 
type="text" size="3" value="" >
<input id="exchange" name="exchange" title="First three digits of phone number" 
type="text" size="3" value="" >
<input id="lastDigits" name="lastDigits" title="Last four digits of phone number" 
type="text" size="4" value="" >
</fieldset> 

例 3: 検索機能

ウェブページに、利用者が検索語を入力できるテキストフィールドと、検索を実行するための「検索」というラベルが付いたボタンがある。フォームコントロールを特定するの title 属性を利用し、ボタンはテキストフィールドの直後に置いてあるので、テキストフィールドに検索語を入力すべきことは利用者にとって明白である。

<input type="text" title="Type search term here"/> <input type="submit" value="Search"/>

例 4: フォームコントロールのデータテーブル

フォームコントロールのデータテーブルでは、各コントロールとそのセルの列及び行ヘッダーを関連付ける必要がある。 title (又は画面に現れない label) がないと、視覚を持たない利用者にとっては、フォームをタブで移動しながら支援技術を用いて対応する行又は列のヘッダー値を一時停止して調べることが困難である。

例えば、調査のフォームには質問、同意、未決定、同意しないの 4 つの列見出しが最初の行にある。これらの行は質問と、3 つの列の回答選択に対応する各セルのラジオボタンが含まれている。すべてのラジオボタンの title 属性には、コントロールを識別するために必要な情報が含まれている。