アクセシビリティの観点で画像のalt属性をつけましょう。 alt属性をつけることによって目の不自由な人がスクリーンリーダーで読み上げたり、点字に変換して認識することができるようになります。
alt属性には”それだけで説明できるようなテキスト”を入れましょう。
例えば、
- ロゴ -> ロゴのテキストを入れる
- バナー -> バナーないのテキストを入れる
- フローチャートなど -> 可能な限り説明しましょう。（本文で説明するべきなので
aria-labelledbyを使うことを検討しましょう
alt=”” のケース
装飾が目的の画像の場合はCSSで背景画像にしてしまうか、 alt="" をつけましょう。
(altをつけないとスクリーンリーダーはファイル名を読み上げることになるため）
aria-labelledby=”something-id” のケース
画像に関する説明が本文でも行われている場合は重複が発生するため、 aria-labelledby を利用しましょう。
<img src="dinosaur.png" aria-labelledby="dino-label">
<p id="dino-label">The Mozilla red Tyrannosaurus ... </p>
参考
https://developer.mozilla.org/ja/docs/Learn/Accessibility/HTML#Text_alternatives
