コーディングメソドロジー

第130回 もう悩まない! alt 属性を設定するコツ

alt属性とは、htmlのimg要素に記載される「画像の代替テキスト」のことです。alt属性が正しく設定されていれば、何かのトラブルで画像が表示されなくてもalt属性に設定した代替テキストが表示されます。また、視覚障害の方が音声読み上げソフトを用いてサイトを閲覧する際も、画像部分はテキストで読まれるため、サイトの情報を漏らさず伝えることができます。
このように、実は重要な役割を持ったalt属性ですが、コーディングをしていると、どのような言葉を設定しようか意外と悩んでしまいます。今回は、その悩みを少しでも減らすため、alt属性を設定するコツをご紹介します。

1.「意味のある画像」か「装飾画像」かをチェック!

まず、使用する画像が「意味のある画像」か「装飾画像」かを考えてみます。この時、画像がなくてもサイトの内容が伝わるかどうかを基準にすると、どっちなのかが判断しやすくなります。

【CASE1-1】

【CASE1-1】「以下の物をご準備ください。」とある場合
画像を消すと、何を準備すれば良いのかがわかりません。
→「意味のある画像」と判断します。

【CASE2-1】

【CASE2-1】「ぜひ皆さんもガーデニングを楽しんでみてください。」とある場合
画像を消しても、問題なく伝えることができます。
→「装飾画像」と判断します。

2.「意味のある画像」はaltに代替テキストを!「装飾画像」はaltを空に!

「意味のある画像」か「装飾画像」かを判断できたら、早速alt属性の出番です。「意味のある画像」は、画像が消えても情報が伝わるよう、alt属性に代替テキストを設定します(CASE1-2)。「装飾画像」は、画像が消えてもサイトの情報は伝わるため、alt属性を空にします(CASE2-2)。

【CASE1-2】

【CASE1-2】
「alt="スコップとガーデンフォーク"」と代替テキストを設定しているため、必要な情報は伝わります。

【CASE2-2】

【CASE2-2】
「alt=""」と空にしているため、代替テキストは表示されませんが、必要な情報は伝わります。

3.こんな時はどうしよう?

alt属性のコツが分かったところで、実際に現場で悩みやすいものをいくつかご紹介したいと思います。

Q. 地図の画像は、「意味のある画像」だけどaltはどうしたらいいの?

A. ベストなのは、altに道順の説明を設定することです。
ただし、文字数が多くなると、SEOでスパムと判断されてしまう場合もあるため、画像のaltは空にして、デバイステキストで書いた道順を隣接させるのがオススメです。

Q. このアイコンはどうする?

Q. このアイコンはどうする?

A.
①は画像を消すと、メニューを開くボタンの存在がわからなくなってしまうため、「意味のある画像」です。そのため、「alt="メニューを開く"」と設定します。
②は画像を消すと、別ウィンドウで表示されることがわからなくなってしまうため、「意味のある画像」です。そのため、「alt="別ウィンドウで開く"」と設定します。
③は画像を消しても、「投稿者で探す」というテキストが表示されており、意味が伝わるため、「装飾画像」です。altは空にします。

alt属性を正しく設定すると、サイトが分かりやすくなり、アクセシビリティ対応やSEO対策にもなります。「意味のある画像」か「装飾画像」かという判断は、htmlにimg要素で書くか、cssにbackground-imageで書くか決める際にも役に立つと思うので、ぜひ参考にしてみてください。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム