altは説明ではなく代わりだ

一言でいうと

altに何を書くかは、画像が何を描いているかではなく、その画像がこの場所でどんな役割をしているかで決まります。そのため、同じ写真でも、場所によって答えが違います。

なぜ必要なのか

「画像にaltを入れてください」は誰もが知っているルールであり、そのため、たいていは入れています。問題は、何を入れるかです。実務で実際に見かけるものは、次のようなものです。

alt="이미지"
alt="banner_2024_final_v3.png"
alt="빨간 등산 배낭 45리터 제품 상세 페이지 바로가기 클릭"

1つ目は何も伝えず、2つ目はファイル名を読み上げ、3つ目は一覧から選べないほど長いものです。3つとも、「altを入れたか」の検査は通過します。

そして、反対方向の事故のほうが、よく起きます。装飾用の画像に説明を入れてしまい、画面を読み上げている間、意味のない音声が割り込み続けることです。区切り線の画像20個がすべて「線の装飾」と読み上げられるページは、それだけで使えないページになります。

どう動くのか: 判断は場所から決まる

W3Cの画像の決定ツリーは、この判断をいくつかの質問に整理しています。要点だけを移すと、次のようになります。

この画像の役割	altに書くもの
内容を伝える	その内容を短く
リンクやボタンの中にある	画像ではなくそのリンクの目的
隣にすでに同じ説明がある	`alt=""`: 2回読み上げられると邪魔になります
純粋な装飾である	`alt=""`
文字を描いた画像である	その文字そのまま
グラフや図表である	要点1行と、本文に実際の値

ここで、2つを区別する必要があります。

alt属性を省くことと、空のalt=""は別です。属性がないと、スクリーンリーダーは代わりになるものがないと判断して、ファイル名を読み上げます(IMG_20240103.jpg)。空の文字列は「読み上げるものがない」という明示的な宣言なので、静かに読み飛ばされます。装飾画像には、必ず空のaltを書いておきます。

そして、リンクの中の画像が、特によく間違えられます。<a href="/"><img src="logo.svg" alt="회사 로고"></a>(韓国語で「会社ロゴ」を意味する語です)は、「会社ロゴリンク」と読み上げられます。どこへ行くリンクなのかは、どこにも示されません。ここでaltは画像の説明ではなくリンクの名前なので、alt="홈으로"(韓国語で「ホームへ」を意味する語です)が正解です。

figureとfigcaption

figcaptionは、altの代わりではありません。両者は読み手が違います。

alt: 画像が見えない人に、画像の代わりに渡すものです
figcaption: 全員が見る説明です。出典、撮影時点、図の番号です

そのため、両方に同じ文を書くと、スクリーンリーダーのユーザーは同じことを2回聞くことになります。キャプションにすでに内容がすべて書かれているなら、alt=""にしておくほうがよいです。

表は関係を入れる器です

表の読み方は、段落とはまったく違います。スクリーンリーダーは、セルを移動しながら、そのセルがどの行・どの列に属するかを一緒に読み上げます。その結びつきを作るのが、thとscopeです。

<table>
  <caption>월별 매출</caption>
  <thead>
    <tr><th scope="col">월</th><th scope="col">매출</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">1월</th><td>1,200</td></tr>
  </tbody>
</table>

scopeがあると、「1月、売上、1200」のように読み上げられます。ないと、数字だけがだらだらと読み上げられ、10列の表では、今見ている数字が何なのかを知る方法がありません。W3Cの表のチュートリアルは、見出しセルが2段になった複雑な表まで扱っています。そのような表では、headersとidで、セルごとに結びつきを書きます。

captionは表のタイトルです。ページに表が複数あるとき、一覧でざっと見て選べるようにします。

レイアウトのために表を使いません。行と列という関係を宣言しておきながら、実際には関係がないと、スクリーンリーダーが存在しない構造を読み上げてしまいます。

現場での姿

自動検査ツールは、altがあるかないかは完璧に検出しますが、内容が合っているかは判断できません。そのため、alt="이미지"(韓国語で「画像」を意味する語です)は、すべてのツールを通過します。この判断は人がする必要があり、人がする必要のある判断は、作る瞬間にするのが最も安くつきます。

実務で最も効果が高かったのは、ルールを増やすことではなく、質問を1つに絞ることでした。

この画像が表示されなかったら、その場所にどんな文字があるべきか。

この質問は、装飾なら「何も」という答えが自然に出て、リンクの中なら「どこへ行くか」が出てきます。画像を描写しようとする衝動も、自然に抑えられます。

また、コンテンツ管理システムを使うなら、アップロード画面でaltを空にできるようにしつつ、「装飾です」のチェックボックスを一緒に置くことが効果的でした。必須入力にして塞いでしまうと、人はスペースを1つ入れて通り過ぎます。

次のクイズで確認すること

同じ画像が場所によってどう変わるのか、alt=""と属性の欠落の違い、figcaptionとの役割分担、そして、表でscopeが果たす役割を確認します。