画像が壊れたときにalt属性で伝えるべき情報と書き方

ウェブページの画像が表示されないとき、利用者が内容を推測できるかどうかは、HTMLのalt属性に左右されます。通信障害、画像ファイルの移動、拡張子の誤り、文字コードの不整合、古いブラウザーへの対応不足など、画像が見えなくなる理由は一つではありません。そのような場面で代替テキストが適切に設定されていれば、画像が担っていた情報を文章として受け取れます。

alt属性は検索エンジン向けのキーワード欄でも、画像の説明を無制限に書く場所でもありません。画像が伝えていた意味、用途、リンク先、画面上での役割を、周辺の文章との関係を踏まえて簡潔に示すための属性です。古いフレーム構成のサイトや、文字化けしたページを修正するときにも、画像だけでなく代替テキストの設計を確認することが重要になります。

alt属性が果たす役割を理解する

画像が正常に表示されている場合、利用者は写真や図版を視覚的に確認できます。しかし、視覚障害のある人がスクリーンリーダーを使っている場合、画像を読み込めない環境にいる場合、あるいは通信量を抑えるため画像を無効にしている場合には、画像の意味がそのまま伝わりません。alt属性は、この情報格差を小さくするための短い代替手段です。

ブラウザーが画像を取得できなかったとき、設定された代替テキストが画像の位置に表示されることがあります。画像のファイル名が「image01.jpg」や「banner_new.gif」のような文字列だけなら、何が掲載されていたのか判断できません。一方、「春季講座の申込ページへ移動するバナー」のように書かれていれば、視覚情報が失われても画像の目的を把握できます。

ただし、alt属性に期待できるのは画像そのものの代替情報です。画像の周囲にある見出しや本文をもう一度長く書く必要はありません。隣接する文章で内容が十分に説明されているなら、重複を避けた短い表現にします。アクセシビリティの観点では、画像が見える人と見えない人が同じ目的を達成できることが大切です。

写真や図版では何を説明するか

写真の代替テキストでは、画面に写っているものをすべて列挙するのではなく、そのページで必要とされる情報を選びます。例えば、観光案内の記事であれば「海岸に並ぶ赤い鳥居と夕日の風景」と説明できます。画像が施設の場所を示す目的で使われているなら、「駅から会場までの徒歩経路を示す地図」のように、用途を含めた表現のほうが役立ちます。

商品写真では、利用者の判断に必要な特徴を優先します。「白い陶器のマグカップ」だけで十分なページもあれば、「青い取っ手が付いた白色の陶器製マグカップ、正面から見た写真」としたほうが選択に役立つページもあります。色や形、数量、状態などを含めるかどうかは、本文や商品仕様ですでに説明されているかを基準に決めます。

グラフ、模式図、地図、手順図などは、見た目の再現だけでは情報を補えないことがあります。「売上推移のグラフ」とだけ書くと、数値や傾向は伝わりません。重要なデータを本文にも記載し、alt属性には「2020年から2024年にかけて売上が増加した推移グラフ」のように要点を示します。細かな数値を含む複雑な図は、本文の説明や別ページへのリンクで補足します。

リンク画像と操作用アイコンの書き方

画像そのものがリンクになっている場合、alt属性では画像の外観よりもリンク先の目的を明らかにします。例えば、家の形をしたアイコンがトップページへのリンクなら、「トップページ」と設定するほうが、「家のアイコン」より実用的です。利用者が知りたいのは、画像が何に見えるかではなく、選択するとどこへ移動するかだからです。

「詳しくはこちら」「クリック」といった表現だけでは、リンク先の内容が分かりません。講座案内の画像リンクなら「初級講座の詳細」、申込用のボタン画像なら「講座の申込フォームを開く」とします。複数の画像リンクが並んでいる場合も、それぞれを区別できる文言を使う必要があります。リンク先のページタイトルや行動内容を短く取り入れると、キーボード操作や音声読み上げでも選択しやすくなります。

検索ボタン、メニュー、再生ボタン、閉じるボタンなど、操作を実行する画像にも同じ考え方が適用されます。「虫眼鏡」ではなく「検索」、「×」ではなく「メニューを閉じる」と設定します。見た目の名称ではなく、操作によって起こる結果を示すことで、アイコンを見られない人にも機能が伝わります。画像の役割が機能なのか、単なる装飾なのかを先に判断することが正確な代替テキストにつながります。

装飾画像と空のalt属性

ページの雰囲気を整える背景模様、区切り線、意味を持たない飾り、本文の内容を繰り返すだけの小さな画像には、説明文を付けないほうがよい場合があります。そのときはalt=""とし、スクリーンリーダーが不要な情報として読み飛ばせる状態にします。alt属性そのものを省略すると、支援技術がファイル名やURLを読み上げることがあるため、装飾画像では空の値を明示します。

例えば、見出しの横に置かれた花のイラストが情報を追加していないなら、代替テキストは空で構いません。反対に、その花が「開花状況」を示す記号として使われている場合は、装飾とはいえません。「開花中」「準備中」など、状態を表す情報をalt属性に含めます。判断の基準は、画像を取り除いたときにページの意味や操作性が変わるかどうかです。

同じ内容が本文と画像の両方に書かれている場合も、重複した読み上げを避けます。例えば、画像の中に「受付終了」と書かれ、その直後の本文にも同じ表示があるなら、画像を装飾扱いにするか、本文側を整理します。反対に、画像内の文字だけが重要な情報を担っているなら、その文字を代替テキストで伝えます。画像内文字の完全な置き換えが難しいときは、HTML本文として同じ内容を掲載する方法がより確実です。

壊れた画像と古いHTMLを点検する

画像が壊れているページでは、alt属性の内容だけでなく、画像URL、ファイル名、大文字と小文字、相対パス、サーバー上の配置も確認します。srcの指定が誤っていれば画像は表示されませんが、alt属性が適切なら最低限の意味は残せます。これは一時的な障害への保険であり、壊れた状態を放置してよいという意味ではありません。

古いフレーム構成のサイトでは、フレームごとにタイトルや説明が不足し、画像が表示されないとページ全体の関係が分かりにくくなることがあります。ナビゲーション画像には移動先を示すalt属性を設定し、内容を表示するフレームには適切なtitleを付けます。文字コードが原因で日本語の代替テキストまで文字化けする場合は、HTMLの文字コード宣言、サーバーのレスポンスヘッダー、ファイルの保存形式をそろえて確認します。

点検時には、画像を一時的に非表示にして、本文だけで目的を達成できるかを確かめます。スクリーンリーダーやブラウザーの開発者ツールを使えば、alt属性が読み上げられる順序やリンクの識別方法も確認できます。ファイル名が表示されていないか、同じ文言が何度も読み上げられていないか、リンク先が区別できるかを見直すと、単なるSEO対策では見つかりにくい問題を発見できます。

運用面では、画像を追加する担当者が毎回同じ基準で判断できるよう、短い記述ルールを用意します。「写真は目的に必要な特徴を書く」「リンク画像は移動先を書く」「操作アイコンは実行結果を書く」「装飾画像はalt=""にする」という基準だけでも、品質のばらつきは抑えられます。自動検査ツールは設定漏れの発見に役立ちますが、文章が適切かどうかはページの文脈を見て人が確認する必要があります。

画像が壊れた状態でも内容を伝えられるページにするには、まず画像ごとの役割を分類し、その役割に合わせて代替テキストを設定してください。写真、図表、リンク、ボタン、装飾を同じ書き方で扱わず、利用者が次に何を理解し、何を操作する必要があるかを基準に見直すことが大切です。既存ページでは、表示されない画像、文字化けした画像、意味のないファイル名が表示される画像から優先して修正し、alt属性と周辺の本文を一緒に点検しましょう。