label-in-name
ラベルを含む名前 (name):アクセシブルな名前に表示テキストが含まれています
コントロールに表示テキストのラベルがある場合、アクセシブルな名前にその表示ラベルのテキストが含まれていることを確認します(WCAG 2.5.3)。
適用範囲:aria-labelまたはaria-labelledbyで名前が付けられ、視覚的にレンダリングされ、かつこのエンジンが決定論的に抽出できる表示ラベルテキストを持つコントロールに適用されます。表示ラベルテキストの抽出元は、関連付けられた<label>、コントロール自身のレンダリングされたテキスト、またはaria-labelledbyが参照する要素です。対象候補は<button>、<a href>、<summary>、非表示でないフォームコントロール、およびrole属性が(既知で抽象的でない最初のトークンを大文字と小文字を区別せずに読んで)button、link、checkbox、radio、switch、searchbox、tab、menuitem、menuitemcheckbox、menuitemradio、option、treeitem、gridcellのいずれかのロールに解決される要素、およびHTML-AAMによりgridcellとなる、gridまたはtreegrid内のrole属性のない<td>で、非表示または無効のものは除きます。ボタン型の<input>(submit、reset、button)は、valueがあればその値をラベルとして表示します。valueがない場合はブラウザー独自の既定値を表示しますが、その値は知り得ないため対象外です。表示ラベルは可視の内部テキストです。インライン要素内のテキストは書かれたとおりにつながり(<b>Down</b>loadは「Download」と読みます)、ブロックレベルのボックスや<br>は新しい単語を始めます。誰にも見えないボックス内のテキスト(スクリーンリーダー専用テキストのように、切り取られている、1×1pxである、または完全に透明であるもの)は除きます。<select>のoptionや<textarea>のテキストも、ラベルテキストではなくフィールドの値なので除きます。aria-hiddenは除外しません。aria-hiddenは画面上に何がレンダリングされるかを何も変えず、この達成基準が扱うのはまさにその点だからです。前後の空白を除くと空になるaria-labelや、idが何も指していないかテキストのない要素だけを指すaria-labelledbyは、何も名前を付けません。その場合アクセシブルな名前は次の取得元(内容、<label>、title...)から得られ、それらを持たないコントロールと同じになるため、そのコントロールは対象外です。ElementInternalsによってこれらのロールのいずれかを与えられたカスタム要素(this.attachInternals().role)も、別のロールを示すrole属性がなければ、そのロールを持つネイティブ要素と同じように扱われます。
期待される結果:アクセシブルな名前に、表示ラベルの単語が隣接したまま同じ順序で含まれています。比較は文字単位ではなく単語単位で行います。括弧内のテキストは除外し、大文字と小文字を区別せず、テキストをNFKC正規化し、文字、数字、結合文字以外の文字はすべて区切りとして扱うため、句読点や空白の違いで判定結果が決まることはありません。ただし、目に見えない書式文字(ソフトハイフン、ゼロ幅スペース)と単語内のアポストロフィは、区切りにせず取り除きます。そのため「Down­load」は「Download」、「Don’t」は「Dont」になります。アクセント記号は同一視しません。「Déposer」は1つの単語のままで、アクセント記号を落とした名前(「Deposer」)はそれを含みません。マークアップだけでは判断できない次の4つのケースは、failではなくcantTellとして報告します。2か所でハイフネーションが異なる単語、末尾のピリオドから作成者が略語にした可能性がある表示上の単語、既知のアイコンフォントでレンダリングされる表示テキスト(DOM上のテキストは実際の単語でも、読める文字は何も表示されない)、そしてアクセシブルな名前の中にすら現れない、ちょうど1文字だけの表示ラベル全体です。最後のケースは、ACT 2ee8b8によれば文字どおりのテキストではなく「非テキストコンテンツ」(例:「close」を意味する「X」)である可能性があります。
検出結果が報告する内容:
visibleLabel、accessibleName:見つかったとおりの、可視のラベルテキストとアクセシブルな名前です。normalized.visibleLabel、normalized.accessibleName:比較に使った形の同じ2つのテキストで、括弧内のテキストを除き、大文字と小文字を区別しない形にし、Unicode正規化したものです。tokenized.visibleLabel、tokenized.accessibleName:それぞれのテキストを分割した単語で、1項目に1単語です。名前には、ラベルの単語が隣り合って同じ順序で含まれている必要があります。labelSource:可視のラベルがどこから来たかを示します。label(関連付けられた<label>)、self(コントロール自身のテキスト)、value(ボタン型の<input>のvalue)、aria-labelledby(それが指す要素)のいずれかです。nameMechanism:アクセシブルな名前を与えているものです。aria-labelまたはaria-labelledbyです。
これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。
例
<button aria-label="Save changes">Save</button>
アクセシブルな名前(「Save changes」)に表示テキスト(「Save」)が含まれています。
<button aria-label="Submit form">Save</button>
アクセシブルな名前に表示ラベルのテキストがまったく含まれていません。
確認方法
このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。
HYPHENATION_DIFFERS
- レポートに示されたコントロールの表示ラベルを読んでください。
- アクセシビリティペインを開き、コントロールのアクセシブルな名前を読んでください。
- 両者を比べてください。違いはハイフンの位置だけです(「e-mail」と「email」)。表示ラベルを口に出す人が同じ言葉を言うかを判断してください。
- 音声入力ソフトウェアがあれば、表示ラベルを発話してコントロールが作動するか確認してください。
満たす場合:名前はラベルと同じ言葉で、ハイフンの付け方だけが異なるため、ラベルを発話すればコントロールに届きます。
満たさない場合:ハイフンの付け方によって言葉が変わるため、名前にラベルの表示内容が含まれず、WCAG 2.5.3を満たしません。
POSSIBLE_ABBREVIATION
- レポートに示されたコントロールの表示ラベルを読み、ピリオドで終わる単語を控えてください。
- アクセシビリティペインを開き、コントロールのアクセシブルな名前を読んでください。
- ラベルの単語が、名前に含まれる単語の一般的な略語(「Avenue」に対する「Ave.」)であり、人が完全な単語として読み上げるものかを判断してください。
満たす場合:その略語は、名前に含まれる完全な単語として読まれる慣例的なものです。
満たさない場合:ラベルの単語は名前の単語として読まれないため、ラベルを口に出す人の言葉が名前と一致せず、WCAG 2.5.3を満たしません。
POSSIBLE_ICON_FONT_GLYPH
- レポートに示されたコントロールを画面上で確認し、読める言葉とアイコンのどちらを表示しているかを控えてください。
- アクセシビリティペインを開き、コントロールのアクセシブルな名前を読んでください。
- コントロールがアイコンだけを表示している場合は、名前がそれを説明しているか判断し、読める言葉を表示している場合は、名前にそれが含まれていることを確認してください。
満たす場合:コントロールは読めるテキストではなくアイコンを表示しているか、表示している読めるテキストが名前に含まれています。
満たさない場合:コントロールが表示している読める言葉がアクセシブルな名前に含まれていないため、WCAG 2.5.3を満たしません。
POSSIBLE_SYMBOLIC_CHARACTER
- レポートに示されたコントロールが表示している1文字を確認してください。
- アクセシビリティペインを開き、コントロールのアクセシブルな名前を読んでください。
- その文字が操作を表す記号(閉じるを表す「X」、矢印)か、数字や文字のように利用者が口に出すそのままのテキストかを判断してください。
満たす場合:その文字は記号であり、名前がその働きを説明しています。
満たさない場合:その文字は利用者が口に出すテキスト(数字や文字)であり、名前に含まれていないため、WCAG 2.5.3を満たしません。