しらぎくのウェブサイト作成入門メモ
しらぎくのウェブサイト作成入門制作者のメモ。

<img>要素には alt 属性を必ず与えよう

<img>要素には代替テキストとなる alt 属性が定義されております。

ISO-HTML, HTML4/XHTML1 では必須とされておりましたが、HTML5 では条件付きで省略が認められております。

でも、私見ですが alt 属性は必ず与えるべきと考えております。

目次


alt 属性についておさらい

<img>要素にて定義されている alt 属性は、当該画像の代替となるテキストです。

当該画像を画像として閲覧出来ない場合に、画像を置換えられるテキストとして機能すべきテキストとなります。

alt 属性の間違った使い方

ウェブサイト制作業者が作ったサイトでもしばしば見られる間違いとして、例えば企業サイトの各ページの冒頭に企業のロゴを埋め込む際に、

<img alt="会社ロゴ" src="Logo.GIF" …>

などと記述している例があります。

状況にも依りますが、サイトの冒頭に企業ロゴを埋め込む場合は、

<img alt="○○株式会社" src="Logo.GIF" …>

などとロゴに書かれているテキストを記述する必要があるでしょう。

HTML5 で alt 属性は省略可能になったが、省略すべきでない

ISO-HTML 及び HTML4/XHTML1 では、<img>要素に於いては alt 属性必須の属性とされておりました。

一方、HTML5 では代替テキストが不要であれば省略出来る事となりました。

ですが、私見ではありますが HTML5 であっても<img>要素には alt 属性は省略せずに記述する習慣をつけるべきだと考えております。

alt 属性を省略すべきでない理由

仮令<img>要素alt 属性が省略出来る HTML5 であっても、alt 属性を省略すべきでないと考える理由は以下の通りです:

理由 1:HTML4/XHTML1 世代の環境への配慮

HTML4/XHTML1 世代に開発された音声ブラウザの中には、alt 属性がない<img>要素について、当該画像への URL を読上げるものが多くなっております。

多くの場合、URL をいきなり読上げられても内容を理解する事は困難となるでしょう。

でも、alt 属性を正しく与えておけば、それに従って読上げが行われるため、閲覧者を混乱させる恐れがなくなります。

HTML5 でアクセシビリティへの配慮が後退しているからこそ

HTML5 に於いて、規格化を行う側(特に WHATWG)はグラフィカルな視覚系ウェブブラウザの関係者ばかりで、そうでないウェブブラウザの関係者は殆どおりません。

この結果、HTML5 ではアクセシビリティへの配慮が大きく後退しているのが実情です。

実際、グラフィカルでないウェブブラウザの HTML5 対応の話は殆ど聞く事がありません。

アクセシビリティ配慮の大幅な後退は、HTML5 に於ける最大の問題点と言えるでしょう。

このような問題点がある以上、文書を作成する側がアクセシビリティに対する意識を高めて対応するしかないのです。

理由 2:悪しき習慣を作らないため

スマートフォンサイトに見られる悪習慣

昨今スマートフォン向けモバイルサイトなどで見られる問題として、alt 属性を全く与えていないサイトが増えているそうです。

スマートフォンサイトについては、ページ表示速度を少しでも上げるため余計な記述は極力省く傾向があるようで、alt 属性も余計な記述とみなされているようです。

alt 属性を省略出来るようにした事でこのような悪習慣が付いてしまったとしたら、それはかなり問題ある事だと思います。

適切な値の alt 属性を与える習慣を常につけるようにしましょう。

蛇足

検索エンジン最大手のグーグル社は現在デスクトップ向けコンテンツを基準にインデックスしております。

同社はこれをスマートフォン向けコンテンツ基準に変更する事を計画しております。

スマートフォン版サイトで alt 属性が欠落している場合、それらが欠落した状態でインデックスされる事となり、結果検索結果に悪影響が生じます。

ですから、スマートフォン向けサイトを別に作っている場合は、alt 属性の見直しが必要になります。

ご案内。

制作者の創作キャラクタ

創作キャラクタ・堀北真希うさぎ
主な収録作品
紀子ちゃん(神崎紀子)
主な収録作品

しらぎく日記システム 第 0.685版 (平成29年08月15日)