Zenn
🔖

フロントエンド開発者のためのalt属性入門

2025/01/05に公開
HTML
frontend
アクセシビリティ
WCAG
tech

はじめに

alt属性は、画像の内容を説明するテキストを提供することで、視覚的なコンテンツを言語で表現する重要な属性です。
Web アクセシビリティの文脈において、特に以下の場合に重要な役割を果たします。

  • 視覚障害のあるユーザーがスクリーンリーダーを使用する場合
  • ネットワークの問題で画像が読み込めない場合
  • ユーザーが画像表示を無効にしている場合

WCAG 2.2では、alt属性の適切な使用が達成基準1.1.1「非テキストコンテンツ」（レベルA）として規定されています。
この基準では、装飾を除くすべての非テキストコンテンツに対して、同等の目的を果たす代替テキストを提供することが求められています。

https://waic.jp/translations/WCAG22/#non-text-content

alt属性の基本仕様

HTML Living Standardの仕様では、img要素に対してalt属性の指定が必須とされています。

https://html.spec.whatwg.org/multipage/images.html#alt

基本的な構文は以下の通りです。

<img src="path/to/image.jpg" alt="画像の説明">

alt属性の使用には、主に2つのパターンがあります。

  1. 代替テキストを提供する場合
    画像が情報を伝える役割を持つ場合、その内容を適切に説明する代替テキストを設定します。

  2. 空のalt属性を使用する場合
    装飾的な画像の場合は、alt=""のように空の値を設定します。
    これにより、スクリーンリーダーは画像の存在を無視します。

効果的なalt記述のポイント

簡潔で的確な説明を心がける

代替テキストは、画像が伝えようとする本質的な情報に焦点を当てる必要があります。
例えば、商品画像の場合、商品名や特徴を簡潔に説明することが重要です。

❌ 悪い例：

<img src="coffee.jpg" alt="白い背景に置かれた、取っ手の付いた黒い陶器のマグカップで、蒸気が立ち上っている">

✅ 良い例：

<img src="coffee.jpg" alt="温かいコーヒーの入った黒いマグカップ">`

文脈を考慮した説明

同じ画像でも、使用される場所や目的によって適切な代替テキストは異なります。

<!-- ナビゲーションで使用する場合 -->
<img src="home.svg" alt="ホーム">

<!-- 現在地を示す場合 -->
<img src="home.svg" alt="現在のページ：ホーム">

適切な長さを意識する

alt属性の文字数に厳密な制限はありませんが、あまりに長い記述だとスクリーンリーダーで読み上げる文章が長くなり、ユーザビリティがよくありません。
WebAIM（Web Accessibility In Mind）やMDN Web Docsでは「簡潔であること」がalt属性に求められています。
https://webaim.org/techniques/alttext/
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#usage_notes

複雑な図表などでは、必要に応じてaria-describedbyを使用して詳細な説明を提供することを検討します。
（aria-describedby については後述します。）

その他の重要な注意点

alt属性の記述において、以下の点に注意しましょう。

  • 「画像:」「写真:」などの冗長な接頭辞は不要
  • ファイル名をそのまま使用することは避ける
  • 装飾的な画像には空のalt属性（alt=""）を使用
  • リンクやボタンとして機能する画像の場合は、クリック時の動作を説明

ユースケース別の実践例

装飾目的の画像

ページのデザインを整えるためだけに使用される装飾的な画像（区切り線、背景画像、装飾的なアイコンなど）には、空のalt属性を設定します。

<img src="decoration.png" alt="">

これにより、スクリーンリーダーは画像の存在を無視し、不要な情報を読み上げることを防ぎます。

ナビゲーション要素としての画像

ボタンやリンクとして機能する画像の場合、その操作によって何が起こるのかを明確に説明します。

<img src="menu.svg" alt="メニューを開く">
<img src="twitter.svg" alt="Twitterでシェア">

インフォグラフィックスやチャート

データを視覚的に表現する図表の場合、その主要な情報や傾向を簡潔に説明します。
詳細なデータが重要な場合は、aria-describedbyを使用して補足説明を提供することも検討します。

<img src="graph.png" alt="2023年の売上高は前年比20%増加" aria-describedby="graph-details">
<div id="graph-details" hidden>
    第1四半期: 100万円
    第2四半期: 150万円
    第3四半期: 200万円
    第4四半期: 250万円
</div>

商品画像とロゴ

ECサイトなどの商品画像では、商品名に加えて視覚的に重要な特徴を簡潔に説明します。

企業やブランドのロゴは、通常そのブランド名をそのまま代替テキストとして使用します。
ただし、リンクとして機能する場合は状況に応じて説明を追加することもあります。

<!-- 商品画像の例 -->
<img src="product.jpg" alt="レザーハンドバッグ - ブラウン, ゴールド金具付き">

<!-- ロゴ画像の例 -->
<a href="/">
    <img src="logo.png" alt="企業名 - ホームページへ">
</a>

代替手段とその使い分け

alt属性だけでは十分な説明が難しい場合、以下の代替手段を検討します。

aria-label / aria-labelledby

要素に対して直接ラベルを提供する属性です。

<button aria-label="メニューを開く">
    <img src="menu.svg" alt="">
</button>

figure要素とfigcaption要素

画像とその説明をセマンティックにグループ化します。

<figure>
    <img src="graph.png" alt="2023年度の四半期ごとの売上グラフ">
    <figcaption>
        売上は第1四半期から順調に成長し、第4四半期では前年比150%を達成しました。
    </figcaption>
</figure>

検証とテスト

スクリーンリーダーでのテスト

主要なスクリーンリーダーで以下の点を確認します。

  • 代替テキストが適切に読み上げられるか
  • 装飾的な画像が適切にスキップされるか
  • 読み上げ順序が論理的か

推奨されるスクリーンリーダーは以下のとおりです。

  • macOS: VoiceOver
  • Windows: NVDA, Narrator
  • モバイル: VoiceOver (iOS), TalkBack (Android)

自動チェックツール

以下のツールを活用して基本的な問題を検出します。

  • axe DevTools
  • WAVE
  • Lighthouse

まとめ

alt属性の適切な実装のポイントをまとめると以下のとおりです。

  1. 基本原則

    • 画像の目的や文脈に応じた適切な代替テキストの提供
    • 装飾的な画像には空のalt属性を使用
    • 簡潔で的確な説明を心がける

  2. 実装のベストプラクティス

    • 重複した説明を避ける
    • 適切な代替手段の活用

  3. 品質管理

    • スクリーンリーダーでの定期的なテスト
    • 自動チェックツールの活用
    • コードレビューでの確認

Discussion