WCAG 2.2 ガイドライン 1.1.1 非テキストコンテンツ：初心者向け解説と具体例

1.1.1 非テキストコンテンツとは？

WCAG（Web Content Accessibility Guidelines）2.2 のガイドライン 1.1.1「非テキストコンテンツ」は、視覚や聴覚に頼らず、すべてのユーザーがウェブページ内の 非テキストコンテンツ（画像、動画、音声など） を理解できるようにするための基準です。

たとえば、画像やアイコンがページに表示されていても、視覚障害のある方やテキストブラウザを使用する方には見えません。このガイドラインは、代替情報（altテキストなど） を提供することで、すべての人に同じ情報を伝えられるようにすることを求めています。

基本ルール

以下のポイントを守る必要があります：

1. 非テキストコンテンツには代替テキストを提供する

   • 例: 画像、図表、ボタンなどには、内容を説明するテキストを付ける。

2. 装飾目的や無意味なコンテンツには、適切に扱う方法を指定する

   • 例: デザイン要素の装飾画像は、スクリーンリーダーで読み上げられないように設定。

3. 音声や動画にはキャプションや説明を提供する

   • 例: 音声の内容を文字起こしする、動画に字幕を付ける。

具体例で解説

初心者でも理解しやすいように、具体的な例を挙げながら説明します。

1. 画像の代替テキスト（alt属性）

正しい例：

商品ページに商品の画像がある場合：

<img src="tshirt.jpg" alt="赤いTシャツ、コットン素材、サイズM">

• なぜ必要？
  視覚障害のあるユーザーは、スクリーンリーダーでこの代替テキストを聞くことで、画像の内容を理解できます。

装飾画像の場合：

背景やデザイン要素で使用される画像の場合、空のalt属性を指定します：

<img src="decorative-line.jpg" alt="">

• なぜ必要？
  無意味な情報を読み上げないようにするためです。

2. アイコンの説明

ボタンやリンクに使用されるアイコンには、代替テキストが必要です。

正しい例：

<a href="/home">
  <img src="home-icon.png" alt="ホーム">
</a>

• なぜ必要？
  アイコンだけでは意味が伝わらないため、代替テキストで機能を説明します。

よくある間違い：

代替テキストがない例：

<a href="/home">
  <img src="home-icon.png">
</a>

この場合、スクリーンリーダーは「リンク」としか伝えられず、どこに移動するかが不明です。

3. 音声コンテンツの文字起こし

音声ファイルやポッドキャストを提供する場合、文字起こし（テキストのスクリプト）を追加します。

正しい例：

音声ファイルの下に文字起こしを表示する：

<audio controls>
  <source src="podcast.mp3" type="audio/mpeg">
  このブラウザでは音声ファイルを再生できません。
</audio>
<p>【文字起こし】このエピソードでは、Webアクセシビリティの基本について解説します。</p>

• なぜ必要？
  聴覚障害のある方も、内容を文字で理解できます。

4. 動画コンテンツに字幕や説明を追加

動画には音声内容を文字で伝える字幕や、視覚的な情報を補足する音声解説を追加します。

正しい例：

動画プレーヤーに字幕を付ける：

<video controls>
  <source src="example-video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="ja" label="日本語字幕">
</video>

• なぜ必要？
  聴覚障害のある方が字幕を見て内容を理解できます。

5. フォームのエラーメッセージや図表の説明

図表やグラフ：

グラフに代替情報を提供します。

正しい例：

<img src="sales-chart.png" alt="2024年度の売上。1月から3月に20%増加。">

• なぜ必要？
  視覚で伝える情報を、代替テキストで正確に表現するためです。

フォームのエラー：

エラーメッセージが視覚だけに依存しないようにします。

<label for="email">メールアドレス</label>
<input type="email" id="email" required>
<span id="error" aria-live="polite">メールアドレスを正しく入力してください。</span>

• なぜ必要？
  視覚障害のある方にもエラーの内容が伝わるようにするためです。

初心者が注意すべきポイント

1. すべての非テキストコンテンツに代替情報を設定する： 特に、画像や動画にはalt属性や字幕を必ず用意する。

2. スクリーンリーダーをテストする： 実際に音声読み上げツールを使用して、代替情報が適切に動作しているか確認する。

3. ユーザー体験を考慮する： 視覚障害や聴覚障害を持つ方が、情報を正確に得られるように工夫する。

これらを実践することで、誰にとってもアクセスしやすいウェブコンテンツを作成できます。

当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。