seo/image-alt · 画像の alt テキスト

<img> には alt 属性を付けます。

重大度: warning

チェック内容

alt 属性のない <img> を検出します。明示的な空の alt="" は、純粋な装飾画像を示す正当なシグナルなので合格とします。スプレッド（{...rest}）は alt を渡している可能性があるため検出しません。

なぜ重要か

alt 属性のない <img> は、画像検索からも支援技術からも見えません。説明的な alt は画像 SEO のシグナルであり、アクセシビリティも向上させます。

修正方法

<img src="/photo.jpg" width="800" height="600" alt="公園でフリスビーをキャッチするゴールデンレトリバー" />

<!-- 純粋な装飾画像の場合: -->
<img src="/divider.svg" alt="" />

モードによる違い

ソース解析（CLI、ダッシュボードの静的ベースライン）は、ルート自身のテンプレート、つまりページとレイアウトチェーンにある <img> を読みます。子コンポーネントが描画する <img> は見えません。属性は値にかかわらず書かれていれば「あり」と数え、スプレッド（{...rest}）はすべての属性を「あり」と数えます。レンダリング解析（Vite プラグインのビルド、ダッシュボードで訪問したルート）は出荷される本文のすべての <img> を読みます。ビルドが対象にするのはプリレンダリングされたルートだけで、その検出は HTML ファイルに紐づきソース行を持たないため、インラインの svelte-vitals-disable-next-line が届くのはソース解析の検出だけです。両者が食い違うときは、レンダリング解析の結果を信じてください。

無効化

既存の検出は suppressions ファイルに記録して抑制できます（npx svelte-vitals --update-suppressions）。overrides でルートやパス単位に絞るか、ルールごと無効化するには、次のように設定します。

export default {
  rules: {
    'seo/image-alt': 'off'
  }
};