代替テキストは、画像を見られない人や画像が読み込まれない環境でも、画像が伝えている情報を受け取れるようにするためのテキストです。Web制作では、画像を配置するたびに「この画像は何を伝えるためにあるのか」を確認し、その目的に合う代替テキストを用意します。
この記事では、代替テキストの意味、HTMLのalt属性との関係、画像の種類ごとの書き分け、よくある失敗例を整理します。Webアクセシビリティの基本をこれから整えたい担当者にも、既存サイトの画像を点検したい制作者にも使いやすい内容です。
代替テキストとは？
代替テキストとは、画像の代わりに読まれる、または表示されるテキストのことです。HTMLでは主に<img>要素のalt属性に書きます。
<img src="rose.jpg" alt="赤いバラの花束">ここで大切なのは、代替テキストは「画像を細かく実況する文章」ではなく、「そのページで画像が果たしている意味や機能を伝える文章」だという点です。同じバラの画像でも、花屋の商品ページなら「赤いバラ12本の花束」、イベント告知の装飾なら空のalt属性が適切な場合があります。
代替テキストが必要な理由
代替テキストは、アクセシビリティのためだけに後から足すものではありません。画像に頼っている情報を、テキストでも扱えるようにする設計です。
- スクリーンリーダー利用者に内容を伝える：スクリーンリーダーは、画像そのものではなく代替テキストを読み上げます。画像が情報や操作の手がかりになっている場合、代替テキストがないと意味が抜け落ちます。
- 画像が表示されない環境でも情報を残す：通信状況、読み込みエラー、画像を非表示にする設定などで画像が出ない場合でも、代替テキストがあれば最低限の意味を伝えられます。
- 画像の内容理解を補助する：検索エンジンが画像やページ内容を理解する手がかりにもなります。ただし、主目的はユーザーへの情報提供です。検索対策のためにキーワードを詰め込む書き方は避けます。
まず画像の役割を分ける
良い代替テキストは、画像の種類を見分けるところから始まります。すべての画像に詳しい説明を書く必要はありません。画像がページ内で果たしている役割に合わせて、書く内容を変えます。
| 画像の役割 | 代替テキストの考え方 | 例 |
|---|---|---|
| 情報を伝える画像 | 画像が伝えている要点を短く書く | alt='赤いバラ12本の花束' |
| リンクやボタンとして働く画像 | 見た目ではなく、押すと何が起きるかを書く | alt='資料をダウンロード' |
| 装飾だけの画像 | 空のalt属性にして読み上げ対象から外す |
alt='' |
| 図表やスクリーンショット | 短い代替テキストに加えて、重要な内容を本文でも説明する | 手順画像なら、画像の下に操作手順をテキストで書く |
特に図表やインフォグラフィックのような非テキスト情報の代替手段では、alt属性だけで全部を説明しようとすると長くなりすぎます。短い説明と本文内の補足を組み合わせるほうが読みやすくなります。
代替テキストの基本的な書き方
画像の意味を簡潔に書く
画像が伝えている内容を、短く具体的に書きます。単に「画像」や「写真」と書く必要はありません。
<img src="flower.jpg" alt="赤いバラの花束">悪い例は、何を伝えたいのかが曖昧な書き方です。
<img src="flower.jpg" alt="画像">機能を持つ画像は、機能を書く
画像がリンクやボタンとして使われている場合は、画像の見た目ではなく操作後の結果を伝えます。たとえば下向きの矢印アイコンなら「矢印」ではなく「資料をダウンロード」のほうが、利用者に必要な情報です。
<a href="/download/">
<img src="download-icon.png" alt="資料をダウンロード">
</a>装飾画像は空のalt属性にする
区切り線、背景装飾、意味を持たないアイコンなどは、読み上げられるとかえって邪魔になることがあります。その場合はalt=""を指定します。
<img src="decorative-line.jpg" alt="">alt属性を省略するのではなく、空のalt属性を明示することが重要です。省略すると、支援技術やブラウザの挙動によってはファイル名などが読まれ、不要な情報が増える場合があります。
よくある失敗と直し方
代替テキストは短い項目ですが、ページ全体の読みやすさに影響します。次のような書き方は見直します。
- キーワードを詰め込む：検索対策を意識しすぎて、同じ語句を並べないようにします。利用者にとって自然に読める文にします。
- 本文やキャプションと同じ内容を繰り返す：すぐ近くに同じ説明がある場合、代替テキストでは重複を避けます。
- 見た目だけを説明する：「青い丸のアイコン」よりも、「検索する」「メニューを開く」のように、必要な意味や機能を書くほうが適切な場合があります。
- 長く書きすぎる：一文で収まらない説明が必要なら、本文やキャプションに説明を分けます。
- 空のalt属性を乱用する：装飾ではない画像まで空にすると、重要な情報が伝わらなくなります。
公開前のチェックリスト
記事やページを公開する前に、画像ごとに次の点を確認します。
- その画像は、情報提供、操作、装飾のどれに当たるか。
- 代替テキストは、そのページ内での画像の役割を説明しているか。
- 「画像」「写真」など、不要な単語だけで終わっていないか。
- 近くの本文やキャプションと同じ内容を重複していないか。
- 装飾画像には
alt=""が設定されているか。 - 図表やスクリーンショットの重要な内容を、本文でも説明しているか。
代替テキストは小さな改善ではなく、情報設計の一部
代替テキストを整えることは、目で画像を確認できない人だけのための対応ではありません。画像が読み込まれない環境、通信量を抑えたい場面、検索エンジンによる画像理解など、さまざまな状況で情報の欠落を減らします。
重要なのは、画像を置いた後に機械的に説明文を足すことではなく、画像がページ内で何を担っているのかを考えることです。画像の意味、操作上の役割、本文との関係を確認しながら、必要十分な代替テキストを設定しましょう。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティウィジェットツールをリリースしております。アクセシビリティ向上にご興味がある方は、ぜひ詳細をご覧ください。