HTMLにおける画像の代替方法：最新の情報でWebページをよりアクセシブルに

まず、「廃止」とは、ある要素や属性が HTML の新しいバージョンで推奨されなくなったことを意味します。推奨されなくなった要素や属性は、将来的にブラウザでサポートされなくなる可能性があるため、新しい方法で記述することを 強く推奨されています。

画像を挿入するための基本的な HTML タグは <img> です。しかし、この <img> タグには、かつては一般的だったものの、現在は推奨されていない属性 がいくつか存在します。

width 属性と height 属性
画像の幅と高さを直接 <img> タグで指定することは推奨されていません。代わりに、CSS で画像のサイズを制御することを推奨します。

<img src="image.jpg" width="640" height="480" alt="説明文">

<img src="image.jpg" alt="説明文">

img {
  width: 640px;
  height: 480px;
}

align 属性
画像の位置 (left、right、center など) を直接 <img> タグで指定することは推奨されていません。代わりに、CSS で画像の位置を制御することを推奨します。

<img src="image.jpg" align="center" alt="説明文">

<img src="image.jpg" alt="説明文">

img {
  display: block;
  margin: 0 auto;
}

新しい画像フォーマット
JPEG や PNG 以外にも、WebP や AVIF などの新しい画像フォーマットを検討しましょう。これらのフォーマットは、より高圧縮で、画質を犠牲にすることなくファイルサイズを小さくすることができます。
レスポンシブ画像
さまざまな画面サイズで適切に表示されるように、レスポンシブ画像 を使用するようにしましょう。
代替テキスト (alt 属性)
すべての画像に必ず代替テキストを指定しましょう。これは、視覚障がい者用のスクリーンリーダーが画像の内容を認識できるようにするため、非常に重要 です。

例 1: 画像の幅と高さを指定する

古いコード

<img src="image.jpg" width="640" height="480" alt="説明文">

新しいコード

<img src="image.jpg" alt="説明文">

img {
  width: 640px;
  height: 480px;
}

例 2: 画像を中央揃えにする

古いコード

<img src="image.jpg" align="center" alt="説明文">

新しいコード

<img src="image.jpg" alt="説明文">

img {
  display: block;
  margin: 0 auto;
}

例 3: 代替テキストを指定する

古いコード

<img src="image.jpg">

<img src="image.jpg" alt="説明文">

ここでは、画像の代替方法 について、状況別に詳しく解説します。

テキストによる代替

最も基本的な代替方法は、代替テキスト を用いることです。これは、img タグの alt 属性に記述するテキスト情報で、画像の内容を簡潔に説明します。

例

<img src="image.jpg" alt="赤いバラの花束">

代替テキスト を記述する際には、以下の点に注意しましょう。

代替テキスト 以外にも、画像を代替する方法はいくつかあります。

ARIA属性
画像に ARIA 属性を追加することで、スクリーンリーダーに画像の内容をより詳細に伝えることができます。
インタラクティブな要素
画像を ボタン や リンク として使用し、ユーザーがクリックすることでアクションを実行できるようにする。
画像説明
画像の内容を詳しく説明する文章を figcaption タグなどで記述できます。これは、視覚障がい者用のスクリーンリーダーで読み上げられます。
CSS装飾
画像を CSS で装飾することで、視覚的な代替手段を提供できます。例えば、背景画像や SVG アイコンなどを利用できます。

適切な方法の選択

画像の代替方法 を選択する際には、状況を考慮することが重要です。