binary-control-name-present

二値コントロールにはアクセシブルな名前があります

automaticWCAG 4.1.2 (A)確度:high重大度:seriousrobust

チェックボックス、ラジオボタン、スイッチのコントロールが、空でないアクセシブルな名前を公開していることを確認します。

適用範囲: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つ)。それ以外の要素では、これらのロールは内容から名前が決まるため、自身のサブツリーのテキストも認められます。

例

pass
<div role="switch" tabindex="0" aria-checked="false" aria-label="Bluetooth"></div>

aria-labelがスイッチにアクセシブルな名前を与えています。

fail
<div role="switch" tabindex="0" aria-checked="false"></div>

スイッチには、サポートされているどの仕組みによる名前もありません。

確認方法

このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。

name_internals

  1. レポートに示されたコントロールを調べ、カスタム要素であることとそのロールを控えてください。
  2. ブラウザーの開発者ツールでアクセシビリティペインを開き、要素のアクセシブルな名前を読んでください。
  3. スクリーンリーダーで要素に移動し、読み上げられる名前を聞いてください。

満たす場合:アクセシビリティツリーにコントロールの名前が表示され(internalsで設定されたものでも、それ以外でもかまいません)、スクリーンリーダーがそれを読み上げます。

満たさない場合:コントロールにはアクセシビリティツリー上の名前がなく、スクリーンリーダーはロールしか読み上げないため、WCAG 4.1.2を満たしません。

ソースコードを見る