CodeZine(コードジン)

特集ページ一覧

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

そこが知りたい!Web標準サイトの活かし方(4)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2009/06/10 14:00

目次

装飾のための画像の場合

 リンクテキストの頭に、三角や矢印など、リンクを示すアイコン画像を配置することはよく見られるケースですが、このような画像に対し、「alt="三角"」とするのは妥当ではありません。「alt="リンク"」としてその意図を説明しても、読み上げられた時にやや冗長に感じられますし、代替テキストの役割に反し、ユーザーの理解を妨げることにもなりかねません。このような場合には、「alt=""」というように、alt属性値を空にするのが一般的です。ただし、繰り返しになりますが、どのような画像であっても、alt属性の記述を省略することはできません。きちんとalt属性を指定したうえで、値は空にする(alt="")、というのが構文的に正しい作法です。

[リスト4]悪い例:不要な代替テキストを指定
<img src="arrow.gif" alt="三角" />
[リスト5]悪い例:alt属性がない
<img src="arrow.gif" />
[リスト6]良い例:alt属性値を空にして指定
<img src="arrow.gif" alt="" />

 装飾を目的とした画像の代替テキストについては、alt属性値を空にするのではなく、半角スペースや全角スペースを指定するよう推奨しているガイドラインもありますが、現状ではユーザーエージェントごとの実装に統一性がありません。従って、HTML 4.01の仕様書で示されるように、装飾を目的とした画像のalt属性値は空にすることを基本とし、サイトのターゲットユーザーが使用している主要なユーザーエージェントが明確である場合には、それに応じた実装を検討する、というのが現在考えられるベターな方法です。

リンク画像の場合

 リンクテキストの近くに画像があるようなケースでは、二重読み上げにも気をつけなればいけません。例えば、「サイトマップ」というリンクテキストの先頭に三角アイコンを置き、alt属性値を「サイトマップ」とした場合、属性値を空にするよりも丁寧なように感じられるかもしれません。しかしこれだと、音声ブラウザでは「サイトマップ」という文言が二重に読み上げられてしまいます。リンクテキストと自然に繋がる代替テキストを指定するか、そうした文言が見当たらない場合には、やはり空の値を指定するのが無難だと言えるでしょう。

[リスト7]悪い例:「サイトマップ」が二重に読み上げられる
<a href="sitemap.html><img src="arrow.gif" alt="サイトマップ" />サイトマップ</a>
[リスト8]良い例:alt属性値を空にして二重読み上げに配慮する
<a href="sitemap.html><img src="arrow.gif" alt="" />サイトマップ</a>

 二重読み上げの問題を回避したり、装飾目的のタグを取り除いてクリーンな(X)HTMLを保ったりする目的で、このようなケースでは、CSSを使用して画像を表示するのが一般的です。具体的には、a要素に対し、三角アイコンの画像を背景画像として左に一度だけ表示するよう設定し、さらに、リンクテキストと三角アイコンが重ならないよう、左側にアイコンの幅サイズ分のパディングを設定します。

[リスト9](X)HTMLソース:画像(img要素の)記述は削除する
<a class="arrow" href="sitemap.html">サイトマップ</a>
[リスト10]CSSソース:a要素に対し背景画像とパディングを設定する
a.arrow {
padding-left: 15px; /* 三角アイコンの幅サイズ以上の左パディング */
background: url(img/arrow.gif) no-repeat left; /* 三角アイコンの画像を背景にし、左側に一度だけ表示させる */
}
図3:CSSで三角アイコンを示した例
図3:CSSで三角アイコンを示した例

動作を表す画像の場合

 アクセシビリティに配慮したWebページ制作において、新しいウィンドウを開くことは極力避けるように設計するのが望ましいと言えます。しかし、外部サイトを別のウィンドウで開くよう設計することも多く、このような場合には、クリックするとどうなるのか、あらかじめ挙動を予測できるようにしてあげると親切です。

 次の例では、別ウィンドウを開くことを示すアイコンをリンクテキストの先頭に置き、クリックするとどうなるのか予測できるよう配慮しています。この場合の代替テキストは空ではなく、「新しいウインドウを開きます」などのようにするのが適切です。

図4:クリック時の動作を示すアイコン画像の例
図4:クリック時の動作を示すアイコン画像の例
[リスト11]動作を示すアイコン画像のマークアップ例
<a href="http://...."><img src="new_win.gif" alt="新しいウインドウを開きます" />姉妹サイト「○○へ」</a>

まとめ

 以上、画像の代替テキストを扱う際、判断に迷いやすい部分を中心に取り上げて説明してみました。いずれの場合にも「これが正解」という方法はありませんが、その画像がどのような役割をもって使われているのかを踏まえ、その意図がユーザーに伝わるよう、よく検討したうえで、適切な代替情報を提供することが大切だと思います。



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:そこが知りたい! Web標準サイトの活かし方

もっと読む

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

  • WINGSプロジェクト 宮本麻矢(ミヤモト マヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5