slider-name-present

スライダーにアクセシブルな名前があります

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

role="slider"を持つ要素が空でないアクセシブルな名前を公開していることを確認します。ネイティブの<input type="range">はform-control-programmatic-label-presentが確認します。

適用範囲:アクセシビリティツリーに含まれ、role属性がsliderに解決される要素に適用されます(role属性はフォールバックのリストです。既知で抽象的でない最初のトークンを大文字と小文字を区別せずに読んだものがロールになるため、role="foo slider"は該当し、role="link slider"は該当しません)。一致する暗黙のロールを持っていてもrole属性がない要素は対象外です。roleを持たないネイティブの<input type="range">は、form-control-programmatic-label-presentが扱います。ElementInternalsによってこのロールを与えられたカスタム要素(this.attachInternals().role)も、別のロールを示すrole属性がなければ対象です。それがその要素の既定のロールであり、ほかにそれを確認するルールはないためです。

期待される結果:要素が、aria-label、空でないテキストに解決されるaria-labelledby、またはtitleから、空でないアクセシブルな名前を得ています。role="slider"は作成者によってのみ名前が付けられるロールなので、サブツリーのテキストは受け付けません。カスタムのスライダーウィジェット内にあるテキストは、その名前として確実に公開されるとは限らないためです。ラベル付け可能な要素(<input role="slider">)では、関連付けられた<label>も有効です。テキスト系の<input>や<textarea>では、placeholderも最後の名前の取得元として認められます(HTML-AAMの最後の名前の取得元)。placeholderだけのラベルは達成基準3.3.2の問題であり、名前の欠落ではありません。

例

pass
<div role="slider" tabindex="0" aria-label="Volume" aria-valuenow="5" aria-valuemin="0" aria-valuemax="10"></div>

aria-labelがスライダーに名前を付けています。ネイティブの<input type="range">はこのルールの対象外で、form-control-programmatic-label-presentが確認します。

fail
<div role="slider" tabindex="0" aria-valuenow="5" aria-valuemin="0" aria-valuemax="10"></div>

サポートされているどの手段からもアクセシブルな名前が得られません。

確認方法

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

name_internals

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

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

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

ソースコードを見る