SMBC三井住友銀行トップ > アクセシビリティ > ガイドライン > ビジュアルデザインのアクセシビリティ指針 > 項目51
画像(GIFやPNG等)の背景に透過色を指定している場合、ユーザーがWebブラウザやCSSの設定によって配色を変更している時に、ユーザーの指定した背景色によっては情報が識別できない等、思わぬ表示状態になる可能性があります。
画像の背景色に透過色を指定する場合は、文字情報を縁取る等、背景色がユーザーによって変更されても情報が得られるようにします。
この例では、マウスオーバーの際に背景色を変える目的で画像に透過色を指定しています。
通常の表示
マウスオーバー時の表示
背景に黒を指定すると識別できません
文字を白く縁取ることで、背景色が変わっても読めるようにしています。
div#login a{
background-image:url(bg.gif);
display:block;
}
div#login a:hover{
background-image:url(bg_active.gif);
display:block;
}
5.5 c (推奨)