Non-text Content1.1.1 非テキストコンテンツ（レベルA）
利用者に提示されるすべての非テキストコンテンツには、同等の目的を果たすテキストによる代替が提供されている。
出典：WAIC. “
達成基準 1.1.1 を理解する
” WCAG 2.0 解説書（参照2024年6月1日）
概要
ウェブページ上のすべての非テキストコンテンツ（画像、グラフィック、チャートなど）に対して、テキストによる代替情報を提供することを求めています。これにより、視覚障害を持つユーザーやテキストベースのブラウザを使用するユーザーもコンテンツを理解し、利用できるようにすることが目的です。
このページでは、ウェブサイト制作でよく直面する課題に対して、基本的で取り組みやすい方法を紹介しています。
ただし、他にも対処すべき状況や多くの手段があり、具体的な状況に応じて最適な方法を選ぶことが大切です。
課題に対する実践的な方法
画像の代替テキスト（alt属性）
すべての画像には、内容や目的を説明する適切な代替テキストを提供します。
装飾目的の画像には空のalt属性（alt=””）を使用し、支援技術によって無視されるようにします。
<img src="example.jpg" alt="美しい夕日の写真"><img src="decorative.jpg" alt="">チャートやグラフの代替テキスト
チャートやグラフには、データの要約や主要なポイントを説明するテキストを提供します。
長い説明が必要な場合は、簡潔なalt属性と詳細な説明をキャプションや本文で補足することを検討します。
<img src="chart.png" alt="2023年の売上高のグラフ">
<p>このグラフは、2023年の売上高の変動を示しています。売上は1月から6月までに30%増加しました。主要なポイントは右記の通りです。1月: 100万円、2月: 120万円、3月: 140万円、4月: 160万円、5月: 180万円、6月: 200万円</p>図やイラストの代替テキスト
図やイラストには、視覚的に伝えたい情報を説明するテキストを提供します。ただし、代替テキストが長くなる場合は、alt属性に簡潔な説明を記載し、詳細な情報は本文やキャプションで補足することを検討します。
<img src="diagram.png" alt="ウェブサイトのホームページ構造を示す図。">
<p>トップページにはナビゲーションバーがあり、ロゴ、メインメニュー、検索ボックスが含まれています。トップページからサービスページとお問い合わせページへのリンクがあります。サービスページには各サービスの詳細がリストされています。お問い合わせページには、連絡フォームと連絡先情報が含まれています。</p>アイコンやシンボルの代替テキスト
アイコンやシンボルには、その機能や意味を説明するテキストを提供します。
<img src="icon.png" alt="検索アイコン">まとめ
「1.1.1 非テキストコンテンツ」のガイドラインに従うことで、視覚障害を持つユーザーも含めたすべてのユーザーがウェブサイトの内容を理解しやすくなり、誰もが利用しやすいウェブデザインが実現できます。適切な代替テキストの提供は、アクセシビリティの基本となる重要な要素です。
WCAG 2.0とその翻訳文書の利用について
本ページの内容は、「Web Content Accessibility Guidelines (WCAG) 2.0」、「WCAG 2.0 解説書」および「WCAG 2.0 達成方法集」からの引用を含んでいます。引用された内容は、W3CおよびWAICによって公開されており、以下のクリエイティブ・コモンズライセンスに基づいて使用されています。これらのガイドラインを参考にしつつ、ウェブアクセシビリティの向上に向けた具体的な取り組みを分かりやすく説明しています。
WCAG 2.0
この作品はクリエイティブ・コモンズ 表示 4.0 国際ライセンスの下に提供されています。
WCAG 2.0 解説書及び達成方法集
この作品はWCAG 2.0 解説書及び達成方法集からの引用を含みます。翻訳はWAICによって提供されており、文書のステータスは「勧告」です。なお、この文書の正式版はあくまでW3Cのサイト内にある英語版であることにご注意ください。