alt属性って何?alt属性の基本と設定について初心者向けに解説

alt属性って何? 記事の書き方

こんにちは!あさまべりーです。

初心者ブロガーの皆さん、alt属性ってご存知ですか?

alt属性とは、画像表示の代わりになるテキスト情報のことです。

検索エンジンが画像を認識する際に使用するので、alt属性(代替テキスト)を適切に書いておくことが重要です。

ただ画像を使っているだけでは、ちょっと足りないってことですね。

この記事ではおろそかにしがちなalt属性について解説していきます。

alt属性って何?

alt属性は、画像の代替となるテキスト情報です。

alt属性の目的は、画像が閲覧できない場合においても画像情報が正しく理解されるため。

alt属性の用途
  • 画像が表示されない場合、代替テキストが表示される。
  • 音声合成ソフトで読み上げられる。
  • 検索エンジンが代替テキストで画像の内容を理解する。

例えば、サイト内の画像が何かしらの原因で画像が表示されなかったり、視覚障害者が画像の内容を理解するための補助機能として役立ちます。

そのため、alt属性に記述される代替テキストは適切に表現されたものでなければなりません。

また、alt属性は検索エンジンが画像の内容を認識するので、コンテンツとして意味のある画像であれば、代替テキストを設定しておいた方がいいですね。

alt属性の設定

①直接HTMLタグにalt属性を追加する場合

画像のHTMLタグにalt属性を追加します。(↓赤字の部分)

<img src=”document_data.png” alt=”記事の内容を補完するデータ” />

②WordPressでalt属性の設定をする場合

2通りご紹介します。

1.投稿ページで画像にテキスト情報を追加する場合

記事中に挿入した画像がアクティブな状態のときに、右側に画像設定の欄が表示されます。

そこにあるAltテキスト(代替テキスト)のボックスの中にテキスト情報を記述します。

Altテキスト入力欄

2.画像をアップロードした際にテキスト情報を設定する場合

記事中で使用する画像をアップロードした際に、添付ファイルの詳細で代替テキストのボックスにテキスト情報を入力します。

代替テキスト入力欄

設定自体はとても簡単なので、もし何もしていないということでしたら、後で記事を見直して追加しておくといいでしょう。

代替テキスト(alt属性)の記述するときの注意点

テキスト情報を追加した方がいいと言っても、闇雲に入力しておけば良いというものでもありません。いくつか注意点があるのでご紹介しておきます。

正確に記述する

代替テキストは、画像を正確に表した内容にすること。

抽象的で曖昧な表現は避けましょう。自分がどのように聞いたら理解できるかをイメージしながら考えましょう。

車 → 赤い車、速い車、大きなトラック、混雑しているバス

漠然と”車”だけだと範囲が広すぎて正確に伝わらないので正確に書く。

簡潔に書く

代替テキスト(alt属性)は、画像の内容を端的に表現するようにしましょう。あまりにも長い代替テキストはわかりにくくなってしまいます。

とは言っても、キーワードを羅列するようなことはしないように。

キーワードの乱用で、スパムと見なされる恐れがあります。

わざわざ画像であることを記述しない

「~の絵」、「~の画像」というように、画像であることを表現する必要はありません。

あくまでも画像の内容をわかりやすく表現することがポイントです。

〇 赤い車、速い車、大きなトラック、混雑しているバス

× 赤い車の絵、速い車の写真、大きなトラックの画像、混雑しているバスの動画

全ての画像にalt属性を設定するの?

alt属性は全ての画像に設定する必要はありません。

画像が装飾目的の挿絵として挿入されている場合などは、テキスト情報を設定する必要はありません。

上の例は画像そのものにコンテンツとしての重要な意味があるわけではなく、挿絵として使用したものです。→【悩んでいる人必見!】記事が読まれるためにはこれをやろう!

このような場合、代替テキストを設定するとかえって記事がわかりにくくなる可能性があります。

音声合成ソフトは、代替テキストを読み上げますので、コンテンツ的に重要な意味を持たない画像についてはテキストは空欄にし、読まれないようにしておきましょう。

チェックのポイントは、画像をテキストにおきかえて記事を読んでみたときに混乱しないで理解できるかということです。

あなたのブログ記事、音だけで聞いて理解できますか?

そう考えれば、自ずとどこに代替テキストを入れたらいいかわかってくるはずです。

まとめ

検索エンジンは、コンテンツの質を重視しています。

代替テキストを設定しておくことは、画像を閲覧できない環境にあっても、サイトの情報を正確に理解することにつながります。

適切な代替テキストの設定は、検索エンジンにもサイトの内容を理解してもらうためにも重要なので、必要に応じて設定しておきましょう。

最後までお読みいただきありがとうございました。

コメント

タイトルとURLをコピーしました