a11y/invalid-role · 不正な ARIA ロール

role 属性には、タイポでも抽象ロールでもない、具体的な WAI-ARIA ロールを指定します。

重大度: warning · カテゴリ: a11y

チェック内容

リテラルな role 属性の値が、有効かつ具体的な WAI-ARIA ロールでない場合を検出します。コンポーネントのソースを解析します。

role にはスペース区切りのフォールバックリスト（role="switch checkbox"）を指定できます。ユーザーエージェントは具体的なロールを指す最初のトークンに解決するため、このルールはどのトークンにも解決しない値だけを報告します。検出対象は次の 2 種類です。

未知のロール。タイポや存在しない名前（例: role="botton"）です。
抽象ロール。WAI-ARIA の分類体系を整理するためだけに存在し、直接使うことを意図していないロール（例: role="widget"、role="input"）。

検出しないもの:

具体的なロール: role="button"。
具体的なロールを 1 つでも含むフォールバックリスト: role="switch checkbox" はもちろん、role="widget checkbox" や role="checkbox some-future-role" も対象外です。リスト形式は、古いユーザーエージェントが知らないロール名を書けるようにするために存在します。
式で値が決まるロール（静的には値がわからないため）: role={dynamicRole}。

ロールの語彙は固定した ARIA データのコピーに由来し、そのコピー以降に ARIA 1.3 が追加したロールを手作業で補っています。どちらにも無い新しいロールは、データを更新するまで未知として報告されます。

なぜ重要か

支援技術は role を固定の WAI-ARIA 語彙にマッピングします。認識できないロール（タイポや抽象ロール）は無視されるか誤読され、要素は暗黙の（多くは汎用的な）セマンティクスにフォールバックします。ボタン・スイッチ・ダイアログとして読み上げさせたいという作者の意図は、見た目には何の異常もないまま失われます。

修正方法

具体的な WAI-ARIA ロールを指定するか、要素本来のネイティブなセマンティクスで十分ならその属性自体を削除します。

<div role="button">Click</div>

ありません。このルールが読むのは同じ .svelte / .ts のソースファイルなので、CLI、Vite プラグインのビルド、ライブダッシュボードの静的ベースラインのいずれでも結果は同一で、レンダリング済み HTML の解析で再評価されることもありません。--route で実行範囲を絞ると、このルールは動きません。コンポーネントスコープのルールには、検出を紐づけるルートが無いためです。

無効化

意図的に非標準なロールを使う場合は、 で個別の要素を抑制するか、ルールを無効化してください。

export default {
  rules: {
    'a11y/invalid-role': 'off'
  }
};

a11y/invalid-role · 不正な ARIA ロール

チェック内容

なぜ重要か

修正方法

モードによる違い

無効化