combobox-name-present
コンボボックスにはアクセシブルな名前があります
role="combobox"を持つ要素が、空でないアクセシブルな名前を公開していることを確認します。
適用範囲:role属性がcomboboxに解決される要素に適用されます。既知のロールを指す最初のトークンを大文字と小文字を区別せずに照合した結果がcomboboxであるものを指し、role="foo combobox"やrole="COMBOBOX"は該当しますが、role="link combobox"(リンク)は該当しません。要素はアクセシビリティツリーに含まれている必要があります。暗黙のロールが一致していても、role属性を持たない要素は対象外です。ElementInternalsによってこのロールを与えられたカスタム要素(this.attachInternals().role)も、別のロールを示すrole属性がなければ対象です。それがその要素の既定のロールであり、ほかにそれを確認するルールはないためです。
期待される結果:要素が、aria-label、空でないテキストに解決されるaria-labelledby、またはtitleによる空でないアクセシブルな名前を持っています。role="combobox"は作成者によってのみ名前が付けられるロールなので、サブツリーのテキストは決して認められません。カスタムのコンボボックスウィジェット内にあるテキストは、名前として確実に公開されるとは限らないためです。ラベル付け可能な要素(<input role="combobox">)では、関連付けられた<label>も認められます。テキスト系の<input>や<textarea>では、placeholderも最後の名前の取得元として認められます(HTML-AAMの最後の名前の取得元)。placeholderだけのラベルは達成基準3.3.2の問題であり、名前の欠落ではありません。
例
<div role="combobox" tabindex="0" aria-label="Country"></div>
aria-labelがコンボボックスに名前を付けています。
<div role="combobox" tabindex="0"></div>
サポートされているどの仕組みによるアクセシブルな名前もありません。
確認方法
このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。
name_internals
- レポートに示されたコンボボックスを調べ、カスタム要素であることとそのロールを控えてください。
- ブラウザーの開発者ツールでアクセシビリティペインを開き、要素のアクセシブルな名前を読んでください。
- スクリーンリーダーで要素に移動し、読み上げられる名前を聞いてください。
満たす場合:アクセシビリティツリーにコンボボックスの名前が表示され(internalsで設定されたものでも、それ以外でもかまいません)、スクリーンリーダーがそれを読み上げます。
満たさない場合:コンボボックスにはアクセシビリティツリー上の名前がなく、スクリーンリーダーはロールしか読み上げないため、WCAG 4.1.2を満たしません。