ビジュアルデザインのアクセシビリティ指針
優先度3



解説

画像(GIFやPNG等)の背景に透過色を指定している場合、ユーザーがWebブラウザやCSSの設定によって配色を変更している時に、ユーザーの指定した背景色によっては情報が識別できない等、思わぬ表示状態になる可能性があります。
画像の背景色に透過色を指定する場合は、文字情報を縁取る等、背景色がユーザーによって変更されても情報が得られるようにします。


実例

  • 画像上に重要な文字情報などがある場合、特に必要のある場合を除いて画像の背景に透過色を指定しないようにします。
  • 画像の背景に透過色を指定する場合は、背景色がユーザーによって変更されても情報が得られるよう、文字の周りを透過しないようにします。

この例では、マウスオーバーの際に背景色を変える目的で画像に透過色を指定しています。


画像の例。通常時のリンクボタンのイメージ。
通常の表示

画像の例。マウスオーバーのときのリンクボタンのイメージ。背景に薄い色を引いてボタンがハイライトしていることを示しています。
マウスオーバー時の表示

悪い例

悪い例の画像。背景色が透過されたため、文字と背景が黒となり、文字が判別できません。

背景に黒を指定すると識別できません

良い例

良い例の画像。背景色が透過され、文字と背景が黒となっていますが、文字の周りに白い縁が確保されているため、文字が判別できます。

文字を白く縁取ることで、背景色が変わっても読めるようにしています。

参考(CSSの記述例):

div#login a{
     background-image:url(bg.gif);
     display:block;
}
div#login a:hover{
     background-image:url(bg_active.gif);
     display:block;
}


関連するJISの項目

5.5 c (推奨)




アクセシビリティガイドライン トップ

このページの先頭へ戻る