aria-role-name-present
アクセシブルな名前を必要とするARIAロールには名前があります
WAI-ARIAでアクセシブルな名前が必須とされているARIAロールが、空でない名前を公開していることを確認します。
適用範囲:role属性がgrid、meter、progressbar、radiogroup、treeのいずれかに解決され(既知のロールを指す最初のトークンを、大文字と小文字を区別せずに照合します。role="foo tree"やrole="TREE"は該当し、role="link tree"は該当しません)、アクセシビリティツリーに含まれる要素に適用されます。対象となるかどうかは、ロールが名前を許可しているかどうかではなく、WAI-ARIA自身の「Accessible Name Required: True」という特性で決まります。tablist、toolbar、menu、menubar、scrollbarは作成者によって名前が付けられるロールですが、仕様上名前は必須ではないため対象外です。meterとprogressbarはmeter-name-presentとprogressbar-name-presentでも扱われ、そちらは達成基準1.1.1に対応付けられています。この2つのロールを4.1.2の観点で扱っているのはこのルールです。ElementInternalsによってこれらのロールのいずれかを与えられたカスタム要素(this.attachInternals().role)も、別のロールを示すrole属性がなければ対象です。それがその要素の既定のロールであり、ほかにそれを確認するルールはないためです。
期待される結果:要素が、空でないaria-label、空でないテキストに解決されるaria-labelledby、または空でないtitleを持っています。対象のロールはすべて作成者によってのみ名前が付けられるロールなので、子孫のテキストは認められません。認めてしまうと、複合ウィジェット内のラベル付きの子によって、自身の名前を持たないコンテナーが合格してしまいます。HTMLのホスト要素が自ら与える名前も認められます。ブラウザーはロールの下でもそれを計算するためです。<fieldset>の最初の子要素の<legend>、<table>の最初の子要素の<caption>、そして<progress>や<meter>のようなラベル付け可能な要素に関連付けられた<label>が該当します。
検出結果が報告する内容:
role:名前が必要なロールで、grid、meter、progressbar、radiogroup、treeのいずれかです。data.detailsのほかのフィールドと異なり、安定した契約です。
これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。
例
<div role="grid" aria-label="Orders"></div>
role="grid"にはアクセシブルな名前が必須で、aria-labelがそれを提供しています。
<div role="grid"></div>
role="grid"にはアクセシブルな名前が必須ですが、何も指定されていません。
確認方法
このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。
name_internals
- レポートに示されたカスタム要素を調べ、そのロールを控えてください。
- ブラウザーの開発者ツールでアクセシビリティペインを開き、要素のアクセシブルな名前を読んでください。
- スクリーンリーダーで要素に移動し、読み上げられる名前を聞いてください。
満たす場合:アクセシビリティツリーに要素の名前が表示され(internalsで設定されたものでも、それ以外でもかまいません)、スクリーンリーダーがそれを読み上げます。
満たさない場合:要素にはアクセシビリティツリー上の名前がなく、スクリーンリーダーはロールしか読み上げないため、WCAG 4.1.2を満たしません。