アクセシビリティから考える画像のマークアップ

そこが知りたい！Web標準サイトの活かし方（4）

　本連載では、Web標準のメリットを最大限に生かすことをテーマに、仕様書には書かれていない部分を中心に取り上げ、実際のWeb制作現場で起こり得る問題について、解決の糸口をたらしていきたいと思います。連載第4回目となる今回は、「画像の代替テキスト」について扱います。前回の記事で紹介した「構文の妥当性」と「目的の妥当性」の両方の側面からみていくことにしましょう。

はじめに

　本連載では、Web標準のメリットを最大限に生かすことをテーマに、仕様書には書かれていない部分を中心に取り上げ、実際のWeb制作現場で起こり得る問題について、解決の糸口をたらしていきたいと思います。

　連載第4回目となる今回は、「画像の代替テキスト」について扱います。「画像の代替テキスト」は、Webアクセシビリティの指針である「WCAG 2.0（Web Content Accessibility Guidelines 2.0）」や「JISX-8341-3（JIS X 8341-3:2004 高齢者・障害者等配慮設計指針－情報通信における機器、ソフトウェアおよびサービス－第3部：ウェブコンテンツ）」の中でも扱われている基本的な部分です。「画像の代替テキスト」について、前回の記事で紹介した「構文の妥当性」と「目的の妥当性」の両方の側面からみていくことにしましょう。

対象読者

• XHTMLとCSSの基本を理解している方。
• Web標準サイトの実践的な作り方に興味のある方。

必要な環境

• (X)HTMLやCSSを記述するエディタと、それを確認するブラウザがあれば、特別な環境は必要ありません。

画像の代替テキストとは

　画像に代替テキスト（img要素のalt属性値）をつける、というのはWebアクセシビリティを考慮したページ制作において最も基本的なテクニックの一つです。まずは画像のマークアップに関する構文上の注意点や、代替テキストの目的や役割などについて考えてみましょう。

代替テキストの役割と特徴

　「代替テキスト」とは、その名の通り、画像や音声、動画などの非テキストコンテンツが、順当にレンダリングされない場合に、非テキストコンテンツの代わりに用いられるテキストです。

　例えば、テキストブラウザや画像の読み込みを「オフ」に設定した視覚系ブラウザでは、画像をレンダリングするかわりに、「代替テキスト」をレンダリングします。また、音声ブラウザでは「代替テキスト」で指定された内容を音声で読み上げます。

　このように「代替テキスト」は、非テキストコンテンツの代わりとなる情報を、テキストや音声など、ユーザーの知覚できる形で提供することができる、というフレキシブルな特徴を持っています。しかし、代替テキストが指定されていても、その内容が適切でないためにユーザーの理解を妨げてしまうこともあります。さまざまな環境で非テキストコンテンツの代わりとなる情報を伝達するためには、適切な「代替テキスト」を指定することが大切です。

　それでは適切な代替テキストとはどのようなものなのか、非テキストコンテンツの中でも最も基本的だと言える「画像（img要素）」を例に考えてみることにしましょう。

img要素の構文的なルール

　前回の記事で「構文の妥当性」と「目的の妥当性」について説明しましたが、画像（img要素）の扱い方において「構文の妥当性」をパスするのは比較的簡単です。img要素の構文上のルールを簡単にまとめると次のようになります。

• 空要素であるため、HTMLであれば終了タグは不要、XHTMLであれば「/>」または「 />」で閉じる
• インライン要素であるため、ブロックレベル要素内に含める（body要素直下は不可）
• alt属性とsrc属性が「必須」

　上記の3点さえおさえておけば、まずは問題ないと言えるでしょう。

画像（img要素）には、alt属性が必須、属性値は任意

　前項の通り、img要素には「alt属性」が必須ですが、その値として指定する内容については任意（空でもよい）であり、人間の判断に任せられています。後で詳しく述べますが、alt属性の指定をしたうえで、その値を空にし、「alt=""」とするケースも多くあります。alt属性の値については、その画像の役割や目的を考慮し、代替テキストとして適切な内容であるかどうか「目的の妥当性」をよく検討したうえで指定することが大切です。