みなさん、ウェブサイトで画像を載せるときに代替テキストを設定していますか？
ウェブアクセシビリティを高めるためには代替テキストの設定が必須です。
だからといってやみくもに設定してしまうと、かえって分かりづらいサイトになってしまうかも・・・。
代替テキストは、適切に設定することがとても大切なのです！
この記事では、代替テキストの適切な設定方法についてご紹介します。
- とりあえず全部の画像に設定している
- 一応ちゃんと設定しているけど、合っているか不安
こんな方は、この記事で一緒に学んでいきましょう！
代替テキストを適切に設定するメリット
代替テキストとは、ウェブサイト上の画像が表示されないときや、音声読み上げ機能を使用したときに画像の代わりに情報を提供するテキストのことです。
画像を確認できない状況でも画像に含まれる情報を得ることができ、視覚障がいを持つ人や通信状況が悪く画像を表示することができない人をはじめ、様々な人にとって大切な情報源となります。
適切な内容を設定することで、ウェブアクセシビリティを高めることができます。
また、適切な代替テキスト設定はSEO対策としても有効です。
検索エンジンは画像の内容を完全に理解することができないため、代わりに代替テキストから画像の内容を把握します。
代替テキストが適切に設定されている場合、検索エンジンに有効なコンテンツだと判断されやすくなるためSEO対策に繋がるのです。
ウェブアクセシビリティ対応のホームページ制作が得意です
代替テキストを適切に設定するためのポイント
適切に設定するためのポイントはたくさんあるのですが、その中から重要なものを3点ご紹介します。
代替テキストは簡潔にする
代替テキストはあまり長くならない方が良いと言われています。
なぜなら、長すぎるとテキストリーダーなどで読み上げたときに内容が伝わりづらくなってしまうからです。
具体的な字数制限があるわけではありませんが、できるだけ短く簡潔に設定することをおすすめします。
全ての画像に意味のある代替テキストを設定しない
ウェブサイトでは、背景や装飾として画像を使用することがあります。
この場合は、画像に意味のある代替テキストを設定しない方が使い勝手を良くすることができます。
具体的な例を見てみましょう。
チャコウェブ公式ホームページでは、サービスのプラン内容を紹介する部分にアイコンを使用しています。
文字だけだと分かりづらかったり寂しかったりするため、デザイン、装飾として画像を置いています。
このアイコンはまさに「装飾目的の画像」と言えるでしょう。
この場合、伝えたい重要な情報はテキストで、画像自体ではありません。
視覚で確認する場合、重要な情報の横にアイコンがあったとしても適度であれば邪魔にはなりません。
むしろ、直感的に分かりやすくしたり、メリハリを付けたりすることができます。
では、これを音声で確認する場合はどうでしょう。
テキストリーダーで実際に読み上げた結果が以下です。
テキストリーダーのユーザーでない人からすると、見出しの読み上げなど慣れない部分があるかと思います。
ですが、それでもアイコン画像に設定した意味のあるテキストを邪魔に感じてしまう人が多いのではないでしょうか？
このように、装飾目的で使用されている画像に意味のある代替テキストを設定してしまうと、反対に情報が伝わりづらくなってしまうことがあります。
装飾目的の背景画像やアイコン画像などは、意味のある代替テキストを設定しない方が良いのです。
意味のあるテキストを設定しない場合、必ず空のalt属性を設定する
上記で、意味のある代替テキストを設定しない方が良い場合の解説をしました。
では、意味のあるテキストを設定しない場合、代替テキストの設定はどうすれば良いのでしょうか？
正解は「空の代替テキストを設定する」です。
空の代替テキストを設定する理由は、代替テキストを全く設定していない場合テキストリーダーの種類によって画像のファイル名が読み上げられてしまうことがあるからです。
例えば、logo-img.pngや1076.jpgというようなファイル名の画像があった場合、それがそのまま読み上げられてしまうのです。
空の代替テキストを設定しておけば、テキストリーダーはその画像のファイル名を読まずにいてくれます。
上でも見たように、装飾目的の画像などは何も読み上げられない方が分かりやすいので、忘れずに空の代替テキストを設定するようにしましょう。
【HTMLで空の代替テキストを設定する方法】
HTMLで画像を挿入するとき、代替テキストは以下のようにalt属性を使用して設定します。
<img src="sample.jpg" alt="サンプル画像">
空の代替テキストを設定する場合は、このalt属性部分に何も入力しないようにしましょう。
<img src="sample.jpg" alt="">
まとめ
この記事では、代替テキストを適切に設定するためのポイントを3点ご紹介しました。
前回、今回と合わせて、代替テキストを設定する必要性やメリット、注意するポイントをご理解いただけたかと思います。
次回は、これまでの内容を踏まえて具体例を挙げながら「どんなときにどのような代替テキストを設定すると良いのか」をご紹介します！
