a11y/required-aria-props · 必須の ARIA プロパティがない

state や property 属性を要求するロールには、ネイティブなホスト要素のセマンティクスで代替されない限り、それらの属性が必要です。

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

チェック内容

1 つ以上の aria-* 属性を要求するロールを指定するリテラルな role 属性があり、その属性が要素上に 1 つも存在しない場合を検出します。コンポーネントのソースを解析します。

属性は、値がリテラルでも動的な式でも「存在する」とみなされます。ここで問題になるのは属性の存在そのものであり、値の妥当性は対象外です（不正な値は a11y/invalid-aria-value が扱います）。

一部の必須プロパティは、ARIA-in-HTML の仕様に従って特定のホスト要素がネイティブに供給するため、明示的な属性は不要です。

aria-checked。<input type="checkbox"> と <input type="radio"> が供給します。
aria-selected。<option> が供給します。
aria-level。<h1>〜<h6> が供給します。
aria-valuenow。<input type="range">、<progress>、<meter> が供給します。
aria-expanded と aria-controls。ネイティブの combobox が供給します: multiple も 1 を超える size も持たない <select> と、type が省略または text・search・tel・url・email の <input list="…">（HTML-AAM は開閉状態とポップアップ自体を公開する）。<select multiple> や <select size="2"> はネイティブの listbox、<input type="date" list> は combobox ではないため、これらは引き続き両方を要求されます。Svelte コンパイラは <input list role="combobox"> に対してここで警告しますが、このルールは沈黙します。逆の判定ではありません。

検出しないもの:

<div role="checkbox" aria-checked="true">。必須プロパティがリテラルとして存在します。
<div role="checkbox" aria-checked={checked}>。必須プロパティが式として存在します。
<input type="checkbox" role="switch">。switch が要求する aria-checked は、input のネイティブなチェックボックスのセマンティクスで供給される。
どの具体的なロールも指さないフォールバックリスト（role="bogus alsobogus"）。要求すべきロールが存在しないためです。解決するリストは、解決先のロールに対してチェックされる（role="bogus checkbox" は checkbox としてチェックされる）。
式で値が決まるロール（静的には値がわからないため）: role={dynamicRole}。

なぜ重要か

一部の WAI-ARIA ロールは、支援技術が自力では推測できない状態を持ちます。チェック済み・未チェックを知る手段のない role="checkbox" は、発見可能な状態を持たないコントロールとしてアナウンスされます。ユーザーには「チェックボックス」としか聞こえず、それ以上の情報はなく、見た目には何かが欠けている兆候もありません。

修正方法

ロールが要求する属性を追加します。

<div role="checkbox" aria-checked={checked}>Subscribe</div>

または、その状態をすでにネイティブに供給する要素を使います。

<input type="checkbox" bind:checked />

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

無効化

必須プロパティを意図的に省略する場合は、 で個別の要素を抑制するか、ルールを無効化してください。

export default {
  rules: {
    'a11y/required-aria-props': 'off'
  }
};

a11y/required-aria-props · 必須の ARIA プロパティがない

チェック内容

なぜ重要か

修正方法

モードによる違い

無効化