《メディアコンテンツの伝え方 Vol.4》代替テキストを指定する

今回は、基本的な代替テキストの指定方法について、次の4パターンを解説します。

• img要素の代替テキスト
• svg要素の代替テキスト
• area要素の代替テキスト
• アスキーアートなど「画像のようなもの」の代替テキスト

img要素の代替テキスト

これまでの連載でも触れていますが、img要素における代替テキストは、alt属性に指定します。

<img src="path/to/file.jpg" alt="ここに画像の代替テキストを記載する">

img要素のalt属性値は、リンク切れやネットワークエラー、コンテンツのブロックなどの理由で画像が読み込めなかった場合に、その代わりとして表示されます（参考：《メディアコンテンツの伝え方 Vol.2》Webサイトやアプリにおける画像の代替テキスト）。あまり知られていないかもしれませんが、Webページに表示されている画像を選択してコピーすると、alt属性値が自動的にコピーされる、といった機能もあります。

alt属性値に空文字列を指定（alt=””）すると、画像が読み込めなかった場合には何も表示されません。alt属性値を空にしてよいのは、基本的には装飾的な画像のように、その画像がなくとも文意が変わらないような場合に限ります。

また、alt属性そのものを省略できる場合もありますが、いくつかの条件があるため、省略する場合は注意が必要です。詳しくは、コンテンツが未知である画像 | 4.8.4.4.11 コンテンツのキーパート | HTML Living Standard を参照してください。

svg要素の代替テキスト

svg要素の代替テキストは、SVGのtitle要素やdesc要素を使用します。img要素のalt属性と違い、title要素やdesc要素で指定された代替テキストは、画像が読み込めない場合などに画面に表示されることはないので注意が必要です。

• ベストプラクティス | HTML 内の SVG 入門 | MDN

ブラウザや支援技術の種類・バージョンによっては、SVGに対応していないため、画像として認識させるためにrole=”img”が必要になります。role属性は、WAI-ARIAで定義されている属性で、そのコンテンツの役割を定義でき、その属性値imgは画像の役割を意味します。

• WAI-ARIA の基本 | MDN

古い支援技術では、SVGのtitle要素の内容を代替テキストとして扱えないことがあります。より多くの環境に対応するためには、もうひと手間が必要です。

<svg role="img" aria-labelledby="my-cool-img">
  <!-- 省略 -->
  <title id="my-cool-img">ここに画像の代替テキストを記載する</title>
  <!-- 省略 -->
</svg>

上記のコードでは、title要素のテキストに代替テキスト「ここに画像の代替テキストを記載する」を指定します。次に、そのtitle要素のid属性にmy-cool-imgを指定し、svg要素のaria-labelledby属性にそのmy-cool-imgを指定するということになります。こうすることで、svg要素の代替テキストがより多くの環境で認識できます。

• ARIA: img ロール | MDN
• aria-labelledby | MDN

svg要素に代替テキストが必要なときは、上記のような工程を踏む必要があることを覚えておいてください。

area要素の代替テキスト

area要素はmap要素の子要素として利用し、イメージマップ（クリッカブルマップ）を定義するものです。

1つの画像に対して、map要素でイメージマップを定義し、その子要素であるarea要素でイメージマップの中のクリック可能な領域を指定します。

• <map>: イメージマップ要素 | MDN
• <aera>:イメージマップ領域要素 | MDN

その名の通り画像を扱うものですから、使用するimg要素には代替テキストが必要です。さらに、その中のリンクとなるarea要素にも代替テキストを指定します。ここでは、area要素で代替テキストを指定する例を見ていきましょう。

次の画像には、赤い丸、青い正方形、黄色い正三角形が横並びで描かれています。この画像に対して、map要素とarea要素を使用してイメージマップを定義して、1つの画像の中にある3つの図形それぞれにリンクを指定します。

イメージマップのためのHTMLでは、map要素・area要素・img要素を使います。map要素はimg要素との紐づけを行い、area要素では、それぞれの図形に沿った形やリンク範囲の描画位置の指定します。

img要素のalt属性値には、イメージマップで使う画像についての代替テキストを指定します。もし画像が表示されない場合には、このalt属性値が画像の代わりに出ることになります。

<map name="image-map">
  <!-- 赤い丸: 中心(60,60)、半径50 -->
  <area shape="circle" coords="60,60,50" alt="赤い丸" href="https://example.com/#circle">
  <!-- 青い正方形: 左上(120,10)、右下(220,110) -->
  <area shape="rect" coords="120,10,220,110" alt="青い正方形" href="https://example.com/#rectangle">
  <!-- 黄色い正三角形: 頂点(288,10)、(230,110)、(345,110) -->
  <area shape="poly" coords="288,10,230,110,345,110,288,10" alt="黄色い正三角形"   href="https://example.com/#triangle">
</map>
<img usemap="#image-map" width="354" alt="画像：赤い丸、青い正方形、黄色い正三角形が横並びになっている" src="./circle-square-triangle.png">

area要素におけるalt属性は、href属性が指定されているときのみ必要です。要はリンクのテキストを指定するようなものです。

これをブラウザで表示し、macOSに標準搭載されているスクリーンリーダー「VoiceOver」で、各リンクを順にフォーカスしていったとき、それぞれは次のように読み上げられます。

最初にフォーカスした赤い丸のリンクは「リンク、赤い丸、画像：赤い丸、青い正方形、黄色い正三角形が横並びになっている、グループ」と読み上げられます。これはリンクのテキスト（alt=”赤い丸”）と、map要素が参照しているimg要素のalt属性値（画像：赤い丸、青い〜）を読み上げています。

次の青い正方形は「リンク、青い正方形」。

最後の黄色い正三角形は「リンク、黄色い正三角形」と読み上げられます。

area要素のalt属性値を指定しなかった場合は、href属性が読み上げられます。

URLを一文字ずつ読み上げられても読者にとってはあまり役立たないため、リンク先を示すテキストをarea要素のalt属性に指定しましょう。

img要素相当の要素での代替テキスト

画像のような表現をしたい一方で、img要素やsvg要素では表すことが難しい場合があります。

たとえばアスキーアートでは、下記のようにカッコや中黒などを使用して笑っている顔を表現したとしても、そのままでは支援技術を使っている利用者からすれば「カッコ・中黒・ターンエー・中黒・カッコ」というただの文字列でしかありません。

<span>(・∀・)</span>

ほかにも、星のマーク数で評価を表すことを想定したものであれば、HTML上で、黒い星と白い星を並べることがあります。これもアスキーアート同様に、そのままでは「黒星・黒星・黒星・黒星・白星」というただ文字が並んだだけの意味しかありません。

<span>
  <span>★</span>
  <span>★</span>
  <span>★</span>
  <span>★</span>
  <span>☆</span>
</span>

これらのように、img要素以外で画像相当の表現をしたい場合には、いくつか手順を踏む必要があります。

画像として認識させる

まず、画像として認識させる必要があります。そのためには、role=”img”を指定します。

<span role="img">(・∀・)</span>

<span role="img">
  <span>★</span>
  <span>★</span>
  <span>★</span>
  <span>★</span>
  <span>☆</span>
</span>

代替テキストの指定

画層として認識させたうえで、代替テキストを指定するためには、aria-label属性を用います。aria-label属性は、画像に限らず、代替テキストや読み上げに適切なテキストを指定するための属性です。

<span role="img" aria-label="アスキーアート：笑っている顔">(・∀・)</span>

<span role="img" aria-label="評価：星5のうち星4つ">
  <span>★</span>
  <span>★</span>
  <span>★</span>
  <span>★</span>
  <span>☆</span>
</span>

こうすることで、テキストを使って図示したものに画像としての意味を持たせたり代替テキストを指定できます。

ここまでのまとめ

今回は、img要素・svg要素・area要素といった各要素に対しての代替テキストと、アスキーアートなど「画像のようなもの」の代替テキストの指定方法ついて解説しました。

img要素やsvg要素は画像であるため、代替テキストが必要になることはわかります。一方で、area要素やテキストを使った画像（のようなもの）に対しても代替テキストが必要になるということは、盲点になりがちなポイントです。

本連載では、ここまで「代替テキストとはなんぞや」という部分を中心に解説してきました。そのため、「代替テキストが必要なのはわかったけど、実際にどういうテキストを書けばいいのかわからない！」という方はまだまだ多くいると思います。その疑問に答えるべく、次回からは代替テキストの考え方、代替テキスト以外のアプローチ、そしてAIを活用する方法を紹介していきます。

• 《Vol.1》 その画像、ちゃんと伝わっている？　コンテンツ運用におけるアクセシビリティの考え方
• 《Vol.2》 Webサイトやアプリにおける画像の代替テキスト
• 《Vol.3》 Web以外での画像の代替テキスト

執筆