Images et Médias Accessibles

画像の代替テキスト

悪い例

MacBook Pro 16"

€2,499

4.8/5 (127件のレビュー)

注文が確認されました！

<!-- ❌ 悪い例：説明的でない代替テキスト -->
<img src="laptop.jpg" alt="image" />
<img src="star-icon.svg" alt="star.png" />
<img src="success-icon.svg" alt="success.svg" />

良い例

MacBook Pro 16"

€2,499

4.8/5 (127件のレビュー)

注文が確認されました！

<!-- ✅ 良い例：説明的な代替テキスト -->
<img src="laptop.jpg"
     alt="MacBook Pro 16 pouces, vue de face,
          écran ouvert montrant l'interface macOS" />

<!-- 装飾的なアイコン：空のalt、コンテキスト用の.sr-only -->
<img src="star-icon.svg" alt="" />
<span>
  <span class="sr-only">Note de </span>4.8/5
  <span class="sr-only"> étoiles</span> (127 avis)
</span>

<!-- 通知内の装飾的なアイコン -->
<img src="success-icon.svg" alt="" />
<span>Commande confirmée !</span>

説明： 代替テキストを使用すると、スクリーンリーダーが画像を説明できます。情報画像には説明的に、装飾画像には空にする必要があります。

アクセシブルなビデオ

悪い例

製品プレゼンテーション

📹 デモビデオ
（自動再生、キャプションなし）

<!-- ❌ 悪い例：自動再生付きビデオ -->
<video width="100%" height="200" autoplay loop muted>
  <source src="demo.mp4" type="video/mp4">
  Votre navigateur ne supporte pas la vidéo.
</video>

良い例

製品プレゼンテーション

📹 MacBook Proデモビデオ
（アクセシブルなコントロール、キャプション利用可能）

MacBook Pro 16インチの機能を紹介する2分間のビデオ。日本語のキャプション利用可能。

<!-- ✅ 良い例：キャプションとコントロール付きのアクセシブルなビデオ -->
<video width="100%" height="200"
       controls
       preload="metadata"
       aria-describedby="video-description">
  <source src="demo.mp4" type="video/mp4">

  <!-- 聴覚障害者向けのキャプション -->
  <track kind="captions"
         src="captions.vtt"
         srclang="fr"
         label="Français"
         default>

  <!-- 視覚障害者向けの音声説明 -->
  <track kind="descriptions"
         src="descriptions.vtt"
         srclang="fr"
         label="Description audio">

  <!-- トランスクリプトへのリンク付きフォールバック -->
  Votre navigateur ne supporte pas la vidéo.
  <a href="transcript.html">Consulter la transcription</a>
</video>

<div id="video-description">
  Vidéo de 2 minutes présentant les fonctionnalités du MacBook Pro.
  Sous-titres en français disponibles.
</div>

説明： ビデオにはキャプションが必要で、キーボードでアクセス可能なコントロールが必要で、自動再生してはいけません。

チャートと視覚的データ

悪い例

四半期売上

<!-- ❌ 悪い例：説明または代替データのないチャート -->
<svg width="300" height="150" viewBox="0 0 300 150">
  <rect
    x="50"
    y="100"
    width="40"
    height="40"
    fill="#3b82f6"
  />
  <rect
    x="110"
    y="80"
    width="40"
    height="60"
    fill="#3b82f6"
  />
  <rect
    x="170"
    y="60"
    width="40"
    height="80"
    fill="#3b82f6"
  />
  <rect
    x="230"
    y="40"
    width="40"
    height="100"
    fill="#3b82f6"
  />
</svg>

良い例

四半期売上

詳細な四半期売上データ
四半期	売上（k€）	進化
2025年Q1	40	-
2025年Q2	60	+50%
2025年Q3	80	+33%
2025年Q4	100	+25%

<!-- ✅ 良い例：代替データ付きのアクセシブルなチャート -->
<svg width="300" height="150"
     role="img"
     aria-labelledby="chart-title"
     aria-describedby="chart-desc">

  <title id="chart-title">Graphique en barres des ventes trimestrielles</title>
  <desc id="chart-desc">
    Évolution croissante des ventes sur 4 trimestres :
    Q1: 40k€, Q2: 60k€, Q3: 80k€, Q4: 100k€
  </desc>

  <!-- チャートバー -->
  <rect
    x="50"
    y="100"
    width="40"
    height="40"
    fill="#3b82f6"
  />
  <rect
    x="110"
    y="80"
    width="40"
    height="60"
    fill="#3b82f6"
  />
  <rect
    x="170"
    y="60"
    width="40"
    height="80"
    fill="#3b82f6"
  />
  <rect
    x="230"
    y="40"
    width="40"
    height="100"
    fill="#3b82f6"
  />

  <!-- アクセシブルなラベル -->
  <text x="70" y="130">Q1</text>
  <text x="130" y="130">Q2</text>
  <text x="190" y="130">Q3</text>
  <text x="250" y="130">Q4</text>
</svg>

<!-- すべてのデータを含む代替テーブル -->
<table>
  <caption>Données détaillées des ventes trimestrielles</caption>
  <thead>
    <tr>
      <th scope="col">Trimestre</th>
      <th scope="col">Ventes (k€)</th>
      <th scope="col">Évolution</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Q1 2025</th>
      <td>40</td>
      <td>-</td>
    </tr>
    <!-- ... その他の行 -->
  </tbody>
</table>

説明： チャートには、それを見ることができないユーザーのためのテキスト説明と代替データが必要です。