「スクリーン リーダーに 1 日 40 回耳元で読み上げてもらいたいファイル名はどれですか?」少しばかげた質問ですが、意味のある画像が alt="image1.jpg" のまま、またはさらに悪いことに、代替テキストがまったくない場合に、まさにこのことが起こります。この記事は、単に存在するだけでなく、実際に役立つ代替テキストを作成するための実践的なガイドです。
要するに、このガイドの内容
不適切な代替テキストが、代替テキストの欠落とほぼ同じくらい有害である理由
WCAG 1.1.1 では、すべての非テキスト コンテンツには代替テキストが必要ですが、正式な要件は半分にすぎません。 「image1.jpg」、「image」、または「logo」は技術的には要件を満たしていますが (alt 属性があります)、実際の情報は伝えません。 「image...image...image23.png」という文字列を聞いたスクリーン リーダー ユーザーは、一連の空のフレームを見ている晴眼者のユーザーと同じようにイライラします。
適切な代替テキストの書き方
指針: 表示されている内容をそのまま説明するのではなく、画像が表示されるコンテキストで画像のメッセージを説明します。チームミーティングでテーブルを囲む人々の写真をコラボレーションに関する記事に添付する場合、「人々の写真」ではなく、「テーブルを囲んで一緒に作業するチーム」と表示される可能性があります。チャートまたはグラフの場合は、そのチャートが示すポイントを説明します。「第 3 四半期の売上の 40% 増加を示す棒グラフ」は、「棒グラフ」よりも大幅に優れています。
- 短く目的があります。通常は 1 ～ 2 文で十分です。視覚的な詳細をすべて説明する必要はありません。
- 「の画像」または「画像」をスキップします。スクリーン リーダーはすでに画像であることを通知しているため、繰り返す必要はありません。
- 周囲のテキストを考慮してください。同じ画像でも、異なるコンテキストでは異なる代替テキストが取得される可能性があります。
代替テキストを意図的に空のままにする場合
すべての画像に説明が必要なわけではありません。純粋に装飾的な画像（グラフィックの分割線、背景イラスト、近くのテキストを繰り返すだけのアイコン）は、次のタグを付けるのが最適です。alt=""(空の代替テキスト、欠落していない) ため、スクリーン リーダーはそれらを完全にスキップします。 「欠落」と「意図的に空」の違いは重要です。欠落はエラーのように聞こえるか、ファイル名が読み上げられます。意図的に空にする場合は、単に黙ってスキップします。
💡 実践的なヒント
簡単なテスト: ページから画像を完全に削除した場合、画像が表示されないユーザーには何も欠けているでしょうか?そうでない場合は、おそらく装飾的であり、空の alt に適しています。
複雑なチャートや図の扱い方
複雑なデータ チャート、図解された比較表、または複数の情報レイヤーを含むインフォグラフィックの場合、短い代替テキストでは十分ではありません。伝えたい情報が多すぎます。解決策: 一般的なトピックを説明する短い代替テキストと、その横に (alt 属性だけでなく画像を囲む通常のテキスト内) 重要なデータのより詳細な説明、またはスクリーン リーダーがナビゲートできる同等のデータ テーブル。
サイトにどの代替テキストが不足しているか、問題があるかわかりませんか?
私たちのツールは、サイト上のすべてのドキュメントから代替テキストのない画像を検索し、優先度に従ってフラグを付けます。
ドキュメントを無料でアクセスできるようにする ←