jsx-a11y/img-redundant-alt 正しさ
何をするか
img 要素の alt 属性に、「画像」、「写真」、「写真」などの重複する言葉が含まれていないことを強制します。
なぜ問題か
スクリーンリーダーは img 要素を「画像」として自動的に読み上げるため、alt テキストに「画像」「写真」「写真」などの語を使う必要はありません。このような言葉の使用は補助技術ユーザーにとって冗長な情報となり、alt テキストの簡潔さと有用性を低下させます。
例
このルールに対して不適切なコードの例:
jsx
<img src="foo" alt="Fooが変な様子を撮った写真。" />
<img src="bar" alt="バーで私が撮った画像!" />
<img src="baz" alt="Bazがバグを修正している写真。" />このルールに対して適切なコードの例:
jsx
<img src="foo" alt="Fooがサンドイッチを食べている様子。" />
<img src="bar" aria-hidden alt="画像を撮影している私の写真" /> // 非表示なので通ります。
<img src="baz" alt={`Bazが${photo}を取っている`} /> // `photo` が変数名なので有効です。設定
このルールは以下のプロパティを持つ設定オブジェクトを受け入れます。
components
type: string[]
default: ["img"]
このルールが適用される、検証対象となる JSX 要素タイプ(コンポーネント名)。たとえば、["img", "Image"]。
words
type: string[]
default: ["image", "photo", "picture"]
alt テキスト内で冗長と見なされ、警告を発動すべき語。
使用方法
このルールを有効にするには、設定ファイルまたは CLI を使って次のように指定できます:
json
{
"plugins": ["jsx-a11y"],
"rules": {
"jsx-a11y/img-redundant-alt": "error"
}
}bash
oxlint --deny jsx-a11y/img-redundant-alt --jsx-a11y-plugin