画像の代替テキスト

飾りのうず巻きも売上のグラフも img 要素を使いますが、正しい代替テキストは、前者では空文字列、後者では完全な文です。

代替テキストは何のためにあるか

スクリーンリーダーはページを音声や点字に変えます。画像に来ても画素を見ることはできないので、代わりに alt 属性を読みます。画像が読みこめなかったときにも同じテキストが表示され、検索エンジンやテキストだけのブラウザーが受け取るのもこのテキストです。WCAG 2.2はこれをいちばん最初に置いています。レベルAの達成基準1.1.1「非テキストコンテンツ」は、情報を伝える画像、アイコン、グラフにはすべて、同じ目的を果たすテキストの代替を求めています。

大事なのは「同じ目的」という言葉です。代替テキストはキャプションではなく、写っているものすべての一覧でもありません。目の見える読み手がその場所の画像から何を受け取るかを考え、それを書きます。パン屋のトップページにあるパンの写真なら「スライスしたサワードウのパン」だけで足りるかもしれません。同じ写真でも皮の色についての記事なら「黒に近い濃い色の皮と、気泡の多い中身のサワードウのパン」が必要かもしれません。同じファイルでも、役割がちがえばテキストもちがいます。

よくある4つの場合

W3Cの画像のチュートリアルは、ほとんどの画像をいくつかの種類に分けています。写真やかんたんな図のような情報を伝える画像には、写っているものの短い説明を付けます。区切り線や背景の模様のような装飾の画像には空の alt を付け、alt="" と書きます。これで支援技術はその画像を飛ばします。トップページへのリンクになっているロゴや、検索を実行する虫眼鏡のような機能を持つ画像には、何が起こるかを伝えるテキストを付けます。「ロゴ」や「虫眼鏡」ではなく、「Corner Bakery home」や「検索」です。文字の画像には、画像の中の言葉を付けます。

属性を書かないことと、空にすることは同じではありません。alt がまったくないと、スクリーンリーダーによってはファイル名を読み上げてしまい、聞いている人には「IMG アンダースコア 4032 ドット jpeg」のように聞こえることがあります。空の alt は「ここには見るものはない」と伝える意図的な選択です。複雑なグラフでは alt を短くし（「月ごとの売上の棒グラフ。下に説明あり」）、数値はそばの表や段落に書いて、だれもが読めるようにします。

img 要素ではない画像

画像はインラインのSVGや、CSSの背景画像として入ることもあります。CSSの背景には代替テキストを書く場所がまったくないので、装飾だけに使います。意味を伝えるものはHTMLに書きます。純粋に装飾のインライン svg は aria-hidden="true" で隠せます。これはユニット6で説明します。WCAGは代替テキストの文字数を決めていませんが、W3Cのチュートリアルは何度も同じ助言をしています。短く、この文脈で大事なことを伝えましょう。3文も書いているなら、その内容はたぶん、だれもが読めるページの本文に書くべきものです。

特別なソフトがなくても、自分のページを確かめることができます。ページのソースを表示して <img を検索しましょう。見つかったものにはすべて、空でもそうでなくても alt 属性があるはずです。主なブラウザーの開発者ツールには、各画像に最終的に付く名前を表示するアクセシビリティパネルもあります。その名前を文脈から切り離して続けて読むのはよい確かめ方です。一覧が「画像、画像、グラフ、ロゴ」なら、スクリーンリーダーの利用者にもまさにそう聞こえます。