img 要素の alt 属性の入れかた
ウェブページに画像を配置する際、「<img> 要素には alt 属性を入れること」という話は、サイト制作や運営に携わる方なら一度は聞いたことがあると思います。ところが、実際にどう alt 属性を記述したらよいのか、わからないという方も多いのではないでしょうか。私自身、企業様向けにサイト制作ガイドラインの策定やアクセシビリティのコンサルティングを行う機会が多いのですが、ウェブマスターさんや制作会社の方から「画像の alt の書きかたの具体的な指南がほしい」というご要望をいただくことがよくあります。
ここで今一度、<img> 要素の alt 属性の意味について確認しておきましょう。alt とは、画像の代替テキスト (alternative text) を意味します。何らかの事情で画像が見られない場合に、画像の視覚的表示の代替として「何の画像なのか」をユーザーに伝える役割を担うものです。たとえば、目が見えないユーザーがスクリーンリーダーによる音声読み上げを介してコンテンツを利用する場合に、この代替テキストがあることによって、画像の内容を理解することができます。
これを踏まえて、<img> 要素の alt 属性の具体的な入れかたを整理したのが以下になります。一口に「画像」と言っても様々な性質のものがあるので、丁寧に場合分けをして考えることが大事です。
- 画像 (
<img>要素) には、必ずalt属性を付けます。alt属性そのものを省いてしまうと、スクリーンリーダーが当該画像について音声で読み上げる際に、ファイル名 (多くの場合、長かったり意味不明な文字列だったりする) が読み上げられてしまうといった問題が生じます。 alt属性には基本的に、その画像が意味するところや、コンテンツの文脈に沿って画像が伝えたい情報を、簡潔に記述します。- たとえば「その画像について、電話で相手に簡単に説明する」ような感じで、テキスト化してみるのも一考です。
- 画像がリンクやボタンとして機能する場合、
alt属性にはリンク先、または実行されるアクションを示す内容を記述します。 - 画像が特定の意味を持つ (たとえばアイコン単体で何らかの意味を伝える) 場合、
alt属性にはその意味を記述します。 - 文字画像である場合は、その画像に含まれる文字列をそのまま
alt属性に記述します。 - 画像がただのアイキャッチャーである場合 (たとえばアイコンやサムネイルなどで、隣接するテキストに具体的な内容が書いてある場合)、スクリーンリーダーによる読み上げの重複を避けるために
alt=""(属性値なし) と記述します。 - 画像が装飾以上の役割を持たない (たとえばビジュアルデザインのための部品で、それ自体に情報が含まれない) 場合、
alt=""(属性値なし) と記述します。 - グラフや図表など、複雑な情報を示す画像の場合は、簡潔な要約が可能であれば、その要約を
alt属性に記述します。難しければ「何についてのグラフ / 図表なのか」を記述します。いずれにしても、グラフや図表の詳細情報は構造化されたテキスト (たとえばデータテーブルなど) でも提供されることが望ましく、その際はalt属性に「詳細は後述」などと付記したり、あるいは画像と紐づいた<figcaption>要素で詳細情報へのリンクを設けたりすると、なおよいでしょう。
以上、画像の代替テキストの具体的な指南として参考になれば幸いです。W3C の公式ドキュメントでも、WAI (Web Accessibility Initiative : ウェブアクセシビリティに関する仕様を検討する部会) がまとめた「alt ディシジョンツリー」という決定木が公開されていますので、こちらも併せてご参照いただくとよいかと思います。