はじめに
altとは、<img>要素で指定された画像が読み込まれない場合に表示する予備（代替）テキストです。
altとは何かを知っていても、画像の代わりになるテキストを書くのは難しいなと思いました
そこで今回はaltに関する記事や勉強会の資料を通して書き方を学んでみようと思います。
代替テキストの書き方を学ぶ
今回は上記を参考に学んでみます
代替テキストを書かないとき（alt=""）
- 特に意味がない装飾用の画像
-
alt=""にすると、スクリーンリーダーなどで画像自体無いように扱われる - （例）
代替テキストを書くとき
- 本文にある内容を繰り返さない
- 画像が持つ意味以上のことは含めない
- 代替テキストが長くなったり、複雑な場合は説明を本文に追加することを検討する
実際どう書く？
SmartHRのガイドラインでおすすめされていたので見る
特によく使いそうなものをまとめます
ロゴ画像の場合
- 表示されている画像と同様のテキストにする
- （例）Qiitaのロゴ画像は「Qiita」と読み上げられている
- 会社名が入っていないロゴの時は「〇〇株式会社」が良さそう？
アイコン画像
- アイコン画像の場合、近くに情報が載っているときは
alt=""にするのもあり- 「〇〇のプロフィール画像」とだと少し読み上げが冗長になる
- アイコン画像とアカウント名に個別のリンクがある場合は、つけるべき
-
alt=""だとラベルなしリンクになる - もっと言えば、丸ごとリンクにして画像は
alt=""だとスッキリする
-
人物写真の場合
- 「〇〇の写真」や「〇〇の様子」と書くと良い
- どんな人のどんな「様子」「風景」であるか書く
動物写真の場合
- どのような種類の動物がどんな仕草をしているのか具体的に書く
- 背景がある写真は背景も具体的に書く
詳細が文中にある写真
- 「〇〇（の写真）。詳細は以下」と書いて、本文との関係がわかるようにする
-
alt=""でも良さそう
-
グラフ
- 「〇〇のグラフ。詳細は以下」と
altに書いて、本文で詳細を書く - 本文が画像と離れた位置にある場合、画像と本文をidで紐付ける
- 本文が画像と違うページにある場合、画像のすぐ隣に説明文へのリンクを置く
代替テキストを書いてみる
その1 アイコン画像
この画像はQiitaのマイページのプロフィール部分の画像です。こちらはアイコンが個別リンクでないためalt=""で良さそう！
その2 動物の写真
代替テキストだけ書いてみるので、detailsを開いてお題の画像を見てみてください。
テキストから想像した画像と近いかな...！？
考えたaltと画像
「黒、灰色、白の毛が混ざったスコティッシュフォールドの猫。4つ折りにされた新聞の上で斜め下を見て、座っている。」
お題の画像
その3 グラフ画像
この場合、グラフ付近に説明があるので「猫を飼ったことに対してのアンケート結果の画像。詳細は以下。」とするかalt=""でも良さそう。
このグラフの説明がない場合、情報量が少ないので「猫を飼ったことに対してのアンケート結果の画像。飼ってよかった89.5%、良いが今後は飼いたくはない9.5%、飼わなければよかった1%」とする。なんのアンケートかと、アンケートの結果をaltに書く。
まとめ
今回はaltについて、書く場面と書き方を学びました
最後までお読みいただき、ありがとうございます
参考