はじめに

本シリーズで解説する「代替（だいたい）テキスト」とは、画像を代替するテキストのことを指します。HTMLでいうところのimg要素のalt属性値です。

<img src="画像ファイルへのパス" alt="代替テキスト">

この代替テキストは単なる画像の説明というわけではありません。代替テキストが適切に指定されていると、さまざまな場面で役に立ちます。

インターネット回線が遅い、またはオフラインなどで、画像が読み込めない場合には、その代替テキストが画面に表示されます。

画面が見られない・見えづらい場合に、スクリーンリーダーを使うことで、画面上にある画像の代替テキストを音声としてスピーカーなどに出力することや、点字として点字ディスプレイに出力もできます。

さらに、HTMLだけでなく、TwitterやSlack、PDF（Acrobat）、Word・Excel・PowerPoint（Pages・Numbers・Keynote）、EPUB、メールといったさまざまなサービス・アプリケーションにおいても、画像の代替テキストを指定・表示できます。良い代替テキストを指定できるようになれば、あなたが提供する情報が、今よりも多くの人に、正しく届くようになります。

本シリーズでは、代替テキストの指定方法、代替テキストの表示のされ方、代替テキストは誰がどのように考えれば良いのか、さまざまな画像に対する代替テキストの具体的な例といった、代替テキストに注目して詳しく解説します。本シリーズを通して、代替テキストについての理解がより深まると幸いです。

代替テキストの指定方法

まず、基本的な代替テキストの指定の仕方についておさらいしておきましょう。代替テキストは、img要素であればalt属性に、svg要素であればtitle要素に記述します。

img要素の代替テキスト

img要素における代替テキストは、alt属性に指定します。

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

img要素のalt属性は、リンク切れやネットワークエラー、コンテンツのブロックなどの理由で画像が読み込めなかった場合に、その代わりとしてalt属性値が表示されます。またブラウザでページに表示されている画像を選択してコピーすると、alt属性値がコピーされるといった機能もあります。

alt属性値に空文字列を指定（alt=""）すると、画像が読み込めなかった場合に、何かテキストが表示されるようなことはありません。スクリーンリーダーなどの支援技術は、その画像があることを認識できなくなります。alt属性値を空にして良いのは、基本的には画像がなくとも文意が変わらないような場合です。

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

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

<img src="path/to/file.jpg" alt="altの値" title="titleの値">

<img src="path/to/file.jpg" aria-label="aria-labelの値">

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

img要素相当の要素とは

画像のような表現をしたいが、img要素やsvg要素では表すことが難しい場合があります。たとえばアスキーアートであれば、次のようにカッコや中黒などを使用して笑っている顔を表現したとしても、そのままでは「カッコ・中黒・ターンエー・中黒・カッコ」というただの文字列でしかありません。

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

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

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

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

画像として認識

まず、画像として認識させる必要があります。そのためには、role="img"を指定します。role属性は、WAI-ARIAで定義されている属性で、そのコンテンツの役割を定義できます。WAI-ARIAについては「[role属性、aria属性の基礎知識 | WAI-ARIAを活用したフロントエンド実装」で詳しく解説されています。

<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>

aria-label属性と似た名前の属性で、aria-labelledby属性というものがあります。これはlabel要素に対するfor属性のようなものです。使用方法については後述します。

svg要素の代替テキスト

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

<svg>
    <title>ここに画像の代替テキストを記載する</title>
</svg>

ブラウザや支援技術（スクリーンリーダーなど）の種類やバージョンによっては、SVGに対応していないため、画像として認識させるためにrole="img"が必要になります。

<svg role="img">
    <title>ここに画像の代替テキストを記載する</title>
</svg>

古い支援技術ではSVGのtitle要素の内容を代替テキストとして扱えないことがあります。より多くの環境に対応するためには、さらに工夫が必要です。まずtitle要素にid属性を指定します。そしてsvg要素自体にaria-labelledby属性を指定し、その値にtitle要素のid属性値を指定します。

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

このようにすることで、より多くの環境に情報を伝えられるようになります。

area要素の代替テキスト

alt属性が使用できるのはimg要素だけではありません。area要素でも使用できます。area要素はmap要素の子要素として利用し、イメージマップ*の中でクリック可能な領域をあらかじめ定義するものです。area要素でalt属性を指定する例を見てみましょう。

次の画像には、赤い丸、青い正方形、黄色い正三角形が横並びで描かれています。map要素とarea要素を使用して、1つの画像の中にある3つの図形それぞれにリンクを指定します。丸には丸いリンク範囲を、正方形には正方形のリンク範囲を、三角形には三角形のリンク範囲を、といったように、それぞれの図形に沿ったリンクを指定できます。

<map name="image-map">
  <area shape="circle" coords="60,60,50" alt="赤い丸" href="#circle">
  <area shape="rect" coords="120,10,220,110" alt="青い正方形" href="#rectangle">
  <area shape="poly" coords="288,10,230,110,345,110,288,10" alt="黄色い正三角形" href="#triangle">
</map>
<img usemap="#image-map" width="354" alt="画像：赤い丸、青い正方形、黄色い正三角形が横並びになっている" src="./circle-square-triangle.png">

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

macOSのVoiceOverで、順にリンクされたものにフォーカスを移動したとき、それぞれを次のように読み上げます。

1. リンク、赤い丸、画像：赤い丸、青い正方形、黄色い正三角形が横並びになっている、グループ
2. リンク、青い正方形
3. リンク、黄色い正三角形

このように、画像が表示されないときは、img要素のalt属性値が代わりに表示されます。

ここまでのまとめ

今回は、代替テキストの基本的な指定方法について解説しました。次回は、さまざまな環境における代替テキストの表示のされ方について解説します。