uga.dev - A Front-end Engineer's shed

日本語訳:Images Tutorial

WAI(W3C)による代替テキストに関するチュートリアルの日本語訳。

この文書はImages Tutorial | Web Accessibility Initiative (WAI) | W3Cの日本語訳です。

正確な内容については、原文の最新版をご確認ください。

一部リンク先をサイト内類似コンテンツ、ウェブアクセシビリティ基盤委員会またはmomdo氏の管理する日本語訳に変更しています。更新日時やバージョンの違いにご注意ください。

画像には、画像が表す情報や機能を説明する代替テキストが必要です。

代替テキストがあれば、さまざまな障害を持つ人々も画像から得られる情報が利用できるようになります。このチュートリアルでは、画像の目的に基づいて適切な代替テキストを提供する方法が示されています。

意味のある画像 - Informative Images(外部サイト)※翻訳予定
概念や情報を表現する画像。通常は写真やイラストです。代替テキストは少なくとも、画像によって示される情報の要点を伝える簡単な説明であるべきです。
装飾目的の画像 - Decorative Images(外部サイト)※翻訳予定
ページを理解する上で重要な情報を伝えるものではなく、視覚的な装飾を追加することが画像の唯一の目的である場合は、空の代替テキスト(alt="") を提供してください。
機能を持つ画像 - Functional Images(外部サイト)※翻訳予定
リンクまたはボタンとして使用される画像の代替テキストは、視覚的な画像ではなく、リンクまたはボタンの機能を説明する必要があります。このような画像の例としては、印刷機能を表すプリンターアイコンや、フォームを送信するボタンなどがあげられます。
文字画像 - Images of Text(外部サイト)※翻訳予定
判読可能なテキストが画像内に含まれている場合がありますが、ロゴ画像ではない場合は画像内テキストを避けるべきです。その上で文字画像を使用する場合、代替テキストには画像と同じ文言が指定する必要があります。
グラフや図などの複雑な画像 - Complex Images(外部サイト)※翻訳予定
データや詳細な情報を伝えるために、画像で提供されるデータまたは情報と同等の完全な代替テキストを提供してください。
画像のグループ - Groups of Images(外部サイト)※翻訳予定
複数の画像で1つの情報を伝える場合、1つの画像の代替テキストでグループ全体の情報を伝える必要があります。
イメージマップ - Image Maps(外部サイト)※翻訳予定
複数のクリック可能な領域を含む画像の代替テキストは、リンクセットの全体的なコンテキストを提供する必要があります。また、個別にクリック可能な領域には、リンクの目的やリンク先を説明する代替テキストが必要です。

代替テキストは、画像の用途、コンテキスト、コンテンツに応じて著者が決定する必要があります。 たとえば、画像内の鳥の正確な種類や見た目の情報は、公園に関するWebサイトでは関連性が低く簡単に説明されるだけかもしれない一方で、鳥に特化したWebサイトでは適切な場合があります。

画像それぞれが、どのカテゴリに該当するか決定するための簡単な概要についてはAlt Decision Treeを参照してください。

どうして代替テキストは重要なの?

画像やグラフィックは、多くの人々、特に認知障害や学習障害を抱えた方々にとってコンテンツをより快適で理解しやすくします。弱視の人を含む視覚障害のある方にとってそれらは、Webコンテンツの中で自分がどのあたりを読んでいるか理解するための手がかりとしても役立つからです。

画像はWebサイトで広く使用されています。そのため、画像がアクセシブルではない場合には大きな障壁となる可能性があります。アクセシブルな画像は、次のような多くの状況で有益です。

スクリーンリーダを使用する人々
代替テキストは音声で読み上げられたり、点字として表示させたりできます。
音声入力ソフトウェアを使用する人々
ユーザは単一の音声コマンドでボタンやリンク付きの画像にフォーカスを当てることができます。
音声対応のWebサイトを閲覧する人々
代替テキストは音声で読み上げられます。
モバイルのWebユーザ
画像をオフにできます。特にデータローミングのために使われます。
検索エンジン最適化(SEO)
画像が検索エンジンでインデックスされやすくなります。