Skip to content

テクニック F111:達成基準 1.3.1、2.5.3 及び 4.1.2 の失敗例 ― 可視のラベルはあるがアクセシブルな名前 (name) がないコントロール

このテクニックについて

このテクニックは下記に関連する:

この失敗例は、インタラクティブなコントロール (リンク、フォーム入力など) を含む全ての技術に適用される。

解説

この失敗例の目的は、コントロールに可視ラベルがあるにもかかわらず、アクセシブルな名前 (name) がないため、音声入力の利用者がコントロールの名前 (name) を確実に発音できない状況を説明することである。

音声入力の利用者がウェブページを操作する場合、通常はコマンドに続けて、何らかの可視ラベル (ボタン又はリンク内のテキスト、入力のラベルテキストなど) を参照して発話する。コントロールにアクセシブルな名前 (name) がない場合、音声入力の利用者は可視ラベルを使用してコントロールをアクティブ化することができない。

事例

事例 1: 可視のラベルはあるがアクセシブルな名前 (name) がないテキスト入力欄

テキスト入力欄の前には "Enter name" という可視のテキストラベルがあるが、そのテキストは入力欄の <label> としてマークアップされておらず、入力欄にアクセシブルな名前を提供するための代替手段（例：aria-label）も存在しない。


					<p>Enter name</p>
					<input type="text">

事例 2: 可視のラベルがあり、存在しない ID を指す aria-labelledby を持つテキスト入力欄

テキスト入力欄の前に "Enter name" という可視のテキストラベルがある。テキストのコンテナには nameEntry という id が指定されているが、入力欄に指定された aria-labelledby 属性は name-entry という存在しない id を参照している。そのため、この入力欄にはアクセシブルな名前 (name) が一切設定されていない。


					<p id="nameEntry">Enter name</p>
					<input type="text" aria-labelledby="name-entry" >

検証

手順

可視ラベル (リンクテキスト、ボタンテキスト、プログラムによりリンクされたラベル、リンク内又はボタン内にあるテキストを伴う画像など) を持つ全てのコントロールについて:

  1. コントロールに可視のテキストラベルがある。
  2. コントロールにアクセシブルな名前 (name) がある。
  3. アクセシブルな名前 (name) には、可視のラベルとして表示されるテキストが含まれている。

期待される結果

  • チェック 1 が偽である場合、達成基準は適用されない。
  • チェック 1 が真であるが、チェック 2 及び／又は 3 が偽である場合、コンテンツは達成基準に失敗する。
  • 全てのチェックが真である場合、コンテンツは達成基準に合格する。
Back to Top