dialog-name-present

ダイアログにはアクセシブルな名前があります

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

ダイアログ(role="dialog"またはrole="alertdialog"を持つ要素、およびネイティブの<dialog>要素)が空でないアクセシブルな名前を公開していることを確認します。

適用範囲:アクセシビリティツリーに含まれ、ロールがdialogまたはalertdialogである要素に適用されます。role属性がこれらのロールのいずれかに解決される要素(具体的なARIAロールを示す最初のトークンが優先されるため、role="alertdialog dialog"はalertdialogです)と、role属性がないか具体的なロールを示さないネイティブの<dialog>(暗黙のロールはdialog)が該当します。閉じた<dialog>は非表示のため対象外です。ElementInternalsによってこれらのロールのいずれかを与えられたカスタム要素(this.attachInternals().role)も、別のロールを示すrole属性がなければ、そのロールを持つネイティブ要素と同じように扱われます。

期待される結果:要素が、aria-label、空でないテキストに解決されるaria-labelledby、またはtitleによる空でないアクセシブルな名前を持っています。どちらのロールも作成者によってのみ名前が付けられるロールなので、ダイアログ内の見出しや本文のテキストは、aria-labelledbyがそれを参照していない限り名前として認められません。

例

pass
<div role="dialog" aria-label="Confirm deletion">
<p>Are you sure?</p>
</div>

aria-labelがダイアログに名前を付けています。

fail
<div role="dialog">
<p>Body text only.</p>
</div>

アクセシブルな名前がありません。可視の本文テキストはダイアログの名前には数えられません。

確認方法

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

name_internals

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

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

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

ソースコードを見る