binary-control-name-present
二値コントロールにはアクセシブルな名前があります
チェックボックス、ラジオボタン、スイッチのコントロールが、空でないアクセシブルな名前を公開していることを確認します。
適用範囲:role属性がcheckbox、radio、switchのいずれかに解決され(既知のロールを指す最初のトークンを、大文字と小文字を区別せずに照合します。そのためrole="foo switch"やrole="SWITCH"も該当します)、アクセシビリティツリーに含まれる要素に適用されます。ネイティブの<input type="checkbox">/<input type="radio">は、これらのロールを明示的に持つ場合にのみ対象となります。role属性がない場合はform-control-programmatic-label-presentの対象です。ElementInternalsによってこれらのロールのいずれかを与えられたカスタム要素(this.attachInternals().role)も、別のロールを示すrole属性がなければ対象です。それがその要素の既定のロールであり、ほかにそれを確認するルールはないためです。
期待される結果:コントロールが、aria-label、空でないテキストに解決されるaria-labelledby、またはtitleによる空でないアクセシブルな名前を持っています。ネイティブのチェックボックスやラジオボタンでは、関連付けられた<label>、labels API、囲む<label>、label[for]も認められます(決定論性のため読み取るラベルは最大4つ)。それ以外の要素では、これらのロールは内容から名前が決まるため、自身のサブツリーのテキストも認められます。
例
<div role="switch" tabindex="0" aria-checked="false" aria-label="Bluetooth"></div>
aria-labelがスイッチにアクセシブルな名前を与えています。
<div role="switch" tabindex="0" aria-checked="false"></div>
スイッチには、サポートされているどの仕組みによる名前もありません。
確認方法
このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。
name_internals
- レポートに示されたコントロールを調べ、カスタム要素であることとそのロールを控えてください。
- ブラウザーの開発者ツールでアクセシビリティペインを開き、要素のアクセシブルな名前を読んでください。
- スクリーンリーダーで要素に移動し、読み上げられる名前を聞いてください。
満たす場合:アクセシビリティツリーにコントロールの名前が表示され(internalsで設定されたものでも、それ以外でもかまいません)、スクリーンリーダーがそれを読み上げます。
満たさない場合:コントロールにはアクセシビリティツリー上の名前がなく、スクリーンリーダーはロールしか読み上げないため、WCAG 4.1.2を満たしません。