今日は、Webページの作り方に関して、ちょっとした細かい話を。ページに画像を入れるときに、[b]imgタグ[/b]の「[b]文字の色[/b]」をCSSで指定しておきましょう。画像に文字色？ と思ったあなた、ちゃんと理由があるのです。

なぜ画像なのに「文字の色」を指定しなければいけないのでしょうか。それは、画像が表示されない状態では画像のaltテキストが表示されるため、その状態での表示をおかしくない状態にするためです。

念のために説明しておくと、altテキストとは、imgタグで画像の簡単な説明をテキスト記述するものです。HTMLの用語では「alt属性」と呼ばれ、img要素には必ず記述することとされています。altテキストはふつうにブラウザでページを見ているときには関係ありませんが、画像を解釈できない検索エンジンや視覚障害者が使うテキスト読み上げブラウザにとっては、そこに何が示されているのかを理解するのに重要です。

しかし、alt属性が表示されるシチュエーションはほかにもあります。iPhoneやイー・モバイルなどを使ってモバイル環境からウェブにアクセスする人にもaltテキストは関係があります。モバイル環境では通信速度が（オフィスなどに比べると）遅いため、画像の表示をオフにしている場合があるのです。そうすると、画像のあるべき場所にはaltテキストが表示されます。また、画像をオフにしていなくても、通信が遅くて画像が読み込まれるまで時間がかかる場合は、altテキストが表示された状態になります。

そういった状況で、多少なりともaltテキストを読んで理解してもらうためにも、img要素の文字色を設定しておくべきなのです。特に濃い背景に画像だけを置いている場所などでは、altテキストが標準の文字色で表示されると読みづらくなる場合もあるでしょうから、しっかりと文字色を指定しておきましょう（標準では画像のaltテキストは親要素の文字色が使われます）。


続きはこちら