装飾およびレイアウト目的の画像の代替テキスト
本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属性値に半角スペースや全角スペースを指定した場合のユーザーエージェントによる変化を下記のような条件で検証し、何故スペースが推奨されるのか、そして実際にはどうするべきなのかを考えてみました。
- img要素がa要素の子要素ではない、すなわちリンクではない画像の場合
- 1. alt属性値が空（""）の場合
- 2. alt属性値が半角スペース（" "）の場合
- 3. alt属性値が全角スペース（" "）の場合
- 4. alt属性が記述されていない場合
- img要素がa要素の子要素、いわゆる画像リンクの場合
- 5. alt属性値が空（""）の場合
- 6. alt属性値が半角スペース（" "）の場合
- 7. alt属性値が全角スペース（" "）の場合
- 8. alt属性が記述されていない場合
各条件下における問題点
以下に、意味を持たない画像の代替情報として、それぞれの条件においてどのような問題点があるのかをまとめました。（詳細については、当エントリーの最後にある表をご覧ください。）
alt属性値に空を指定した時の問題点
- 画像リンクの場合、ファイル名やリンク先を読み上げてしまうスクリーン・リーダーがある。
alt属性値に半角スペースを指定した時の問題点
- リンクではない画像の場合、半角スペースのツールチップ、半角スペース分の枠が表示されるビジュアルブラウザがある。
- 画像リンクの場合、ファイル名やリンク先、もしくは「画像」「リンク」などと読み上げてしまうスクリーン・リーダーがある。
alt属性値に全角スペースを指定した時の問題点
- リンクではない画像の場合、全角スペースのツールチップ、全角スペース分の枠が表示されるビジュアルブラウザや、「画像」もしくはsrc属性値を読み上げてしまうスクリーン・リーダーがある。
- 画像リンクの場合、ファイル名やリンク先、もしくは「画像」「リンク」もしくはsrc属性値を読み上げてしまうスクリーン・リーダーがある。
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） |
- 「」で囲まれた部分は表示される、もしくは読み上げられる内容。
- カスタマイズ可能なものについては、極力初期設定を利用した。
- a要素のhref属性値は"../index.html"。
- img要素のsrc属性値は"../images/dummy.gif"、width属性値は"120"、height属性値は"30"。
- 注1：ツール→オプション→画像を自動的に読み込むをチェックをはずす。
- 注2：全角スペースを表示。
- 注3：インターネットオプション→詳細設定→画像を表示するのチェックをはずす。
- 注4：ツール→設定→ウェブページ→画像の表示→画像を表示しないを選択。
- 注5：Safari→環境設定→ページを開く時に画像を表示のチェックをはずす。
- 注6：ホームページ・リーダーはalt属性値を[値。]の形式で読み上げる。結果、全角スペースを無視しない場合、連続読み上げ中に若干の間（Pause）が入る。
- 注7：上下カーソルでは無音の行がひとつできるが、左右カーソルを動かすと「半角スペース」と読み上げる。
- 注8：上下カーソルでは無音の行がひとつできるが、左右カーソルを動かすと「全角スペース」と読み上げる。
- 注9：全角スペースは通常「空白」、半角スペースは通常「スペース」と読み上げられるが、単独で用いた場合は読み上げられない。結果、「画像」とのみ読み上げる。
- 注10：「src="../images/dummy.gif"」と読み上げる。
- 注11：ボーダーのみ表示。
- 注12：見た目には何も表示されていないが、Aキーによる移動でフォーカスが移り、枠が現れる。（リンク先へ遷移可能）
- 注13：全角スペースを表示。（リンク先へ遷移可能）
- 注14：無音のリンクができる。記号の読み上げを行っている場合は[ 。]を女性音で読み上げる。
- 注15：「testSuites/index.html」と読み上げる。（testSuitesは検証ファイルのひとつ上の階層）
- 注16：上下カーソルでは無音の行がひとつできるが、左右カーソルを動かすと女性音（リンク通知用）で「半角スペース」と読み上げる。
- 注17：上下カーソルでは無音の行がひとつできるが、左右カーソルを動かすと女性音（リンク通知用）で「全角スペース」と読み上げる。
- 注18：「http://～」とURLを読み上げる。
- 注19：「images/dummy」と読み上げる。
ミツエーリンクスでは、WCAG準拠やJIS X 8341-3対応をはじめ、さまざまなWebアクセシビリティ関連サービスをご提供しています。是非アクセシビリティのページをご覧いただき、お気軽にお問い合わせください。
Pick Up
アクセシビリティWebサイトのアクセシビリティ対応状況の診断から構築・運用支援まで幅広く対応、障害者差別解消法への対応が気になるかたにも