---
title: a11y/required-aria-props · 必須の ARIA プロパティがない
description: 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"` は、発見可能な状態を持たないコントロールとしてアナウンスされます。ユーザーには「チェックボックス」としか聞こえず、それ以上の情報はなく、見た目には何かが欠けている兆候もありません。

## 修正方法

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

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

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

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

## モードによる違い

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

## 無効化

必須プロパティを意図的に省略する場合は、`<!-- svelte-vitals-disable-next-line a11y/required-aria-props -->` で個別の要素を抑制するか、ルールを無効化してください。

```js svelte-vitals.config.js
export default {
  rules: {
    'a11y/required-aria-props': 'off'
  }
};
```