実践Webアクセシビリティ - 画像に適切な代替テキスト（alt属性）を設定する実践方法：種類別の対応と関連要素の活用

画像に適切な代替テキスト（alt属性）を設定する実践方法：種類別の対応と関連要素の活用

Tags: アクセシビリティ, HTML, 画像, alt属性, ARIA

ウェブサイト上の画像は、視覚的な情報を伝える上で非常に強力な要素ですが、すべてのユーザーが画像を見られるわけではありません。視覚に障がいのある方、低帯域幅の環境を利用している方、画像表示をオフにしている方など、様々な理由で画像の内容にアクセスできないユーザーが存在します。

これらのユーザーに画像が伝えようとしている情報や、画像が持つ機能を適切に提供するために、HTMLの<img>要素におけるalt属性（代替テキスト）の設定はウェブアクセシビリティの基本的な要件の一つです。しかし、「alt属性を設定すれば良い」というだけではなく、画像の種類や文脈に応じてどのような代替テキストを設定するべきか、また、関連するHTML要素やARIA属性をどのように活用するべきかには、具体的な考慮が必要です。

この記事では、画像の種類ごとに適切な代替テキストを設定するための実践的な方法と、アクセシビリティをさらに向上させるための関連テクニックについて、コード例を交えて詳しく解説します。

なぜ画像に適切な代替テキストが必要か

画像に代替テキストが必要な主な理由は以下の通りです。

スクリーンリーダー利用者: スクリーンリーダーはウェブページのコンテンツを音声で読み上げます。画像に代替テキストが設定されていれば、スクリーンリーダーはそのテキストを読み上げることで、画像の内容や存在をユーザーに伝えることができます。適切なテキストがなければ、「画像」「イメージ」とだけ読み上げられるか、ファイル名が読み上げられることになり、情報の欠落や混乱を招きます。
画像が表示されない環境: ネットワークエラーやユーザー設定により画像が読み込まれない場合、代替テキストが表示されます。これにより、画像の内容を理解することが可能になります。
検索エンジン最適化 (SEO): 検索エンジンは画像の内容を直接理解することができません。代替テキストは、画像の内容を検索エンジンに伝えるための重要な手がかりとなります。
音声入力や音声制御の利用: 音声入力ソフトウェアや音声制御機能の中には、代替テキストを認識して操作を補助するものがあります。

単にalt=""と空にする場合も含め、すべての<img>要素にはalt属性を含めることが、HTML標準やアクセシビリティガイドライン（WCAG）で強く推奨されています。重要なのは、その内容です。

適切な代替テキストの原則

適切な代替テキストは、以下の原則に基づきます。

簡潔かつ正確: 画像が伝えるべき中核的な情報を、短く分かりやすく記述します。
冗長性を避ける: 「〜の画像」「写真：〜」といった表現は、スクリーンリーダーが自動的に画像であることを伝える場合が多いため、原則として不要です。
文脈を考慮: 同じ画像でも、使用される文脈によって代替テキストの内容は変わることがあります。
情報または機能の提供: 画像が伝えるべき情報、あるいは画像が持つ機能（リンクなど）を適切に伝えます。

画像の種類別：代替テキストの実践的な設定方法

画像は、その役割によって大きくいくつかの種類に分類できます。それぞれの種類に応じたalt属性の設定方法を見ていきましょう。

1. 情報画像 (Informative Images)

グラフ、図解、写真など、コンテンツの内容を理解するために不可欠な情報を含んでいる画像です。代替テキストには、画像が伝える情報そのものを簡潔に記述します。

<!-- 例1：グラフ -->
<img src="sales-q1-2023.png" alt="2023年第1四半期の売上推移。1月は100万円、2月は120万円、3月は150万円と増加傾向にある。">

<!-- 例2：人物写真（役割や状況を説明） -->
<img src="ceo-speaking.jpg" alt="ステージ上で聴衆に向かって話す弊社の佐藤CEO">

ポイント: 画像を一目見て理解できる情報を、テキストで再現することを意識します。あまりに複雑な図やグラフの場合は、短いaltテキストに加えて、本文中で詳細な説明を加えるか、後述するaria-describedbyなどの方法を検討します。

2. 装飾画像 (Decorative Images)

デザイン目的で使用され、コンテンツの内容理解に直接的な情報や機能を提供しない画像です（例: 背景パターン、区切り線、特に意味を持たないアイコンなど）。このような画像には、alt属性を空に設定します。

<!-- 例1：区切り線 -->
<img src="divider.png" alt="">

<!-- 例2：特に意味のないアイコン -->
<img src="spacer.gif" alt="">

ポイント: alt属性を省略してはいけません。省略すると、スクリーンリーダーによってはファイル名を読み上げてしまい、かえって混乱を招きます。必ずalt=""と記述してください。
補足: 装飾目的の画像は、HTMLの<img>要素ではなく、CSSのbackground-imageプロパティで実装することを検討する方が、セマンティクス上もアクセシビリティ上も適切である場合が多いです。CSS背景画像はアクセシビリティツリーに含まれないため、スクリーンリーダーは無視します。

3. リンク内の画像 (Images as Links)

画像自体がリンクになっている場合、代替テキストは画像の内容ではなく、リンク先やリンクの機能を説明するものであるべきです。

<!-- 例1：ロゴ画像がトップページへのリンクになっている -->
<a href="/">
  <img src="logo.png" alt="株式会社〇〇 サイトトップへ">
</a>

<!-- 例2：虫眼鏡アイコンが検索ページへのリンクになっている -->
<a href="/search">
  <img src="search-icon.png" alt="検索">
</a>

ポイント: スクリーンリーダーユーザーは、リンクのテキストを読み上げてリンク先を判断します。画像リンクの場合、代替テキストがその役割を果たします。画像の内容をそのまま記述すると、「株式会社〇〇のロゴ画像」（リンク先不明）や「虫眼鏡アイコン」（機能不明）と読み上げられてしまい、リンクであることが分かりません。

4. テキスト画像 (Images of Text)

デザイン上の理由などで、本来テキストで表現できる内容を画像化しているものです。アクセシビリティの観点からは、テキストは画像化せず、CSSでスタイリングしたテキストとしてマークアップすることが強く推奨されます。テキスト画像は拡大時に劣化したり、選択・コピー・検索ができなかったりするため、ユーザビリティも損なわれます。

しかし、やむを得ずテキスト画像をを使用する場合は、代替テキストに画像内のテキスト全文を記述する必要があります。

<!-- 例：キャッチフレーズの画像 -->
<img src="catchphrase.png" alt="未来を創る技術で、社会に貢献します">

注意: この方法はあくまで最終手段です。可能な限り、テキストはテキストとしてマークアップしてください。

5. グループ化された画像 (Groups of Images)

複数の画像がまとめて一つの情報や機能を表している場合（例: 星評価アイコンが並んでいる）、個々の画像に代替テキストを設定するのではなく、全体として一つの代替テキストを設定することが適切な場合があります。

<!-- 例：5段階評価の星アイコン -->
<img src="star-filled.png" alt="" role="presentation">
<img src="star-filled.png" alt="" role="presentation">
<img src="star-filled.png" alt="" role="presentation">
<img src="star-empty.png" alt="" role="presentation">
<img src="star-empty.png" alt="" role="presentation">
<p>（このテキストで評価を補足）</p>

<!-- または、ARIAで全体をラベル付け -->
<div aria-label="評価：5段階中3段階">
  <img src="star-filled.png" alt="" role="presentation">
  <img src="star-filled.png" alt="" role="presentation">
  <img src="star-filled.png" alt="" role="presentation">
  <img src="star-empty.png" alt="" role="presentation">
  <img src="star-empty.png" alt="" role="presentation">
</div>

ポイント: 個々の装飾的な画像にはalt=""とし、role="presentation"を加えて要素のセマンティクスを消去します。そして、周辺のテキストで全体の内容を説明するか、divなどのコンテナ要素にaria-labelを設定してグループ全体にアクセシブルな名前を付けます。

より複雑な画像への対応：`figure`、`figcaption`、ARIA属性の活用

グラフや複雑な図解など、alt属性だけでは情報を伝えきれない画像に対しては、HTML5のfigure要素とfigcaption要素、あるいはARIA属性を組み合わせて使用することを検討します。

`figure`と`figcaption`の活用

figure要素は、イラスト、図、写真、コードブロックなど、主要なコンテンツから独立して参照できるコンテンツのブロックを表します。figcaption要素は、figure要素に対するキャプション（見出しや説明文）を提供します。

<figure>
  <img src="complex-graph.png" alt="2023年度四半期別製品別売上グラフ" aria-describedby="graph-caption">
  <figcaption id="graph-caption">
    <p>このグラフは、2023年度の四半期ごとの製品A, B, Cの売上推移を示しています。製品Aは通年で安定していますが、製品Bは第3四半期に大きく伸長し、製品Cは第4四半期に減少傾向が見られます。</p>
  </figcaption>
</figure>

ポイント: alt属性には画像全体の簡潔な説明（グラフの種類、対象期間など）を記述し、figcaption要素内に詳細な説明を提供します。スクリーンリーダーは通常、figure要素を認識し、その中のfigcaptionを読み上げます。さらに、img要素にaria-describedby属性でfigcaptionのIDを参照させると、一部のスクリーンリーダーでaltテキストの直後に詳細な説明が読み上げられるようになります。

`aria-describedby`の活用

aria-describedby属性は、ある要素に対して、ページの別の場所にある要素が提供する説明（description）を関連付けます。画像だけでなく、フォーム要素や他のコンポーネントにも使用できます。

画像に対して使用する場合、画像の詳細な説明を非表示の要素としてマークアップしておき、aria-describedbyでその要素のIDを指定します。

<img src="detail-diagram.png" alt="システム構成図" aria-describedby="diagram-detail">

<div id="diagram-detail" class="visually-hidden">
  <!-- このdiv内のテキストを詳細な説明とする -->
  <p>システム構成図の詳細：このシステムは、ユーザーインターフェース層、アプリケーション層、データ層の3層で構成されています。...</p>
</div>

ポイント: .visually-hiddenクラスは、CSSで要素を視覚的に隠すが、アクセシビリティツリーからは削除しない（スクリーンリーダーは読み上げる）ようにするためのテクニックです。
注意: aria-describedbyは多くのスクリーンリーダーでサポートされていますが、figure/figcaptionと組み合わせて使用する方が、HTMLのセマンティクスとしてより自然で、サポートも確実な場合があります。状況に応じて適切な方を選択してください。

実装時の注意点とよくある落とし穴

alt属性の省略: <img>タグにalt属性そのものを記述しないのはNGです。情報画像なのに省略した場合、多くのスクリーンリーダーはファイル名を読み上げてしまい、混乱を招きます。装飾画像の場合はalt=""と空文字列を設定します。
altテキストの冗長性: 「〜の画像」「写真：〜」は不要です。スクリーンリーダーが自動的に画像であることを伝えます。
CSS背景画像 vs <img>タグ: 装飾目的やデザインのためだけの画像はCSS背景画像を使用するのがセマンティクス上望ましいです。情報を持つ画像は<img>タグを使用し、alt属性で情報を提供する必要があります。
複雑な画像の対応: alt属性だけで複雑な情報をすべて伝えようとすると、非常に長くなってしまい、かえって分かりにくくなります。figure/figcaptionやaria-describedby、あるいは本文での詳細説明を組み合わせることを検討してください。
文脈による変化: 同じ画像でも、それが配置される場所や文脈によって、伝えるべき情報や機能が異なります。例えば、製品一覧ページのサムネイル画像は「[製品名]のサムネイル」、詳細ページのメイン画像は「[製品名]」やその特徴など、文脈に応じてaltテキストを調整する必要があります。

実装したアクセシビリティのテスト方法

代替テキストが適切に設定されているかを確認するには、以下の方法が有効です。

画像表示のオフ: ブラウザの設定で画像の表示をオフにします。代替テキストが表示されるべき場所に、意図したテキストが表示されるか確認します。
スクリーンリーダーの使用: NVDA (Windows), VoiceOver (macOS/iOS), TalkBack (Android) などのスクリーンリーダーを使用して、ページを操作し、画像がどのように読み上げられるか確認します。意図した代替テキストが自然な流れで読み上げられるか、装飾画像が無視されるかなどをチェックします。
アクセシビリティ評価ツール: Lighthouse (Chrome DevTools内蔵), Axe DevTools (ブラウザ拡張機能), WAVE (オンラインツール) などの自動評価ツールを実行します。これらのツールは、alt属性の欠落や空のalt属性を持つ情報画像などを検出するのに役立ちます。ただし、代替テキストの内容が適切かどうかはツールでは判断できないため、手動での確認（特に1と2）が不可欠です。
コードレビュー: HTMLコードを確認し、すべての<img>要素にalt属性が存在するか、内容が適切かを目視で確認します。

まとめ

ウェブサイトの画像アクセシビリティは、すべてのユーザーがコンテンツにアクセスできるようにするための重要なステップです。単にalt属性を付けるだけでなく、画像の種類や役割、文脈に応じて適切な代替テキストを記述し、必要に応じてfigure、figcaption、ARIA属性などの関連技術を組み合わせることが求められます。

この記事で紹介した実践的な方法を参考に、ご自身のウェブサイトの画像について、アクセシビリティの観点から見直し、改善に取り組んでいただければ幸いです。適切な代替テキストの設定は、ウェブサイトのユーザビリティとアクセシビリティを向上させるための第一歩となるでしょう。