Gatsby.jsでホームページを作ろうとしていた時のこと。なんか警告を出してきた。

warn ESLintError: 
<JavaScriptファイルの絶対パス>.js
  5:5  warning  Redundant alt attribute. Screen-readers already announce `img` tags as an image. You don’t need to use the
words `image`, `photo,` or `picture` (or any specified custom words) in the alt prop  jsx-a11y/img-redundant-alt

この警告は何

gatsby@2.18.8にはeslint-plugin-jsx-a11y@6.2.3が依存パッケージとして入っている。

% npm ls eslint-plugin-jsx-a11y
<プロジェクトのpackage名>@<プロジェクトのバージョン> <プロジェクトのルートディレクトリパス>
└─┬ gatsby@2.18.8
  └── eslint-plugin-jsx-a11y@6.2.3

これが警告を出してくれている。

「スクリーンリーダーは「img」タグを画像として認識しています。のalt属性に「image」、「photo」または「picture」という単語を使用する必要はありません」らしい。

そもそもタグに入れる `alt` 属性とは

画像の説明。アクセシビリティとして用意する他に、画像が取得できなかった際、代わりに表示するものでもある。
必須ではない。

<img src="./hogepage.png" alt="ほげぱげ">

装飾の場合は空文字列で良いらしい。

<img src="./hogepage.png" alt="">

参考

eslint-plugin-jsx-a11y/img-redundant-alt.md at v6.2.3 · evcohen/eslint-plugin-jsx-a11y
[翻訳] Airbnb React/JSX Style Guide - Qiita
<img>: 埋め込み画像要素 - HTML: HyperText Markup Language | MDN
html - accessibility in decorative images or repetitive information images - Stack Overflow
javascript - What does this warning message mean? 'img elements must have an alt prop, either with meaningful text, or an empty string for decorative images' - Stack Overflow