画像のalt属性の書き方は見えない状況で伝える内容から決める
公開日： 執筆：佐藤
alt属性には、画像の見た目を決まった形で説明するのではなく、その画像が使えないと失われる情報や機能を書きます。情報を伝える画像、飾りだけの画像、リンクになった画像、文字を描いた画像では、書くべき内容が違います。
画像を文章へ置き換えた状態を想像してください。ページの意味と操作が残るなら、その文章がaltの候補です。残らないなら書き直します。失われる情報も機能もなければ、説明を足さず、空のaltを指定します。
altは、検索語を並べる欄でも、すべての画像へ「○○の画像」と書くための欄でもありません。先に画像の役割を決め、その役割だけを短い言葉へ移します。
alt属性は、画像の代わりに働く短い文章である
HTML 4.01は、画像などを通常どおり表示できないとき、代わりの内容として使う文章をalt属性で指定すると説明しています。画像を表示しない設定の利用者、非視覚的な利用環境、音声で内容を受け取る利用者なども挙げています。
WCAG 2.0の達成基準1.1.1は、画像を含む非テキストの内容に、同じ目的を果たす代替テキストを求めています。一方、純粋な装飾や見た目の調整だけに使うものは、支援技術が無視できる形にします。
大切なのは、写真を細部まで実況することではありません。WCAG 2.0達成方法G94は、画像を代替テキストへ置き換えても、目的と情報が失われないかを判断基準にしています。同じ画像でも、置かれたページと使い道が変われば、altへ書く内容も変わります。
まず、画像の役割を四つに分ける
altを書く前に、画像を次の四つへ分けます。
| 画像の役割 | altで残すもの | 書かないもの |
|---|---|---|
| 情報画像 | 画像が伝える情報、または詳しい説明への案内 | 意味に関係しない色、形、ファイル名 |
| 装飾画像 | 何も書かず、alt=""にする |
「飾り画像」「罫線」などの不要な読み上げ |
| リンク画像 | 移動先または操作の目的 | アイコンの見た目だけの説明 |
| 画像内文字 | 理解や操作に必要な文字 | ページの検索語、画像と無関係な宣伝文句 |
この分類は、画像ファイルの種類ではなく、ページ内の役割で決めます。たとえば同じ建物写真でも、入口を案内するページでは情報画像になり、文章の雰囲気を整えるだけなら装飾画像になり得ます。
情報画像は、見えないと失われる情報を書く
情報画像では、画像が何を伝えるために置かれているかを先に決めます。写っているものを端から列挙する必要はありません。本文の判断に必要な情報を残します。
以下は、受付までの順路を示す案内図を置く場合の完全な仮例です。
<img src="access-map.gif" alt="受付までの案内図。順路は次の文章で説明">
<p>正面入口から入り、右側の階段で2階へ上がると受付があります。</p>
案内図だけに順路を閉じ込めず、詳しい内容を本文にも置いています。図が表示されなくても、読者は目的地へ進めます。反対に、alt="案内図の画像"では、画像があることしか伝わりません。
図表の内容が一文へ収まらない場合も、altへ無理に詰め込みません。「何を示す図か」と「詳しい情報をどこで読めるか」を短く示し、数値や手順は本文または表で伝えます。
装飾画像は、空のaltで読ませない
飾りの罫線、角丸の部品、文章の意味を変えない模様などは、alt=""とします。HTML 4.01は、見た目の調整に使う画像へ無関係な代替テキストを書かず、空の文字列にするよう示しています。WCAG 2.0達成方法H67も、支援技術が無視してよい画像では、空のaltを指定し、title属性を付けない方法を示しています。
<h2><img src="heading-mark.gif" alt="">会社案内</h2>
この例で画像は、見出しの横に置く飾りです。alt="会社案内の飾り画像"とすると、見出しの前へ役に立たない言葉が増えます。alt属性そのものを省くのではなく、属性を残して値を空にします。
意味を持たない罫線や背景は、画像ではなくスタイルシートで表現します。HTML 4.01も、ページの見た目を整えるために画像を使うより、スタイルシートを使うよう勧めています。
リンク画像は、見た目より移動先の目的を書く
画像だけがリンクになっている場合、altはリンクの役割も引き受けます。WCAG 2.0達成方法H30は、画像がリンク内の唯一の内容なら、画像の代替テキストでリンク固有の目的を説明するよう示しています。
次は、封筒のアイコンから問い合わせフォームへ移動する完全な仮例です。
<a href="/contact/"><img src="mail.gif" alt="お問い合わせフォームへ"></a>
alt="封筒の画像"では、押したあとに何が起こるか分かりません。リンク画像では、形より「どこへ移るか」「何をするか」を書きます。
画像の隣に、同じリンクの目的を示す文字がある場合は、内容を二度繰り返す必要はありません。
<a href="/contact/"><img src="mail.gif" alt="">お問い合わせフォームへ</a>
ただし、画像がリンク先について別の情報も伝えるなら、その情報は残します。空にするかどうかは、「同じリンク文字がある」という形だけでなく、画像を外したときに情報が失われないかで判断します。
画像内文字は、意味に必要な言葉をaltへ入れる
見出し、告知、ボタンなどの文字を画像にしている場合、その言葉が理解や操作に必要ならaltにも入れます。WCAG 2.0達成方法H37は、内容の理解に重要な言葉が画像内にあるとき、同じ言葉を代替テキストへ含めるよう示しています。
次は、休業日を知らせる画像の完全な仮例です。
<img src="holiday.gif" alt="夏季休業のお知らせ。8月13日から15日まで休業します">
画像の中に長い案内文があるなら、すべてをaltへ押し込みません。画像内の短い題名をaltにし、日程、条件、連絡先などは本文にも書きます。
すでに同じ言葉が隣のHTML本文にあり、画像が文字を飾っただけなら、空のaltを検討します。文字が描かれているという理由だけで、いつも全文を繰り返すわけではありません。
altをキーワード欄や画像説明の定型文にしない
ページの主な検索語を、すべての画像へ貼り付けても、画像の代わりにはなりません。次は、書き方を比べるための完全な仮例です。
| 状況 | 避けるalt | 役割に合うalt |
|---|---|---|
| 受付への案内図 | alt="会社案内 地図 アクセス 営業所" |
alt="受付までの案内図。順路は次の文章で説明" |
| 見出し横の飾り | alt="会社案内の画像" |
alt="" |
| 問い合わせ先への画像リンク | alt="メール画像" |
alt="お問い合わせフォームへ" |
| 休業日の文字画像 | alt="お知らせ画像" |
alt="夏季休業のお知らせ。8月13日から15日まで休業します" |
image01.gifのようなファイル名、「画像」「写真」「アイコン」だけの言葉、ページタイトルを繰り返す定型文も、それだけでは画像の役割を伝えません。画像であることを知らせる必要があるのではなく、画像が担っていた情報や機能を残す必要があります。
Googleのalt属性に関する説明も、alt属性には役に立つ正確な情報を入れるという考え方を示しています。検索向けの意味があるとしても、画像と無関係な検索語を足す理由にはなりません。本稿では、altによる検索順位の変化や掲載を保証しません。
画像を外し、代わりの一文を置いて確かめる
altを書くときは、次の順序で判断します。
- 画像の前後にある見出し、本文、リンク先を読む。
- 画像を外すと、どの情報または操作が失われるかを書く。
- 失われるものがなければ、
alt=""にする。 - 一文に収まらない情報は、本文や表にも置く。
- 画像の代わりにaltを読んで、重複と不足を確かめる。
原稿を書く人は、画像を置いた目的と、見えなくても必要な情報を決めます。制作担当者は、その判断をHTMLへ設定します。確認する人は、画像を外した状態で、文章とリンクだけでも内容と操作が残るかを読みます。altの入力欄を埋めたことと、代替できる文章になったことは別です。
最初の一手は、一ページにある画像を一覧にし、それぞれへ「情報」「装飾」「リンク」「画像内文字」の役割を一つ書くことです。役割が決まった画像から、altと周囲の本文を見直してください。
関連記事
