適用 (対象)
この達成方法は、(リンクやフォーム入力などの) インタラクティブなコントロールを含むすべてのウェブ技術に適用される。
これは、達成基準 2.5.3 ラベルを含む名前 (name) (十分) に関連する達成方法である。
解説
この達成方法の目的は、音声入力を行う利用者がウェブコンテンツを確実に操作できるようにすることである。
音声入力を行う利用者がウェブページを操作する場合、通常は可視ラベル (ボタン内のテキスト、リンクテキスト、入力欄にラベル付けされたテキストなど) を参照してからコマンドを読み上げる。例えば、"click search" と発声することで検索ボタンをアクティブにすることができる。
日本語では「検索をクリック」のように発声するため、英語と語順が逆になる。
音声認識ソフトウェアが音声入力を処理して一致するものを探すとき、コントロールの "アクセシブルな名前 (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) を変更せずに、コンテキストを改善するという大きな利点がある。
事例
事例 1: リンクテキストがアクセシブルな名前 (accessible name) の先頭に一致する
リンクには、可視テキスト及び不可視のリンクテキストが含まれている。どちらもリンクのアクセシブルな名前 (accessible name) を構成している。可視テキストが最初に来る。この目的は、支援技術の利用者に対してリンクをより説明的にすることである。
<p>Go to <a href="code-of-conduct.html">Code of conduct <span class="hidden_accessibly">
of ACME Corporation</span></a><p>事例 2: 見出しと紐づく一般的なリンクテキスト
一般的なリンクは、段落の見出しと組み合わせてコンテキストを提供する。これは最初の事例のバリエーションであり、今回は aria-labelledby を使用している。この実装の利点は、ページ上にある可視テキストを使用するため、ローカリゼーションによる変換中に適切に翻訳される可能性が高くなることである。
<h4 id="poor">Insufficient Link Names Invade Community</h4>
<p>Citizens are reeling from the growing invasion of useless "read more" links appearing
in their online resources. <a href="poor.html" aria-labelledby="generic poor"><span
id="generic">More...</span></a>
Insufficient Link Names Invade Community
[次のリンクは何も開かない] Citizens are reeling from the growing invasionof useless "read more" links appearing in their online resources. More...
事例 3: aria-label に含まれるリンクテキスト
aria-labelledby を使用して2つの文字列を文法的又はシームレスに組み合わせることができない場合、aria-label を使用して、可視ラベルを含む新しい名前 (name) を作成することができる。
...end of news story. <a href="poor.html" aria-label="Read more about Insufficient
link names">Read more</a>
事例 4: ボタンの可視テキストが、アクセシブルな名前 (accessible name) の先頭に一致する
button 要素内の可視テキストは、アクセシブルな名前 (accessible name) の先頭に一致し、button 要素は不可視テキストも含んでいる。不可視テキストの目的は、支援技術の利用者に対してリンクをより説明的にすることである。
<button>Send <span class="accessibly-hidden"> Mail</span></button>関連リソース
リソースは、情報提供のみを目的としており、推奨を意味するものではない。
検証
手順
可視ラベルのある全てのコントロールについて、次のことを確認する:
- コントロールのアクセシブルな名前 (accessible name) には、可視ラベルと同じ順序で同じ文字が含まれている。
期待される結果
- 1 の結果が真である。
達成基準にとって十分な技術である場合、この試験の手順で失敗したとしても、必ずしも他の方法で達成基準が満たされていないことを意味するわけではなく、この技術が正しく実装されておらず、適合を主張するために使用できないということを意味するだけである。