イラストや写真などの、ビジュアルなイメージは、魅力的なウェブサイトを作りだすためには、やはり必要不可欠な存在です。たった一枚の写真が、時には、数千文字におよぶような膨大な文章よりも、大きな説得力を持つ場合さえもあります。
しかしサイトを訪問する多数のユーザーの中には、音声のみでアクセスしているユーザーや、テキストブラウザーなどイメージを表示できないブラウザーを利用しているユーザーもいます。ウェブページの表示速度を速くするために、意図的にイメージを表示しない設定をしているユーザーもいます。
またモバイル端末や携帯電話等を利用してアクセスしている場合、サイズの大きい画像は、全く表示されなかったり、あるいは表示するために、非常に時間がかかってしまう場合があります。
適切なalt属性とは、イメージの代替となりうるテキストです。
世間には、alt属性のことを、画像の説明と教えていらっしゃる先生がたも多いようですが、説明と代替とは本質的に異なる概念です。もしもそのテキストが、代替ではなく本当の意味で説明であるならば、その説明はalt属性ではなく、もっとしかるべき場所に記述すべきです。
次の例のように、img要素内のalt属性の部分に、代替テキストの内容を記述します。
<img src="画像ファイルのURI" alt="代替テキスト">
京都府南部の明日のお天気はです。
上の例文は、ホームページリーダー等のような音声ブラウザーの場合は、「京都府南部の明日のお天気はあめです。」と出力されます。したがってイメージを出力できないブラウザーでも、コンテンツの内容やページ製作者側の意図を、ユーザーに伝えることが可能になります。
主にデザイン上の目的（マージンの調節等）で用いられる、縦横1ピクセルの透明のGIFファイルの事を、スペーサーGIFといいます。
このようなスペーサーGIFや、、
のような、修飾目的のあまり意味の無い画像の場合でも、alt=" "のように、空（から）のalt属性を指定するようにして下さい。
これは音声ブラウザーの種類によっては、img要素にalt属性が無い場合、画像ファイルのURIが読み上げられてしまうケースがあるためです。当然のことながら、「画像ファイルのURI」など読み上げられたところで、ユーザーには何のことか全く理解できません。
alt=" "の" "の中身についてですが、全くの空っぽの場合は、音声ブラウザの種類やバージョンによっては、alt属性の記述が無い場合と同じ解釈をしてしまうケースがあるために、日本語サイトの場合は、全角スペースを入れておいてください。
他の言語の場合は、何か他の文字（音声ブラウザーに読み飛ばされる記号など）を入れてください。
イメージファイルがリンクアンカーになっている場合は、alt属性に記述する代替テキストは、リンク先のページの内容がユーザーに的確に伝わるようにしてください。
これは音声ブラウザーでアクセスしているユーザーのみならず、携帯電話やモバイル端末、回線速度の遅い環境でアクセスしているユーザーには、非常に役立ちます。
何故なら、たとえ画像ファイルの読み込みに時間がかかっている場合でも、ユーザーは、画像ファイルが全て読み込みこまれるのを待たずに、自分の目的のページへ移動する事が可能になるからです。
バナー広告などの場合、alt属性が" "となっていたり、単に"Click here!"となっている場合がありますが、その場合でも、リンク先のページの内容、もしくは少なくとも何の広告なのかを、わかりやすく記述するようにしてください。