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

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

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

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

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

解説

この達成方法の目的は、ビジュアルデザインが、ラベルとしてフォームコントロールに関連付けることができるテキストを画面上に含まない場合に、title 属性を利用してフォームコントロールにアクセシブルな名前 (accessible name) を提供することである。支援技術を含むユーザエージェントは、title 属性を読み上げることができる。

訳注

HTML Standard§3.2.6.1 The title attribute の Note で述べられているように、多くのユーザエージェントではアクセシブルな形でこの属性を公開しないので、title 属性に依存することを勧めていない。

訳注

WAIC では H65 に関するアクセシビリティ サポーテッド(AS)情報を提供している。2020 年 3 月版の アクセシビリティ サポーテッド(AS)情報: H65 も参照されたい。

事例

例 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> 
訳注

WAIC では H65-2 に関するアクセシビリティ サポーテッド(AS)情報を提供している。2014 年 6 月版のアクセシビリティ サポーテッド(AS)情報: H65-2 では、「要注意」と評価されている。WAIC はウェブ制作者にこの達成方法が一部の環境では動作しないことに注意を促すものである。

例 3: 検索機能

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

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

WAIC では H65-3 に関するアクセシビリティ サポーテッド(AS)情報を提供している。2014 年 6 月版のアクセシビリティ サポーテッド(AS)情報: H65-3 では、「要注意」と評価されている。WAIC はウェブ制作者にこの達成方法が一部の環境では動作しないことに注意を促すものである。

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

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

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

参考リソース

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

訳注

HTML 4.01 は Superseded Recommendation としてマークされ、廃止された仕様である。

検証

手順

label 要素に関連付けられていない各フォームコントロールについて:

  1. そのコントロールに title 属性があることを確認する。
  2. フォームコントロールの目的が、そのコントロールを見ることができる利用者にとって明確であることを確認する。
  3. title 属性がそのコントロールの目的を特定し、かつ、それが視覚的に明確な目的と一致していることを確認する。

期待される結果

  • 上記全ての結果が真である。