<>

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

サイトにアップロードした メディア( 画像 )は ファイルのURLを含む
画像に関する情報がメディアコードとして記述されています。

altのコード解説 - アップロードしたメディアのURL

<img class ="から始まり 表示する画像の 位置・サイズ の指定と
アップロードされた サイトのURL / 画像の名前.png の次に " alt " という属性があります。

この " alt " の使いかたについて のまとめです。

alt とは?

alt は 画像に対する説明、 代替テキスト を書き込むためのコードになります。

代替テキストとは 画像が正常に表示されない場合、または 視覚障害のある方でも
何が表示されているのか 分かるようにする為の 代わりのテキストという意味合いになります。

投稿画面 - 画像詳細
投稿ページで アップロードした画像の 詳細画面下の 画像の意味を説明しましょう。
をクリックすると  An alt Decision Tree サイトへ移動できます。

画像の代替テキスト alt の使いかたについて 詳しくまとめられているページです。

An-alt-Decision-Tree- 代替テキストに関する解説サイト

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

画像の種類によっては そのまま空白にしておく というケースもあるので この種類を理解しておく必要があります。

日本語への翻訳は…

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

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

画像の種類と alt の使い分け

投稿記事を分かりやすくするための画像 のほか ショッピングサイトなどの 買い物かご購入などの ボタンも画像です。

視覚障害を持っておられる方に理解できるように。ということを 前提に考えると、
どの画像にどのような代替テキストが必要なのか ある程度理解できるのではないでしょうか?

空白にしておく画像

装飾を目的とする画像として それ自体に意味をもたない画像は、空白のままでいい画像になります。

また 文章の内容を分かりやすく伝えるための画像 でも空白にしておく場合があります。

草原で ご機嫌でポーズを決めているカエルと
撮影する カエルのカップル

画像上は 横に 画像に対する説明文が書かれています。
この場合、代替テキストを入れると説明が 二重になってしまうため " alt " は不要になります。

画像に対する説明文が記載されている画像
同じような画像ですが こちらは 画像に説明書きが含まれています。

私のサイトの場合、説明のための画像が多いので 視覚的に分かりやすいように
画像自体に説明を書き込むケースが多いですが 文章だけ読んだ場合に
意味が分かるかどうかが ポイントに テキストを書くかどうか決めています。

画像が表示されない場合

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

表示できない画像に代替テキストが付けたされているイメージ

画像が表示されないという事は、できるだけ避けたいことですが
万が一表示できなかった場合 代替テキスト が書かれていると このように 画像の説明が表示されます。

alt " " の使いかた

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

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

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

まとめ

alt は 本文には記されていない、その画像の意味( 情報 )を伝える目的だということが分かりました。
情報を正確に伝えるために 代替テキストが必要かどうか、臨機応変に対応することが大切なようです。

また、スパムにならない範囲で alt にキーワードを入れると SEO的に良いとされています。
同じ記事内に 同じキーワードが多すぎるとスパムとみなされてしまうので気を付けましょうね。

以上、” メディア画像 URL の【 alt 属性 】はどう使う? ” でした。