お前らはまだ img タグの alt 属性の付け方を間違っている

1行で

alt属性は、「全ての 画像をそのalt属性のテキストに置き換えたときにページの意味が変わらない 」ようにつける。
（HTMLの標準規格書より）

マジでこれに尽きる。

具体例

例１：ロゴ

❌ 間違ったマークアップ

間違い

<h1><img src="ABC_inc.gif" alt="会社ロゴ"></h1>
<p>我々の使命、それは世界にイノベーションを〜</p>

画像をalt属性のテキストに置き換えると以下のように意味がおかしくなる。

間違いの置き換え

<h1>会社ロゴ</h1>
<p>我々の使命、それは世界にイノベーションを〜</p>

✅ 正しいマークアップ

正しい

<h1><img src="ABC_inc.gif" alt="株式会社ABC"></h1>
<p>我々の使命、それは世界にイノベーションを〜</p>

画像をalt属性のテキストに置き換えても以下のように意味が通じる。

正しいの置き換え

<h1>株式会社ABC</h1>
<p>我々の使命、それは世界にイノベーションを〜</p>

例２：アイコンボタン1

❌ 間違ったマークアップ

間違い

<button>
  <img src="save.png" alt="保存アイコン">
</button>

✅ 正しいマークアップ

正しい

<button>
  <img src="save.png" alt="保存">
</button>

例３：アイコンボタン2

❌ 間違ったマークアップ

間違い

<button>
  <img src="save.png" alt="保存">保存
</button>

この場合は画像をalt属性のテキストに置き換えると以下のようにおかしくなる。

間違いの置き換え

<button>
  保存保存
</button>

✅ 正しいマークアップ

正しい

<button>
  <img src="save.png" alt="">保存
</button>

alt属性を空文字にすることで置き換えても以下のように意味が通じる。

正しいの置き換え

<button>
  保存
</button>

例４：顔写真

❌ 間違ったマークアップ

間違い

<h1>メンバー</h1>
<section>
  <img src="佐藤たかし.jpeg" alt="佐藤たかしの写真">
  <h1>佐藤たかし</h1>
  <p>××大学を卒業後〜</p>
</section>
<section>
  <img src="山田花子.jpeg" alt="山田花子の写真">
  <h1>山田花子</h1>
  <p>××での経験から◯◯に精通し〜</p>
</section>

✅ 正しいマークアップ

正しい

<h1>メンバー</h1>
<section>
  <img src="佐藤たかし.jpeg" alt="">
  <h1>佐藤たかし</h1>
  <p>××大学を卒業後〜</p>
</section>
<section>
  <img src="山田花子.jpeg" alt="">
  <h1>山田花子</h1>
  <p>××での経験から◯◯に精通し〜</p>
</section>

顔写真で何か明確な伝えたいことがあるならそれをaltに書くが、普通はただ視覚的なアイキャッチのために入れてるだけだと思うので空でよい。厳密には写真を入れることでその人の顔を覚えてほしいという意味があって、その場合alt="丸顔で目じりが下がったおでこの広い男"のように書くべきなのかもしれない。が、しょせん文章で個人を識別できるだけの顔の特徴を説明できるわけないし、だったら空文字でいいと思う。

例５：挿絵

❌ 間違ったマークアップ

間違い

<p>
 あなたは家の西の開けた野原に立っている。
 <img src="house.jpeg" alt="板張りの玄関ドアのついた白い家">
 そこには小さな郵便箱があった。
</p>

画像をalt属性のテキストで置き換えると以下のように前後との繋がりがおかしくなる。

間違いの置き換え

<p>
 あなたは家の西の開けた野原に立っている。
 板張りの玄関ドアのついた白い家
 そこには小さな郵便箱があった。
</p>

✅ 正しいマークアップ

正しい

<p>
 あなたは家の西の開けた野原に立っている。
 <img src="house.jpeg" alt="家は白く、板張りの玄関ドアがついている。">
 そこには小さな郵便箱があった。
</p>

純粋な挿絵ならあってもなくても文書の意味は変わらないのでalt=""でもよい。

補足

• alt属性を付けないのと空文字のalt属性をつける（alt=""）のとでは意味が全く異なる。空のalt属性は画像と置き換えた時にテキストが必要ない場合に使用する。一方でalt属性を付けないのは画像と置き換えた時にテキストが必要になる可能性があるのだが、それが提供できない場合である。例えばSNSでユーザが投稿した画像がこの場合に当たると考えられる。
• アイコンやロゴ以外の画像（特に写真）はalt=""とすべき場面が多い。なぜなら伝えたいことを画像のみでしか表現しないことはまれだから。普通は伝えたいことを文で書いたうえで、理解の助けとするための図示をしたりアイキャッチのために関連する画像を置いたりすることが多い。これらの用途の画像に空文字以外のalt属性を付けようとしても周囲の文章と同じ内容にしかならず、画像をalt属性のテキストに置き換えた時に同じことを2回言うような不自然なことになる。文章で画像で伝えたいことを書いてあるなら画像のalt属性でそれをもう一度書く必要はなく空文字でよい。

参照

標準規格書にはここで挙げた他にも、alt属性の正しい使い方の例をこれでもかというほど沢山載せている。たぶん間違った使い方が多いからだろう。
https://html.spec.whatwg.org/multipage/images.html#alt