達成基準 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>

失敗例2: 目に見えないリンクテキストにより、アクセシブルな名前 (accessible name) の可視ラベルテキストの文字列が分断される

ダウンロードリンクは「Download specification」と表示されるが、非表示のリンクテキストがあるため、そのリンクのアクセシブルな名前 (accessible name) は「Download gizmo specification」になる。表示されているテキストラベルは、アクセシブルな名前 (accessible name) に含まれているが、文字列は一致しないため、音声入力ではリンクがアクティブにならない場合がある。


        <a href="#">Download <span class="accessibly-hidden">gizmo</span> specification</a>

失敗例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. の結果が偽である場合、コンテンツは達成基準の失敗となる。