img要素のaltの書き方について参考書籍をもとにまとめてきましたので紹介します。少し古い本なので、新しい情報があれば追加したり、いらない情報は消したりしていただければ幸いです。
＜１＞alt属性の使い方
①省略できる場合もありますが、alt属性を指定するのが原則。
②alt属性には代替テキストを記述します。「ページのimg要素がalt属性の値に置き換わったとしても、文脈としておかしくならないこと」を基準に考えます。
③他のコンテンツと意味が重複しないようにします。
＜２＞画像の意味がsrc属性とalt属性の組み合わせによって変わります
①src属性にもalt属性にも値がある場合
<img src="images/aaa.jpg" alt="bbb">
画像はコンテンツの重要な部分であることを表します。
②src属性に値があり、alt属性に値がない場合
<img src="images/aaa.jpg" alt="">
画像は装飾または補足であることを表します。
③src属性に値があり、alt属性そのものがない場合
<img src="images/aaa.jpg">
画像はコンテンツの重要な部分である可能性を持ちますが、代替テキストはありません。画像を装飾や補足で使う場合は、このパターンのようにalt属性自体を書かないのは好ましくなく、パターン②のように書きましょう。
＜３＞画像の種類ごとのALT属性の書き方
①画像のみのリンクやボタン
alt属性にはリンクやボタンの目的を伝えるテキストを指定します。
<a href ="/"><img src="images/aaa.png" alt="accorder.co.jp"></a>
②チャート・グラフ・図・地図・イラストなど
これらは情報を伝えるのに優れたコンテンツですが、画像を閲覧できないユーザーにも正しく伝わるように、alt属性を使って代替テキストで情報を提供する必要があります。
（例）カップ麺の作り方を示すフローチャート
<img src="aaa.jpg" alt="フタを開けて、かやくとスープを取り出します。次に、かやくとスープの中身をカップの中に入れ、熱湯を注ぎます。3分待って、よくまぜて召し上がりください">
例えばカップ麺の作り方を示すフローチャートをimg要素で表示するなら、上記のように書きます。
※alt属性はあくまで代替テキスト
alt属性はあくまで代替テキストなので、「alt=”カップ麺の作り方のフローチャート”」（このテキストならtitle属性が適切）のようにalt属性を指定するのではなく、文脈として不自然のないように指定しましょう。
○アイコンやロゴ
・アイコンとその後のテキストが同じ意味を伝えている場合はalt属性は空欄。・アイコンだけで情報を伝える場合はalt属性を指定する。
・サイトヘッダーのロゴは会社名やサイト名などを入れる。
○画像化されたテキスト
特殊なフォント使ったり、文字間を精密に調整して見せたりしたい時に、テキストを画像化して使うことがあります。この場合は、単純に画像化したテキストをalt属性値とします。
◯装飾用やテキストを補足する画像
直接的な意味は持たないものの、雰囲気を演出する画像やテキストを補足する画像は「alt=””」と記述します。属性値は何も入れません。
＜参考文献＞
浜俊太朗（2013）『HTML5マークアップ 現場で使える最短攻略ガイド』アスキー・メディアワークス
