WCAG 2.0 実装方法集

メインコンテンツへスキップ

-

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

適用(対象)

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

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

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

解説

この実装方法の目的は、ラベルを付けるのが視覚デザイン上そぐわない場合(たとえば、ラベルとなりうるテキストが画面上にない場合)や、ラベルを表示することで混乱を引き起こしてしまう場合に、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="検索"/>

参考リソース

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

検証

チェックポイント

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

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

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

判定基準

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

日本語訳における注記:

この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。