aria-allowed-role
明示的なロールはホスト要素で許可されている必要があります
明示的なrole=""属性が、ARIA in HTML仕様でそのホスト要素に許可されているロールの1つであることを確認します(例:<nav>ではrole="tab"は許可されていない)。
適用範囲:有効で抽象的でない明示的なロールを持つ要素のうち、ホスト要素と属性の組み合わせについて、ARIA in HTML仕様の許可ロールの表に許可ロールの制約が定められているものに適用されます。
期待される結果:明示的なロールは、ARIA in HTML仕様でそのホスト要素に許可されているロールの1つです。FAILではなくCANTTELLとして報告されます。ARIA in HTMLの許可ロール表は作成者向けの適合要件であり、対応するACTルールもなく、どの資料にもWCAGとの対応付けがありません。作成者が指定したロールは、そのまま支援技術に公開されるロールでもあるため、その組み合わせが誰かに不利益を与えるかどうかは表ではなくウィジェット次第です。
検出結果が報告する内容:
role:ホスト要素で許可されていない明示的なロールです。
これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。
例
<nav role="navigation">...</nav>
role="navigation"はARIA in HTML仕様で<nav>に許可されています(この要素の暗黙のロールでもあります)。
<nav role="tab">...</nav>
role="tab"は、ARIA in HTMLが<nav>に許可しているロールではありません。
確認方法
このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。
ARIA_ROLE_NOT_ALLOWED_FOR_ELEMENT
- レポートに示された要素を調べ、そのタグとrole属性を控えてください。
- ブラウザーの開発者ツールでアクセシビリティペインを開き、公開されているロールを確認してください。
- Tabキーを押して要素がキーボードフォーカスを受け取るか確認し、コントロールであればEnterまたはSpaceで操作してみてください。
- スクリーンリーダーで要素に移動し、読み上げられる内容と、画面上で要素が実際に行うことを比べてください。
満たす場合:読み上げられるロールが要素の見た目と動作に一致しています(または、フォーカス可能なコントロールではrole none/presentationが無視され、ネイティブのロールが保たれています)。
満たさない場合:読み上げられるロールが要素の動作と矛盾しています。たとえば、フォーカス可能なボタンが見出しとして読み上げられます。これはARIA in HTMLに違反し、WCAG 4.1.2を満たさない場合があります。