アクセシブルな名前 (accessible name) の一部として可視ラベルのテキストを含める

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

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

適用 (対象)

この達成方法は、(リンクやフォーム入力などの) インタラクティブなコントロールを含むすべてのウェブ技術に適用される。

これは、達成基準 2.5.3 名前 (name) のラベル (十分) に関連する達成方法である。

解説

この達成方法の目的は、音声入力を行う利用者がウェブコンテンツを確実に操作できるようにすることである。

音声入力を行う利用者がウェブページを操作する場合、通常は可視ラベル (ボタン内のテキスト、リンクテキスト、入力欄にラベル付けされたテキストなど) を参照してからコマンドを読み上げる。例えば、「検索をクリック」と発声することで検索ボタンをアクティブにすることができる。

音声認識ソフトウェアが音声入力を処理して一致するものを探すとき、コントロールの "アクセシブルな名前 (accessible name)" を使用する。これは、可視ラベルとは異なることがある。例えば、検索の入力フィールドに続くボタンには "go" というテキストが含まれているかもしれないが、値が "search" の非表示の aria-label 属性を使用している。aria-label はボタンに含まれるテキストよりも優先されるため、このボタンのアクセシブルな名前 (accessible name) は "go" ではなく "search" になる。Accessible Name and Description Computation ではアクセシブルな名前 (accessible name) の設定方法を定義している。

可視ラベルがアクセシブルな名前 (accessible name) として不適切であると見なされる状況においては、アクセシブルな名前 (accessible name) の中にテキストを補足することが可能である。ただし、2.5.3 名前 (name) のラベルを満たすためには、可視ラベルを構成するテキスト文字列全体がアクセシブルな名前 (accessible name) に存在しなければならない。追加のコンテキストが必要とされるほとんどの状況では、可視テキストを追加のテキストの前に置くことを推奨する。コンテンツ制作者が、コントロールの可視ラベルがそのままそのコントロールのアクセシブルな名前 (accessible name) に含まれるようにする場合、音声入力を行う利用者は入力が正しく解釈されると確信できる。

注記

(aria-describedby の使用を含む) アクセシブルな説明 (the Accessible Description) によって、追加のコンテキストをより適切に取り入れることができる。これには、一部の支援技術の利用者にとって、アクセシブルな名前 (accessible name) を変更せずに、コンテキストを改善するという大きな利点がある。

事例

事例 4: ボタンの可視テキストが、アクセシブルな名前 (accessible name) の先頭に一致する

button 要素内の可視テキストは、アクセシブルな名前 (accessible name) の先頭に一致し、button 要素は不可視テキストも含んでいる。不可視テキストの目的は、支援技術の利用者に対してリンクをより説明的にすることである。

<button>Send <span class="accessibly-hidden"> Mail</span></button>

関連リソース

リソースは、情報提供のみを目的としており、推奨を意味するものではない。

検証

手順

可視ラベルのある全てのコントロールについて、次のことを確認する:

  1. コントロールのアクセシブルな名前 (accessible name) には、可視ラベルと同じ順序で同じ文字が含まれている。

期待される結果

  • 1 の結果が真である。

達成基準にとって十分な技術である場合、この試験の手順で失敗したとしても、必ずしも他の方法で達成基準が満たされていないことを意味するわけではなく、この技術が正しく実装されておらず、適合を主張するために使用できないということを意味するだけである。