メディア画像 URL の【 alt 属性 】はどう使う?

メディア画像の コードには " alt " という属性が含まれています。
画像に対する説明分 代替テキスト を書き込むためのコードになりますが
画像によっては そのまま空白にしておく というケースもあります。

具体的には どのように使い分けるのでしょうか?

alt とは?

サイトにアップロードされている メディア( 画像 )を 記事に追加すると
テキスト画面では 画像がコードで表示されています。

そのコードには 画像の 位置・サイズ・ファイルのURL などが含まれていて
alt は ファイルのURL の後ろにあります。


画像編集に 代替テキストに画像の意味を説明しましょう。とあり クリックすると
画像の代替テキスト alt の使いかたについて 詳しくまとめられているページ
An alt Decision Tree へ移動します。

画像には 有益な画像・装飾画像・機能的な画像・テキストの画像 など
いくつかの グループに分けられていて、" alt “ の設定が必要かどうかを
このページで、yes,no 形式で 画像の種類がどの分類なのかを 診断できるページになります。

日本語への翻訳は…

日本語への翻訳が分からない方のために
補足しておきます。

翻訳したいサイト画面でマウスを
右クリックで 日本語に翻訳 があります。

画像の種類

画像の役割は、サイトの情報に対して より分かりやすくするための 補足的な役割と言えます。

画像の概念としては、視覚障害を持っておられる方に理解できるように。ということで
これを踏まえて考えると、おのずと どのような代替テキストが必要なのか、わかってきますね。

空白にしておく画像

ブログサイトで 一番使いそうな画像が、装飾を目的とする画像ではないでしょうか?

どれだけいい事を書いていても 文章ばかりの記事では、理解しにくい場合もあり
画像を取り込むことで イメージしやすいという事もあります。

画像に対する説明文が記載されている画像
この カエルの画像ですが、右側に 画像に対する説明文が書かれています。

ページに雰囲気を持たせるなどの目的で使用される場合や このように
本文に記されている場合、重複する説明は不要ですので alt は空のままにしておく画像になります。

本文にない情報を alt に

alt を使用する画像には 本文には記されない、その画像の意味( 情報 )を伝える
ということが 目的になります。
本文を分かりやすくするための画像
私のサイトの場合、このような画像が多いのですが、視覚的に分かりやすいように
画像自体に説明文も付けていますが 文章だけ読んだ場合には かわりません。

本文を読むだけでも意味が分かるのか、補足が必要なのか によって
alt は 臨機応変に対応しましょう。

alt " " の使いかた

では、この alt という画像を使って解説していきます。
画像に対する alt の 実際の使いかたとは異なりますが、使いかたの イメージ という事でご理解ください。

テキストエディタ画面で見ると追加された メディアのコードが表示されています。
メディア画像のURL-altの追加
alt の隣にある " " このマークの間に文章を書き込みます。

画像の編集画面から書き込むこともできます。
画像詳細設定
こちらの代替テキストに書き込む方が、コードを誤って消してしまうこともないので
安心して編集することができます。

その他の目的

画像が表示されない場合


このような画像を見たことはないでしょうか?
これは 何らかの理由で メディア画像が表示されない場合に このように替わりの画面が表示されます。

画像が表示されないという事は、できるだけ避けたいことですが
万が一表示できなかった場合の代替テキスト 画像についての説明するために
alt属性を使って 説明文を書き込んであげると、このように画像の説明が表示されます。

SEO対策

スパムにならない範囲で alt にキーワードを入れると SEO的に良いとされています。

まとめ

記事内での その画像の役割・重要性 それぞれの意味を理解して
使い分けることが大切だという事が分かりましたね。

このほか、代替テキストを必要とする画像は グラフだったり
より高度なレベルのサイトで必要な知識になります。

詳しくは、先ほどのサイト An alt Decision Tree  を参考にして頂ければと思います。