達成基準 2.5.3 の失敗例 - アクセシブルな名前 (accessible name) が可視ラベルのテキストを含んでいない

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

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

適用(対象)

インタラクティブなコントロール (リンクやフォーム入力など) を含むすべての技術。

この達成方法は、達成基準 2.5.3: 名前 (name) のラベル (失敗) に関連する。

解説

この失敗例の目的は、コントロールの名前と、目に見えるラベルが異なっているために、音声入力の利用者がコントロールの名前を正しく話せないという状況を説明することである。

音声入力の利用者は、ウェブページを操作するとき、通常はコマンドの後に何らかの表示ラベル (ボタンやリンクの中のテキストや、入力欄にラベリングしてあるテキスト) への参照を続けて話す。表示されるラベルが、コントロールのアクセシブルな名前 (accessible name) と一致しない場合、音声を使う利用者は、そのコントロールを直接アクティブにできないことがある。

要素の可視ラベルテキストを超える達成方法がある。これは、視覚的なコンテキストを利用できない支援技術の利用者に、より多くのコンテキストを提供するためのアイデアである。例としては、非表示のアクセス可能なテキスト (例: 表示領域以外に配置したテキスト) の使用、ラベルテキストを上書きする aria-label 属性の使用、又はページ上の一つ以上の文字列からラベルテキストを作成する aria-labeledby 属性の使用がある。

これらの達成方法を使用した結果、表示されているラベルの正確な文字列が、アクセシブルな名前 (accessible name) に含まれない場合、音声を使う利用者はそのコントロールをアクティブにできない可能性がある。コントロールのアクセシブルな名前 (accessible name) を計算する際の優先順位を決定するには、 Accessible Name and Description Computation アルゴリズムを参照のこと。

事例

失敗例1: 表示されているボタンのテキストと、aria-label で指定されたアクセシブルな名前 (accessible name) が一致しない

検索ボタンのテキストは「Go」であるが、aria-label 属性で提供されるアクセシブルな名前 (accessible name) は、「find in this site」である。

<button id="sitesearch" aria-label="Find in this site">Go</button>

失敗例3: value属性と異なるテキストを含む非表示のラベルを持つ入力コントロール

type="submit"でvalue="search"となっている入力コントロールが、ラベルが見える状態で公開されており、aria-labeledbyが参照する「Find in this site」というテキストを含むラベルが、プログラム的にリンクされ、アクセス可能な非表示になっている。aria-labeledbyは入力コントロールの値より優先されるため、ほとんどのブラウザーとスクリーン・リーダーの組み合わせでは、入力コントロールのアクセシブルな名前 (accessible name)は「Find in this site」になる。音声を使用する利用者が「Click search」というコマンドを話しても、この入力コントロールをアクティブにできない。


        <div id="hidden-label">Find in this site</div>
        <input type="submit" aria-labelledby="hidden-label" value="search">
        

検証

手順

ラベルが表示されているすべてのコントロール (例えば、リンクテキスト、ボタンテキスト、プログラムによりリンクされたラベル、テキストをもつリンクされた画像) について、次のことを確認する:

  1. アクセシブルな名前 (accessible name) が表示されているラベルと同じである。
  2. アクセシブルな名前 (accessible name) に表示されているラベルと同じ文字列が含まれている。

期待される結果

  • 手順 1. 及び 手順 2. の結果が偽である場合、コンテンツは達成基準の失敗となる。