画像の代替テキストは何を書く？写真・図・ボタンで変わる伝え方

画像の説明欄に何を書けばよいか迷ったら、その画像がページで果たす役割を考えてみましょう。代替テキストは、見た目をすべて言葉にするための欄ではありません。写真、装飾、操作用の画像、グラフを例に、伝える内容の選び方を紹介します。

画像が伝える情報や機能を、文字でも届ける

代替テキストは、画像を見ることが難しい場合にも、その情報や機能を伝えるための文章です。HTMLの画像では「alt属性」に指定します。画面を音声で読み上げるソフトなどが、この情報を利用します。

W3C WAIの画像チュートリアルは、画像の目的に応じて代替テキストを決める考え方を示しています。本記事では、この案内をもとに以下の例を独自に作成しています。

同じ写真でも、掲載するページの目的によって必要な説明は変わります。 たとえば会議室の写真は、雰囲気を伝えるページと、入口の段差を説明するページでは、読者が知りたいことが違います。

架空の施設案内に、入口の写真があるとします。「入口の写真」だけでは、その写真で伝えたい内容が分かりません。もし段差のない経路を説明するための写真なら、「建物右側にある、スロープ付きの入口」のように、確認できる特徴を示す方が目的に合います。

一方、その写真から分からないことまで補うのは避けましょう。「誰でも安全に利用できる入口」と書くと、幅や傾斜などを検証していないのに、利用可能性まで保証する表現になってしまいます。

隣の本文に同じ説明がある場合は、その文章と合わせて何が伝わるかを読み直します。画像だけで文章を完結させようとして長くするより、必要な説明を本文にも置く方が、すべての読者が条件を確かめやすくなる場合があります。

W3Cは、情報を持たない装飾画像には空の代替テキストを使い、リンクやボタンとして使う画像には機能を伝える説明を付けるとしています。次はその考え方を使った例です。

表が見切れる場合は横にスクロールできます

装飾として空にすることと、alt属性を付け忘れることは同じではありません。また、文字ラベルの付いたボタンなどでは、画像以外からも操作名が伝わります。管理画面で入力する説明と、実際のページで読み上げられる操作名を合わせて確認する必要があります。

棒グラフに「売上グラフ」とだけ付けても、増減や数値は伝わりません。W3Cは複雑な図に含まれる情報も、文字による同等の説明で利用できるようにする考え方を示しています。

たとえば架空の来場者数のグラフなら、本文で全体の変化を説明し、期間ごとの数値を表で読めるようにする方法があります。短い代替テキストには、何のグラフか、詳しい数値をどこで確認できるかを示すと、説明の役割を分担できます。

数値を確認するために必要な単位や集計期間も、図の中だけに閉じ込めない方がよいでしょう。画像を隠して本文を読んでみると、説明が欠けている場所を探す手掛かりになります。ただし、この確認だけで読み上げ操作を含むアクセシビリティー全体を検証したことにはなりません。

まず一つのページで、画像ごとに「これがなくなると何が伝わらないか」を書き出してみてください。入力画面の言葉の伝え方は、項目名・エラー・送信完了の見直し方でも扱っています。