a11y/unknown-aria-attribute · 未知の ARIA 属性

aria-* 属性には、タイポではない実在の WAI-ARIA 属性名を指定します。

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

チェック内容

aria-* 属性の名前が WAI-ARIA 仕様で定義されていない場合を検出します。コンポーネントのソースを解析します。

チェックするのは属性の名前のみで、値は対象外です（実在する属性の不正な値は a11y/invalid-aria-value が扱います）。そのため、名前が未知であればリテラル値でも動的な式でも同じように検出されます。

aria-lable="x"。名前のスペルミスとして検出されます。
aria-lable={x}。同じスペルミスで、値が動的な形として検出されます。

検出しないもの:

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

仕様で定義された属性: aria-label="x"。
値が動的な、仕様で定義された属性: aria-hidden={isHidden}。

なぜ重要か

支援技術は WAI-ARIA 仕様が定義する固定の aria-* 属性しか認識しません。未知の名前、たいていは aria-label を aria-lable と書くようなタイポは、ブラウザやスクリーンリーダーがエラーとして報告できるものではなく、単に無視されます。意図した読み上げは行われないまま、見た目には何の異常もありません。

修正方法

正しいスペルの、仕様で定義された属性を使います。

<button aria-label="Close">×</button>

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

無効化

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

export default {
  rules: {
    'a11y/unknown-aria-attribute': 'off'
  }
};

a11y/unknown-aria-attribute · 未知の ARIA 属性

チェック内容

なぜ重要か

修正方法

モードによる違い

無効化