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="">