ホームページ制作栃木

画像を表示させるimg要素には、「alt属性」を記述する必要があります。 alt属性に文字を記述しておけば、その画像が表示されなかった場合に、画像の代わりにその文字が表示されます。

何らかの原因で画像が表示されなかった場合や、読み上げソフトによる閲覧に対応するためにも、このalt属性は必須です。このことは、アクセシビリティの基本なので、ご存じの方々も多いでしょう。

しかし、alt属性に文字を指定するだけでは、十分だとは言えない場合があります。 alt属性で指定した代替文字に対しても、実は文字色の指定が重要です。
代替文字の色が黒色で、背景色が灰色だと見えにくいですね。もし、背景色が黒色だったら、代替文字はまったく見えません。これでは、代替文字の意味がありませんね。

代替文字に色が付いている場合は、背景色が白色でなくても代替文字がハッキリ読めます。

このように、代替文字に対しても文字色を指定しておくことが重要です。特に、濃い背景色を使っている場合には必ず指定する必要があるでしょう。

代替文字に色を付ける方法は、普通に文字色を指定する方法と同じです。
「画像が表示されない場合の表示確認」というのは、なかなか忘れがちです。背景色に濃い色を使っている場合は、せっかく指定してある代替文字が無駄になっているかも知れません。ぜひ、お気を付け下さい。