ホームページ画像の代替テキストの書き方装飾と情報とリンクを分ける

画像の代替テキストを考えるときは、写っている物の名前より、そのページで読者が画像から得る情報を見ます。入口の写真なら目印、ボタンの画像なら動作や行き先、純粋な飾りなら説明が不要な場合があります。同じ写真でも、アクセス案内に使う時と、装飾として使う時では役割が変わります。

ページで画像が果たす役割を見る

判断に使う情報がある場合

最初に、画像を隠したとしても同じ内容を本文で判断できるかを読みます。例えば店舗への案内で、扉の左側に白い手すりがあることが来店者の目印なら、その情報は代替テキストや周辺の説明に含められます。料金表や工程図は、数値や順序が判断材料になります。画像の短い説明に加え、本文で同じ項目を読める表や文章を用意します。

飾りと、機能を持つ画像

背景の模様など、他の情報を追加しない画像は、空のaltで装飾として扱える場合があります。一方、画像だけがリンクやボタンの名前になる場合は、操作の意味が分かる説明が必要です。隣の文字が同じリンクの内側にある場合は、その文字で行き先を説明できることがあります。見る箇所は画像単体の見た目より、画像と周囲の文、リンクやボタンを組み合わせた状態です。

画像を登録する人が役割を迷ったら、「この画像の情報を読めないと、読者が困ることは何か」を原稿担当に聞きます。必要な情報がすでに一文で書いてある場合は、説明を二度聞く状態になるかも確認します。

サムネイルのように、同じ枠に画像と記事名が並ぶ箇所も見ます。画像が記事の内容を伝え、記事名の文だけでは足りないのか、画像は記事を選ぶ飾りに近いのかで扱いが変わります。記事の本文では情報を持つ画像でも、一覧では隣の見出しで足りる場合があります。使うページごとに役割を判断し、ファイル名に一度書いた説明をすべてに当てはめないようにします。

情報画像は判断に必要な要点を書く

店舗の入口を示す写真なら、「正面の入口。扉の左に白い手すりがあります」のように、訪問前に判断するための要点を選びます。施設の広さ、色、周辺の目印など、写真に写るすべてを列挙する必要はありません。写真だけでは分からない入口の利用時間や段差の情報は、現場で確認したうえで別の本文に書きます。写っていることと、現場の運用を混ぜないようにします。

画像の例	その場所での役割	本文と代替テキストの考え方
入口の写真	目印を伝える	手すりや扉の位置を短く示す
画像にした料金表	条件と金額を伝える	本文に表を置き、画像は概要を示す
体験申込の画像リンク	操作を案内する	体験申込を見る
見出し横の飾り	見た目を整える	情報の重複がなければ空のaltを検討

複雑な図で説明が長くなるときは、画像の短い説明の後に、本文側で「誰が何をするか」「順番」「例外」を読めるようにします。図が対応する段落のすぐ近くに文章があると、画像を見られる人も、図中で見失った項目を確かめられます。

工程図の代替テキストを考える場合は、例えば「受付から作業終了までの3段階を示す図」と短く示し、本文に「相談、見積もり確認、作業と引き渡し」の順で説明します。受付が条件付きの場合は、図の小さな注記だけに置かず、本文にも書きます。図の内容を文章にするときは、配置や色だけを説明するより、読み手の判断に使う条件を先に示します。

情報画像と装飾画像とリンク画像の代替テキストの違い — 検証用HTMLとChromeで確認した例です。各項目は本文でも確認できます。

リンク画像と装飾画像を分けて入力する

画像しかない体験申込リンクでは、「手芸の写真」より「体験申込を見る」のような行き先を伝える言葉が役立ちます。同じリンクの中にすでに「体験申込を見る」という文字があり、画像が文字以上の情報を持たない場合は、画像の説明が重なって聞こえるかを確認します。画像のほかに、独立した別リンクを並べている場合は、Tabで同じ行き先へ二回移動するかなど、実際の操作も見ます。

alt属性に空の値を入れる場合と、属性自体を省く場合は区別します。W3C WAIの案内では、純粋な装飾画像の例に空のaltを示しています。編集欄を空にした結果、ソフトやテンプレートが何を出力するかは生成したHTMLで確認します。テンプレートに画像の説明が自動で入る場合も、実際の用途に合っているかを確かめます。装飾の例と商品画像の例を同じ規則で一括処理する前に、数ページを抜き取って文脈を照合します。

生成されたHTMLと表示を確認する

編集画面で入力したら、プレビューだけでなく公開されるHTMLを開いて確認します。表示用の画像と、リンクの名前を確認できるブラウザーの機能を使い、画像の説明の有無、空の値、行き先を見ます。検証用のHTMLでは、装飾画像の空のalt、入口画像の説明、画像だけのリンクの「体験申込を見る」という名前をChromeで確認できました。架空のページに対する確認で、特定の作成ソフトや読み上げ環境での結果を示すものではありません。

実際のサイトでも、ソフトの公式マニュアルの画像に関する説明を読み、使用中のテンプレートが生成した結果を確認します。スマホで本文を開くときは、画像が切れても説明に必要な文が残るかを見ます。キーボードで移動し、リンクが意図した箇所で操作できるかを確かめ、可能なら普段利用する読み上げの環境でも同じ経路をたどります。

HTMLで、たとえば飾りの画像に alt="" があることを確認します。画像だけのリンクなら、ブラウザーでリンクとして読み取られる名前と、hrefに指定した行き先も照合します。画像の代替テキストが表示されるかどうかだけを試すより、リンクとして案内したい意味が伝わるかを確認します。CMSや作成ソフトを変更した時も、同じ数ページで比較できます。

更新後に文脈が変わった画像を探す

画像を差し替えるときは、ファイルだけでなく「本文で何を説明する画像か」を確認します。例えば、入口が変わったのに前の目印をaltに残すと、写真と案内が別の場所を指します。料金表の図を別の記事に転用するときも、その記事で具体的な料金を読む必要があるか、概要だけで用が足りるかを確認します。画像がリンクになったり、リンク先が変わったりした時も名前を見直します。

編集の記録には、掲載URL、画像の用途、現在の代替テキスト、本文にある同等の説明、確認日を残します。優先して調べるのは、申込、連絡先、アクセス、料金など、利用者の判断に直接関わるページです。写真撮影のリストを準備する段階で、各写真の説明したい要点も一緒に書くと、原稿と画像の照合がしやすくなります。

修正を依頼する場合は、ファイルの名前だけでなく「アクセスページの1枚目、本文では入口の左を案内」と文脈を添えます。別の一覧で同じ写真が使われているときは、修正を全箇所へ反映するかを判断します。画像を説明する人とHTMLを確認する人が違う場合は、後から意図を読み取れるよう、どの情報を残すかを表に書きます。

代替テキストを更新する人に、判断できなかった画像も渡します。複数の解釈がある図や、用途が不明なリンクでは、まず原稿の意図を確認します。