「画像が見えない人」への配慮が、全員の利益になる#
<img> タグにある alt 属性（代替テキスト）。「面倒だから」と空欄にしたり、ファイル名 (image01.jpg) のままにしたりしていませんか？
ALT属性は、以下の3つの役割を持つ極めて重要な属性です。
- アクセシビリティ: 視覚障がい者が使うスクリーンリーダー（音声読み上げソフト）が、画像の内容を言葉で伝えます。
- SEO: Googleのクローラー（ロボット）は画像を見ることができないため、ALTテキストを読んで画像の内容を理解し、画像検索のインデックスに使用します。
- フォールバック: 通信エラーなどで画像が表示されなかったときに、代わりにテキストが表示されます。
1. 良いALTテキストの書き方#
「画像に何が写っているか」を具体的に、かつ文脈に合わせて記述します。
- Bad:
alt="画像"alt="photo.jpg"（無意味） - Bad:
alt="男性 パソコン 仕事 ビジネス"（キーワードの羅列はスパム扱いされるリスクあり） - Good:
alt="明るいオフィスでノートパソコンを開いて笑顔で会議をする男性"（具体的）
コンテキスト（文脈）が重要
同じ写真でも、使われる場所によって最適なALTは変わります。 例えば「パンケーキの写真」の場合：
- カフェのメニュー:
alt="季節限定 イチゴとホイップクリームのパンケーキ" - レシピ記事:
alt="焼き上がったパンケーキに粉砂糖を振りかけている様子"
2. 装飾用画像の扱い（alt=""）#
背景模様や、テキストの横にあるアイコンなど、**「意味を持たない装飾目的の画像」**の場合はどうすべきでしょうか？
この場合、alt 属性を削除するのではなく、空（alt=""） に設定します。
<!-- Good: スクリーンリーダーはこの画像を無視（スキップ）します -->
<img src="decoration-line.png" alt="">
もし alt 属性自体を書かないと、スクリーンリーダーによってはファイル名（decoration-line.png）を読み上げてしまい、ユーザーにとって非常に耳障りなノイズになります。
3. 画像生成AIとアクセシビリティ#
最近は「画像の内容をAIで解析してALTを自動生成する」技術も登場していますが、過信は禁物です。 AIは「写っている物体」は認識できても、**「その画像がそのページに置かれている意図」**までは理解できないからです。
最終的には人間が確認し、「この画像が見えない人に、このページの情報をどう伝えるべきか？」という視点で推敲することが大切です。
4. SEOへのインパクト#
Googleの画像検索からの流入は、業種（ファッション、インテリア、レシピ、旅行など）によってはWeb検索と同等かそれ以上のボリュームになります。 ALT属性を正しく設定することは、この巨大なトラフィック源を活用するための唯一の方法です。
「誰かのために」行ったアクセシビリティ対応が、巡り巡って「自分のサイトの評価」として返ってくる。Webとはそういう場所です。
VIIO 編集部
VIIOのUI/UXデザインチーム。Webパフォーマンスとアクセシビリティの向上に情熱を注いでいます。複雑な技術をわかりやすく伝えることをモットーに記事を執筆中。