BLOG

こんにちは、Zenです。

フィリピンのセブ島にあるIT留学、英語留学のグローバルITアカデミーでのインターン研修をしております。

前々回の記事「HTML：ページに画像を配置する」に初コメントいただきました。ありがとうございます。

その際ご指摘いただきました「画像を挿入する際に必要なalt属性」についてご説明したいと思います。

 

１．alt属性とは、画像表示に必要なHTMLタグのimg要素プロパティ（属性）の一つです。

２．何らかの理由によって画像が表示されないときに代わりのテキストを示してくれるため、ページの理解度が深まります。

３．Google画像検索など画像に特化した検索エンジンにサイトの画像について伝えることができ、画像からのサイトへのアクセスも期待できます。

４．目の不自由な人が画像のalt属性の値をスクリーンリーダー（※１）で読み上げたり、点字に変換して認識することができるようになります。

５．画像からリンクを張る場合、画像のaltテキストがリンクに対するアンカーテキスト（※２）のように扱われます。

そのためリンク先がわかる内容にすることで、リンクの最適化に繋がります。

６．altの代わりにに、titleを使うことも可能です。

title属性は、img要素以外にも使用でき、HTMLの全ての要素に指定すること可能です。

 

上記の理由から、alt属性には、画像の説明をわかりやすく書きます。

例えばこの画像の説明を考えてみましょう。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

画像１・・・なんの画像かわからない為、不適切です。

 

フィリピン人スタッフの写真・・・まあまあですね。

 

にこやかに夕飯を食べているフィリピン人スタッフ達の写真・・・これならイメージしやすくていいですね。

 

これをHTMLで実際に入力してみるとこんな感じになります。

<img src=”images/IMG_4734.jpg” width=”940″ height=”705″ alt=”にこやかに夕飯を食べているフィリピン人スタッフ達の写真”>

 

 

 

 

 

alt属性を入れなくても画像は挿入できるので、うっかり省略してしまいがちですが、

これからは忘れずに入力していきたいと思います。

コメントは随時募集しておりますので、内外問わずご意見ご指摘等いただけるとありがたいです。

これからもよろしくお願いいたします。

Zenでした。

 

※１・・・、コンピュータの画面読み上げソフトウェア。視覚障害者がパソコンを操作するために、視覚的に使うことが必要であるマウスに変わり、情報を音声で読み上げることによってその操作を補助するもの。

※２・・・HTMLでページからページへジャンプする「リンク」に使われるテキスト（文字列）のこと。画像をクリックできるようにしてリンクしている場合、検索エンジンはその画像のalt属性（代替テキスト）をアンカーテキストとして扱うとされている。