「ちゃんと」Webのことを考えるNPO・個人事業主・中小企業・団体の応援メディア。フォームより無料でご相談いただけます。

alt属性(オルト)

Webページ上に配置した画像に設定できる項目。画像の内容を説明したり、画像がなんらかの原因で表示できない方に向けて、その画像に記述されている内容を説明することができます。

altは「alternative」の略称で、代替といった意味。「オルト」などと呼ばれます。例えば、次の画像を見てみましょう。

ちゃんとWeb.biz powered by H2O space

ほとんどの方には、画像に書かれた文字が読めると思いますが、次のような方の場合、画像が表示されないため内容が確認できません。

  • 視覚に障害があり、音声ブラウザーで利用している
  • ネット回線が遅く、画像が読み込まれていない
  • Webブラウザーの設定を変更し、画像を表示しないようにしている(回線が従量課金などで、節約するために機能を OFFにしているなど)

このような場合、画像は以下のようなアイコンに置き換わってしまうため、そこに書かれている内容は分かりません。

画像が表示されない例

そこで、画像の「alt属性」を設定します。HTMLタグを直接記述する場合は、次のように「alt」という属性を使います。

<img src=”img.png” alt=”ちゃんとWeb.biz powered by H2O space”>

WordPressなどの CMSを利用している場合は、設定項目があるので、そこで設定しましょう。

WordPressの alt設定欄

こうしておけば、画像が表示できない環境でも、次のように内容が表示されるため、伝わるようになります。

alt属性が設定されている場合の表示

検索エンジンのクローラーは日々進歩していますが、どんな画像かを正確に解釈してくれるわけではないため、alt属性は、どういう写真なのかという説明(キャプション)や、図版に記載された文字を設定しておくことが大切です。そうすることで画像部分でもきちんと検索エンジンのクローラーが読み込んでくれるようになります。

目次