1.1.1 非テキストコンテンツ

要件

代替テキストの提供

• 画像やアイコンに対して、代替テキスト（alt属性）を設定し、その画像が伝える内容を簡潔に説明します。これにより、スクリーンリーダーが代替テキストを読み上げて、視覚障害のあるユーザーも情報を得られます。
• 装飾用の画像には、空のalt=””を設定してスクリーンリーダーが無視できるようにし、情報に関係のない要素が読み上げられるのを防ぎます。

音声コンテンツと動画のテキスト説明

• 音声のみのコンテンツには、その内容を説明するテキストが必要です。また、動画には音声やビジュアルに依存せずに理解できるテキストのキャプションや説明を提供します。

複雑なグラフィックやインフォグラフィック

• データを含む画像やインフォグラフィックの場合、画像だけでなく、画像の内容を説明するテキスト（例：キャプションや長めの説明）が必要です。これにより、情報の完全性が保証されます。

内容

画像

• 内容を説明する代替テキスト (alt属性) を提供します。（例: 製品の画像に対して「青いシャツ」といった具体的な説明を設定。）
• 装飾用画像の場合は空のalt=””を使用して、スクリーンリーダーが無視できるようにします。

音声コンテンツ

• 音声情報が含まれる場合、その内容を文字起こし（テキスト）として提供します。

動画

• 映像だけで伝えられる情報には、音声解説や字幕を追加します。また、動画の内容を説明するテキストも提供します。

グラフィックや図表

• グラフやインフォグラフィックに対して、図表の内容を言葉で説明したテキストを提供します。

CAPTCHA

• CAPTCHA（人間とロボットを区別するためのテスト）を使用する場合、視覚以外の方法（例：音声CAPTCHAや代替メカニズム）を用意します。

具体例

画像

<img src="shirt.jpg" alt="青いシャツ">

• ユーザーが視覚的に画像を認識できなくても、スクリーンリーダーが代替テキストを読み上げることで内容を把握可能。

音声

• 「音声ファイルの内容をこちらのテキストで確認できます」というリンクを提供。

動画

• 字幕付き動画や、ナレーションで映像の内容を説明。

装飾画像

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

• 装飾目的の画像には空のalt属性を設定。

利点

スクリーンリーダーユーザーの理解支援

• 非テキストコンテンツに対して代替テキストや説明が提供されることで、視覚的な情報が伝わり、視覚に依存せずに内容を理解できます。

多様な利用環境への対応

• 一部のユーザーはテキスト以外のコンテンツを利用できないため、代替情報があることでコンテンツのアクセス性が向上します。

SEO（検索エンジン最適化）への貢献

• 画像に対して適切な代替テキストが提供されることで、検索エンジンも内容を認識しやすくなり、結果としてSEOにも役立ちます。

この基準を満たすことは、情報を視覚や聴覚に頼らずに届けるために不可欠であり、特にスクリーンリーダーを使うユーザーにとって非常に重要です。

一覧に戻る