---
title: a11y/invalid-role · 不正な ARIA ロール
description: 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 ロールを指定するか、要素本来のネイティブなセマンティクスで十分ならその属性自体を削除します。

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

## モードによる違い

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

## 無効化

意図的に非標準なロールを使う場合は、`<!-- svelte-vitals-disable-next-line a11y/invalid-role -->` で個別の要素を抑制するか、ルールを無効化してください。

```js svelte-vitals.config.js
export default {
  rules: {
    'a11y/invalid-role': 'off'
  }
};
```