【画像とアクセシビリティのガイドライン】CSS背景画像とalt属性：Webサイトを正しく構築するための指針

2024-07-27

CSSの背景画像とalt属性：わかりやすい解説

CSSの background-image プロパティは、Webページの要素に背景画像を設定するために使用されます。一方、alt 属性は、画像が何らかの理由で表示されない場合に、その画像の内容を代替するテキストを指定するために使用されます。

装飾画像と情報画像

画像には大きく分けて2種類あります。

装飾画像: デザインを装飾するために使用される画像で、コンテンツ自体に重要な意味を持たないものです。
情報画像: コンテンツを理解するために必要な情報を伝える画像です。

alt 属性の必要性

alt 属性は、情報画像に対して必須です。なぜなら、スクリーンリーダーなどの補助技術を使用するユーザーや、画像が破損または読み込まれない場合でも、画像の内容を理解できるようにするためです。

一方、装飾画像の場合は、alt 属性は必ずしも必要ではありません。しかし、アクセシビリティを向上させるために、空の alt 属性を設定することを推奨します。

CSSでの alt 属性の使用

CSSの background-image プロパティで alt 属性を使用することはできません。これは、background-image プロパティは画像要素ではなく要素の背景に画像を設定するためです。

代替手段

CSSで装飾画像を使用する場合は、以下の代替手段でアクセシビリティを向上させることができます。

空の alt 属性を設定する
画像を aria-hidden 属性で非表示にする
画像を display: none で非表示にする

例

以下の例は、CSSで背景画像を設定し、空の alt 属性を設定する方法を示しています。

.example {
  background-image: url('image.jpg');
  alt: '';
}

情報画像には alt 属性を設定し、画像の内容を代替するテキストを記述する必要があります。
装飾画像の場合は、alt 属性は必ずしも必要ではありませんが、空の alt 属性を設定することを推奨します。
CSSで alt 属性を使用することはできません。
代替手段として、空の alt 属性を設定するか、画像を非表示にすることができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Background Image and Alt Attribute Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="example"></div>
</body>
</html>

CSS

.example {
  background-image: url('image.jpg');
  alt: '';
  width: 300px;
  height: 200px;
  border: 1px solid black;
}

このコードは、以下の内容を実行します。

image.jpg という名前の画像を example クラスの背景に設定します。
alt 属性に空の文字列を設定します。
example クラスの要素に幅300px、高さ200pxの黒い境界線を設定します。

説明

HTMLコードで、example というクラスを持つ div 要素を作成します。
CSSコードで、example クラスの要素に background-image プロパティを設定します。このプロパティの値は、url('image.jpg') であり、これは image.jpg という名前の画像ファイルを指します。
さらに、alt 属性を空の文字列に設定します。これは、この画像が装飾目的であり、代替テキストが必要ないことを示します。
最後に、example クラスの要素に幅と高さ、および境界線を設定します。これは、画像の表示を確認しやすくするためです。

実行

上記のコードを保存して、Webブラウザで開くと、image.jpg が example 要素の背景に表示されます。画像には黒い境界線が付き、alt 属性には空の文字列が表示されます。

実際のコードでは、image.jpg を実際の画像ファイルのパスに置き換える必要があります。
画像のサイズや位置を変更するには、CSSコードで background-size や background-position などのプロパティを使用できます。
より複雑なレイアウトを作成するには、HTMLとCSSを組み合わせて使用できます。

CSSでの背景画像とalt属性の代替手段

これは、最も簡単な方法です。alt 属性に空の文字列を設定することで、スクリーンリーダーなどの補助技術を使用するユーザーに、画像が存在することを伝えることができます。

.example {
  background-image: url('image.jpg');
  alt: '';
}

この方法は、画像を完全に非表示にすることなく、スクリーンリーダーから隠すことができます。

.example {
  background-image: url('image.jpg');
  aria-hidden: true;
}

この方法は、画像を完全に非表示にします。ただし、この方法を使用すると、画像が完全に読み込まれないため、パフォーマンスに影響を与える可能性があります。

.example {
  background-image: url('image.jpg');
  display: none;
}

画像を aria-label 属性で説明する

この方法は、画像の内容をより詳細に説明したい場合に使用できます。

.example {
  background-image: url('image.jpg');
  aria-label: '会社のロゴ';
}

別の要素に代替テキストを記述する

この方法は、画像の近くに代替テキストを含む別の要素を作成する場合に使用できます。

<div class="example">
  <img src="image.jpg" alt="会社のロゴ" aria-hidden="true">
</div>

SVG画像を使用する

SVG画像は、ベクター画像であるため、拡大縮小しても品質が劣化しません。また、aria-label 属性を使用して、画像の内容を説明することができます。

.example {
  background-image: url('image.svg');
  aria-label: '会社のロゴ';
}

それぞれの方法の利点と欠点

それぞれの方法には、利点と欠点があります。

方法	利点	欠点
空の `alt` 属性	簡単	画像の内容がわからない
`aria-hidden` 属性	画像を非表示にせずにスクリーンリーダーから隠せる	画像が完全に読み込まれる
`display: none` 属性	画像を完全に非表示にできる	パフォーマンスに影響を与える可能性がある
`aria-label` 属性	画像の内容をより詳細に説明できる	コードが複雑になる
別の要素に代替テキストを記述する	画像と代替テキストを近くに配置できる	コードが冗長になる
SVG画像	拡大縮小しても品質が劣化しない	作成が難しい場合がある