この記事でわかること

  • 画像の代替テキスト(alt属性)が必要な理由
  • W3Cの判断の手順に沿った、入れるか空にするかの決め方
  • 意味を伝える画像・リンクやボタンの画像・文字の画像・飾りの画像の書き方
  • HTMLでの書き方の例と、つまずきやすいところ

Webデザインで画像を置くとき、alt属性に何を書くか迷うことがあります。何も書かない、ファイル名のままにする、写真を細かく説明する、と人によってばらばらになりがちです。この記事では、画像の役割ごとに代替テキストをどう書くかを、判断の手順とあわせて紹介します。

書き方の決まりは、Webの標準を作っているW3Cの、画像の解説の資料と達成基準の解説をもとにしています。特定のツールやスクールは勧めず、法律で何が求められるかは扱いません。

先に結論: 画像の役割で、書く内容を決める

先に結論を書くと、画像を見て「何が写っているか」ではなく、「このページでその画像が何の役目をしているか」を考え、役目に合わせて代替テキストを書くか、空にします。

画像の役割 altの書き方
意味を伝える 意味を短く
リンク・ボタン 行き先・動作
文字の画像 同じ言葉
飾り 空にする
グラフ・図 本文でも説明

代替テキストとは

WCAGの達成基準1.1.1(レベルA)では、利用者に示す、文字ではないコンテンツには、同じ目的を果たす代替テキストを用意するとしています。また、純粋な飾りや見た目を整えるだけのものは、支援技術が無視できるようにするとしています。

W3Cの画像の解説では、画像には、その画像が表す情報や働きを説明する代替テキストが必要で、それによって、さまざまな障害のある人が画像を利用できるとしています。たとえば、画面の読み上げソフトを使う人には、代替テキストが読み上げられたり、点字で示されたりします。

HTMLでは、img要素のalt属性に代替テキストを書きます。

判断の手順

W3Cは、alt属性をどう使うかを決めるための判断の手順(An alt Decision Tree)を公開しています。上から順に当てはまるかを見ていきます。

  1. 画像に文字が入っているか: 入っていて、同じ文字が近くの本文にもあるなら空にします。入っている文字がそこにしかないなら、その文字を代替テキストに書きます
  2. リンクやボタンに使っているか: その画像が無いとリンクやボタンの働きが分からないなら、行き先や動作を書きます
  3. ページの内容に意味を加えているか: 加えていて、単純な写真や絵なら、その意味を短く書きます。グラフなどの複雑な情報なら、同じ情報をページのほかの場所にも示します
  4. 飾りか、利用者に向けたものではないか: そうなら空にします

W3Cの判断の手順では、この手順ですべての場合を扱えるわけではないとしています。迷うときは、画像の解説の資料全体を見ます。

種類ごとの書き方

意味を伝える画像

写真やイラストで、ページの内容に意味を加えている画像です。W3Cの解説では、代替テキストは見た目に表示されている意味や内容を伝えるもので、多くの場合、見た目をそのまま説明したものではないとしています。

たとえば、手作りのお店のページで商品の写真を置くなら、写真の構図や色を細かく説明するより、「木の棚に並んだ手作りのマグカップ」のように、その写真で伝えたいことを短く書きます。W3Cの解説では、画像を、意味を伝えるものとして扱うか飾りとして扱うかは、その画像をページに入れた理由をもとに、作る人が判断するとしています。

リンクやボタンの画像

リンクやボタンに使っている画像です。W3Cの解説では、代替テキストは画像の見た目ではなく、その画像で始まる動作(画像の目的)を伝えるものだとしています。たとえば、印刷のアイコンなら「プリンター」ではなく「このページを印刷」、虫めがねのアイコンの検索ボタンなら「虫めがね」ではなく「検索」です。

W3Cの解説では、この種類の画像で代替テキストが無かったり空だったりすると、画面の読み上げソフトは画像のファイル名やURLを読み上げることが多く、利用者には何が起きるかが分かりにくいとしています。

文字の画像

見出しや看板の文字を、画像にして置いている場合です。W3Cの解説では、ロゴでなければ画像の中に文字を入れるのは避け、使うときは代替テキストに画像と同じ言葉を書くとしています。

飾りの画像

罫線や背景の模様、本文ですでに説明している内容の写真など、ページの理解に必要な情報を加えない画像です。W3Cの解説では、このような画像には空の代替テキスト(alt="")を付け、画面の読み上げソフトなどの支援技術が無視できるようにするとしています。文字を書くと、読み上げが余計に増えたり、話題が違うと利用者の気が散ったりするためです。

W3Cの解説では、飾りの画像は、できればCSSの背景画像として置くとしています。

グラフや図

グラフや図のように情報が多い画像です。W3Cの解説では、画像が示すデータや情報と同じ内容を、文字でも用意するとしています。altには何のグラフかを短く書き、数値などは本文や表で示します。

HTMLでの書き方の例

架空のお店のページを例に、種類ごとの書き方をまとめます。

<!-- 意味を伝える写真: 伝えたい内容を短く書く -->
<img src="shelf.jpg" alt="木の棚に並んだ手作りのマグカップ">

<!-- リンクになっているロゴ: 行き先を書く -->
<a href="/"><img src="logo.png" alt="トップページ"></a>

<!-- 検索ボタンのアイコン: 動作を書く -->
<button type="submit"><img src="search.svg" alt="検索"></button>

<!-- 飾りの線: 空にする -->
<img src="divider.png" alt="">

ロゴの画像は、それだけでトップページへのリンクになっているなら、行き先を書きます。W3Cの解説では、ロゴの画像に続けてリンクの文字もある場合は、同じことを2回伝えないように空にするとしています。

つまずきやすいところ

  • ファイル名のままにする: 「IMG_0123」のような値は、何も伝えません。役割に合わせて書き直します
  • リンクの画像を空にする: 画像だけのリンクを空にすると、何のリンクか分からなくなります。行き先を書きます
  • 見た目を細かく説明しすぎる: 伝えたい意味を短く書きます。くわしい情報が必要なら本文で示します
  • 本文と同じことを繰り返す: 近くの本文で説明している画像は、飾りとして空にします
  • すべての画像を空にする: 意味を伝える画像まで空にすると、その情報が伝わらなくなります

自分で決めるか、相談するかの判断

迷ったときは、「その画像をページに入れた理由を、自分で説明できるか」で決めます。説明できるなら、その理由をもとに書くか空にするかを決めます。

依頼を受けて作るサイトで、画像に込めた意図が分からないときは、決めつけずに、その画像を用意した人に、何を伝えたい画像かを確かめます。作品集で工夫として書くときの考え方は、未経験からWebデザインのポートフォリオを作る手順で紹介しています。

まとめ

  • 代替テキストは、画像の代わりに、その画像の情報や働きを伝える文字です
  • 意味を伝える画像は意味を短く、リンクやボタンの画像は行き先や動作を書きます
  • 飾りの画像は空(alt="")にし、グラフや図は本文でも内容を示します
  • 迷ったら、その画像をページに入れた理由から考えます

読みやすさのもう1つの基本である文字と背景の明るさの差は、Webデザインで文字と背景のコントラストを確かめる方法で紹介しています。これからWebデザインを学ぶ順番は、未経験からWebデザイナーになるにはが参考になります。