Smart Communication Design Company
ホーム > ナレッジ > Blog > アクセシビリティBlog > 2007年2月 > 装飾およびレイアウト目的の画像の代替テキスト

アクセシビリティBlog

Webサイトのアクセシビリティを高めるための方法や国内外の関連情報など、さまざまな角度からWebアクセシビリティに関する話題をご提供していきたいと思います。

当Blogの更新情報は、Twitter経由でも配信しています。興味のある方はぜひ、@mlca11yをフォローしてください。当Blogへのご意見・ご質問は、Twitter経由でも受け付けております。

2007年2月9日

装飾およびレイアウト目的の画像の代替テキスト

アクセシビリティ・エンジニア 中村

本Blog上でも何度か取り上げておりますが、アクセシビリティ向上のためには画像の代替テキストは必須です。このことについては、JIS X 8341-3やWCAG 1.0、そして策定中のWCAG 2.0の草案でも、それぞれ表現は異なるものの明確に述べられています。例えばJIS X 8341-3の場合、5.4 a)において、以下のように記されています。

画像には、利用者が画像の内容を的確に理解できるようにテキストなどの代替情報を提供しなければならない。

また、HTML 4.01の仕様書でも、img要素のalt属性は必須であることが明記されています。(13.2 Including an image: the IMG element

しかしながら、Webサイト上にはテキストで記述されているものと同等の内容を画像で表現したものや、本来はスタイルシートなどを用いて表現するべきである、内容を伴わない装飾およびレイアウト目的の画像が存在している場合もあります。そのため、前述のガイドラインの本質を理解していないと、それらの画像に対しても、わざわざ「画像」などという代替テキストを付加してしまう、という間違った対応をしてしまいかねません。

意味を持たない画像の代替テキストの記述方法

では、そのような画像にはどのようにalt属性を記述すればよいのか、ということになりますが、JIS X 8341-3やHTML 4.01の仕様書にはこのような場合の代替テキストについての記述方法も記載されています。alt属性値に空を指定する(alt="")、という方法です。(参考:13.8 How to specify alternate text

したがいまして、現在当社でアクセシビリティ検証を行った際には、前述のような意味を持たない画像のalt属性値は基本的に空に指定するようにしております。

ところが、Webアクセシビリティに関するガイドラインや資料の中には、alt属性値に半角スペースや全角スペースを推奨しているものも少なくないようです。これは、いったいどのような理由によるものでしょうか? 今回は日常的にスクリーン・リーダーを使用している辻の協力の下、alt属性値に半角スペースや全角スペースを指定した場合のユーザーエージェントによる変化を下記のような条件で検証し、何故スペースが推奨されるのか、そして実際にはどうするべきなのかを考えてみました。

各条件下における問題点

以下に、意味を持たない画像の代替情報として、それぞれの条件においてどのような問題点があるのかをまとめました。(詳細については、当エントリーの最後にある表をご覧ください。)

alt属性値に空を指定した時の問題点
alt属性値に半角スペースを指定した時の問題点
alt属性値に全角スペースを指定した時の問題点
alt属性を記述しなかった場合の問題点

検証から導き出される結論

上記のまとめからもわかるように、現状ではユーザーエージェントごとの実装に統一性がなく、どの実装方法を選んだとしてもユーザーの環境によっては非常に使いにくいものとなることは避けられません。したがって、仕様に則り、意味を持たない画像のalt属性値は空にすることを基本として、サイトの対象ユーザーが明確である場合には、環境に応じた実装を検討する、というのがよい方法ではないかと考えられます。

最後に、今回検証することができた各環境における結果の一覧を参考までに載せておきます。

リンクではない画像の場合
ユーザーエージェント
/検証項目
1
(空)
2
(半角)
3
(全角)
4
(alt属性なし)
ビジュアルブラウザ
Firefox 2.0(*1 表示なし 表示なし 「 」(*2 表示なし
Internet Explorer 6.0/7.0(*3 height属性とwidth属性によって指定されたサイズで枠と画像アイコンを表示する
ツールチップなし ツールチップに半角スペース ツールチップに全角スペース ツールチップなし
Opera 9.10(*4 表示なし 枠+半角スペース 枠+全角スペース 枠+「画像」
Safari 2.0.4(*5 height属性とwidth属性によって指定されたサイズで枠を表示する
テキストブラウザ
Lynx 表示なし 表示なし 「 」(*2 「[dummy]」
音声ブラウザ
IBM ホームページ・リーダー Windows版 3.01/3.04 読み上げなし 読み上げなし 「 。」(*6 読み上げなし
ボイスサーフィン 3.61 読み上げなし 「 」(*7 「 」(*8 読み上げなし
スクリーン・リーダー
XP Reader 6.0 読み上げなし 読み上げなし 読み上げなし 読み上げなし
JAWS 6.2 日本語版 読み上げなし 読み上げなし 「画像 」(*9 読み上げなし
JAWS 7.1 日本語版+Internet Explorer 6.0 読み上げなし 読み上げなし src属性値(*10 読み上げなし
PC-Talker 2.04 読み上げなし 読み上げなし 読み上げなし 読み上げなし
画像リンクの場合
ユーザーエージェント
/検証項目
5
(空)
6
(半角)
7
(全角)
8
(alt属性なし)
ビジュアルブラウザ
Firefox 2.0(*1 ボーダーのみ(*11 ボーダーのみ(*11 ボーダー+全角スペース ボーダーのみ(*11
Internet Explorer 6.0/7.0(*3 height属性とwidth属性によって指定されたサイズでボーダーと画像アイコンを表示する
ツールチップなし ツールチップに半角スペース ツールチップに全角スペース ツールチップなし
Opera 9.10(*4 表示なし(*12 枠+半角スペース 枠+全角スペース 枠+「画像」
Safari 2.0.4(*5 height属性とwidth属性によって指定されたサイズで枠を表示する
テキストブラウザ
Lynx 表示なし 表示なし 「 」(*13 「[dummy]」
音声ブラウザ
IBM ホームページ・リーダー Windows版 3.01/3.04 読み上げなし 読み上げなし 「 。」(*14 リンク先のファイル名(*15
ボイスサーフィン 3.61 【画像】 「 」(*16 「 」(*17 【画像】
スクリーン・リーダー
XP Reader 6.0 リンク先のURL(*18 読み上げなし 読み上げなし リンク先のURL(*18
JAWS 6.2 日本語版 ファイル名(*19 ファイル名(*19 「画像 」(*9 ファイル名(*19
JAWS 7.1 日本語版+Internet Explorer 6.0 ファイル名(*19 「画像 」(*9 src属性値(*10 ファイル名(*19
PC-Talker 2.04 リンク先のURL(*18 「リンク」 「リンク」 リンク先のURL(*18

ミツエーリンクスでは、WCAG準拠JIS X 8341-3対応をはじめ、さまざまなWebアクセシビリティ関連サービスをご提供しています。是非アクセシビリティのページをご覧いただき、お気軽にお問い合わせください。

Pick Up