WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

H65: label 要素を使用することができないとき、フォーム・コントロールを特定するために、title 属性を使用する

達成方法に関する重要な情報

これらの達成方法(参考)の使用法及び、それらがWCAG 2.0 達成基準(規定)とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用(対象)セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用(対象)

value属性、alt属性、または要素内容で特定できないHTML及びXHTMLのフォーム・コントロール

これは、次の達成基準に関連する達成方法である:

ユーザエージェント及び支援技術によるサポート

H65 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

この達成方法の目的は、ラベルを付けるのが視覚デザイン上そぐわない場合(たとえば、ラベルとなりうるテキストが画面上にない場合)や、ラベルを表示することで混乱を引き起こしてしまう場合に、title 属性を利用してフォーム・コントロールにラベルを付けることである。それによって、ユーザエージェントや支援技術が、title 属性を読み上げることができる。

事例

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

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

コード例:

<label for="searchTerm">検索語:</label>
<input id="searchTerm" type="text" size="30" value="" name="searchTerm">
<select title="検索対象" id="scope">
…
</select>

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

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

コード例:

<fieldset><legend>電話番号</legend>
<input id="areaCode" name="areaCode" title="市外局番" 
type="text" size="3" value="" >
<input id="exchange" name="exchange" title="電話番号の上3桁" 
type="text" size="3" value="" >
<input id="lastDigits" name="lastDigits" title="電話番号の下4桁" 
type="text" size="4" value="" >
</fieldset>

事例 3: 検索機能

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

コード例:

<input type="text" title="ここに検索語を入力"/> 
<input type="submit" value="検索"/>

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

フォームコントロールのデータテーブルは、各コントロールをそのセルの列ヘッダーと行ヘッダーに関連付ける必要がある。 タイトル(またはオフスクリーン LABEL)がないと、フォームをタブで移動しながら補助技術を使用して対応する行/列ヘッダー値を一時停止して調べることは視覚的でない利用者には困難である。

例えば、調査のフォームには 質問、同意、未決定、同意しないの 4 つの列見出しが最初の行にある。これらの行は質問と、3 つの列の回答選択に対応する各セルのラジオボタンが含まれている。すべてのラジオボタンのtitle属性は、回答選択(列見出し)と質問のテキスト(行見出し)をハイフンまたはコロンをセパレータとして連結したものである。

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

チェックポイント

  1. label 要素によって関連付けられていないフォーム・コントロールを特定する。

  2. そのコントロールに title 属性が指定されている。

  3. title 属性によってそのコントロールの目的を特定している。

判定基準

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。