東京北青山、大阪四ツ橋発、WEBディレクターのブログ

readout! ~試行錯誤を出力する記録~コーディング

readout! ~試行錯誤を出力する記録~,コーディング

alt属性のベストプラクティス

「alt属性のベストプラクティス」なんて大げさでカッコつけたタイトルにしましたが、
最近コーディングをする時にalt属性をどうするか悩む機会が増えてきたので、メモがてらのエントリーです。

どうするか悩む というのは、alt属性を入れるか入れないか悩む という事ではもちろんありません。
alt属性は必須属性なので、なんの意味のない装飾だけが目的の画像にも

<img src="○○○.jpg" width="100" height="50" alt="" />

上記のような感じで、値を空にしておくのがいいと思います。
今回言いたかったことは、画像の中にある文字を"そのまま"入れるのかどうか という事です。

例1 「当社が選ばれる5つの理由」みたいな時

例その1「当社が選ばれる5つの理由」みたいな時のスライス例

よくあるこんな感じのコンテンツをスライスすると、だいたい上記のようになると思うのですが、
「当社が選ばれる5つの理由」の部分はそのままでもいいとして、問題は「REASON 01」の部分です。

alt属性にそのまま「REASON 01」と書いても間違いではないのですが、このalt属性が画像の代わりになるテキスト情報と考えた際に、ベストかどうかはちょっと考え物ではないかな と思いました。

「REASON 01」部分のalt属性記述例

例えばこのように「インクローバーが選ばれる理由 その1」と入力しておくと、実際に画像が非表示の時や音声ブラウザで読み上げられた時、より分かりやすく伝える事ができるのではないかと思います。
だからといって、「REASON 02」の箇所は当たり前のように「インクローバーが選ばれる理由 その2」と、
5つ全てにインクローバーの... と入れてしまうと、それはそれで読み手にとってはストレスになってしまうかもしれません。
01だけはしっかりと入力し、02の時は「その2」だけにしておく等、ケースバイケースの判断が必要です。

例2 お問い合わせの箇所

最後にもう1つ、かなりよくある例を挙げておきます。

例その2「お問い合わせコーナー」のスライス例

各ページのフッター付近とかによくある「お問い合わせコーナー」的な部分ですが、 皆さんなら電話番号部分のalt属性はどのように入力されるでしょうか。

電話番号部分のalt属性記述例

私の場合、最近は上図の下部のように書くようにしています。
どれが正しい、正しくない という事ではありませんが、デザインデータの画像に書いているから、そのままaltに書くのではなく、ページの流れやコンテンツ内容によって、適切な内容を入力していければ と思っています。