アクセシブルな画像は、一見すると簡単なトピックのように思えます。画像に「代替テキスト」を追加すれば完了です。しかし、このトピックは一部の人が考えているよりも複雑です。このセクションでは、次の点について説明します。
- 画像をアクセシブルにするためにコードを更新する方法。
- ユーザーと共有する必要がある情報とその共有場所。
- 障がいのある方をサポートするために画像を改善するその他の方法。
画像の目的とコンテキスト
コードを 1 行も記述する前に、画像の目的、配置場所、使用方法について考えてください。これらの質問に答えることで、 スクリーン リーダーなどの 支援技術（AT）を使用しているユーザーに情報を伝える最適な方法を判断できます。
次のような質問を自問自答してください。
- 画像は、機能やページのコンテキストを理解するうえで不可欠ですか？
- 画像はどのような情報を伝えようとしていますか？
- 画像はシンプルですか、複雑ですか？
- 画像は感情を引き出したり、ユーザーに行動を促したりしますか？
- それとも、画像は単なる視覚的な「アイキャッチ」で、実際の目的はありませんか？
画像決定ツリーなどの視覚的なフローチャートは、画像がどのカテゴリに属するかを判断するのに役立ちます。
ブラウザ拡張機能やその他の方法を使用して、サイトやウェブアプリの画像を非表示にしてみてください。次に、「残りのコンテンツを理解できますか？」と自問自答します。 答えが「はい」の場合は、装飾画像である可能性が高いです。そうでない場合、画像は何らかの形で情報を提供しており、コンテキスト上必要です。画像の目的を特定したら、それをコーディングする最も正確な方法を判断できます。
装飾画像
装飾画像は、ユーザーがコンテキストをよりよく理解できるようにする追加のコンテキストや情報を提供しない 視覚要素です。装飾画像は補足的なものであり、実質的な内容ではなくスタイルを提供することがあります。
画像が装飾画像であると判断した場合は、AT からプログラムで非表示にする必要があります。画像を非表示にするようにプログラムすると、AT に、ページのコンテンツ、コンテキスト、アクションを理解するために画像は必要ないことが通知されます。画像を非表示にする方法はたくさんあります。たとえば、空または null の代替テキストを使用する、ARIA を適用する、画像を CSS の背景として追加するなどです。装飾画像をユーザーに非表示にする方法をいくつかご紹介します。
空または null の alt
空または null の代替テキスト属性は、代替テキスト属性がない場合とは異なります。代替テキスト属性がない場合、AT はファイル名や周囲のコンテンツを読み上げて、画像に関する詳細情報をユーザーに提供することがあります。
ロールが presentation または none に設定されている
ロールが
presentation または none
に設定されている場合、要素のセマンティクスはアクセシビリティ ツリーに公開されません。
一方、aria-hidden= "true"
要素全体とそのすべての子を
アクセシビリティ API から削除します。
<!-- All of these choices lead to the same result. -->
<img src=".../Ladybug.jpg" role="presentation">
<img src=".../Ladybug.jpg" role="none">
<img src=".../Ladybug.jpg" aria-hidden="true">
aria-hidden は、非表示にしたくない要素を非表示にする可能性があるため、注意して使用してください。
CSS の画像
CSS で背景画像を追加すると、スクリーン リーダーは画像ファイルを検出できません。この方法を適用する前に、画像を非表示にしたいことを確認してください。
情報提供画像
情報提供画像は、コンセプト、アイデア、感情を伝える画像です。情報提供画像には、現実世界のオブジェクトの写真、重要なアイコン、簡単な図、テキストの画像などがあります。
画像が情報提供画像の場合は、画像の目的を説明する プログラムによる代替テキスト を含める必要があります。画像の代替説明（「代替テキスト」と略されることが多い）は、AT ユーザーに画像に関するコンテキストを提供し、画像のメッセージや意図をよりよく理解できるようにします。
<img> 要素
の代替説明は、alt 属性を含めることで追加されます。参照先のファイルの種類に関係なく、.jpg、.png、.svg などです。
<img src=".../Ladybug_Swarm.jpg" alt="A swarm of red ladybugs is resting on the leaves of my prize rose bush.">
ただし、<svg> 要素をインラインで使用する場合は、アクセシビリティに注意する必要があります。
まず、SVG はセマンティックにコーディングされているため、AT はデフォルトでスキップします。
装飾画像の場合は問題ありません。AT は意図したとおりに無視します。ただし、情報提供画像の場合は、AT が画像として認識できるように、ARIA role="img" をパターンに追加する必要があります。
次に、<svg> 要素は alt 属性を使用しないため、
別のコーディング方法 を使用して、情報提供画像に代替説明を追加する必要があります。
<svg role="img" ...>
<title>Cartoon drawing of a red, black, and gray ladybug.</title>
</svg>
機能画像
機能画像は アクションに関連付けられています。機能画像の例としては、ホームページにリンクするロゴ、検索ボタンとして使用される虫眼鏡、別のウェブサイトやアプリに移動するソーシャル メディア アイコンなどがあります。
情報提供画像と同様に、機能画像には、その目的をすべてのユーザーに知らせるための代替説明を含める必要があります。情報提供画像とは異なり、各機能画像では、視覚的な側面ではなく、画像のアクションを説明する必要があります。
ロゴの例では、画像は情報提供画像とアクション可能な画像の両方です。情報を伝える画像であり、リンクとして機能します。このような場合は、各要素に代替説明を追加できますが、必須ではありません。
画像に代替説明を追加する方法の 1 つは、視覚的に非表示のテキストを使用することです。この方法を使用すると、テキストは DOM 内にあるためスクリーン リーダーで読み上げられますが、カスタム CSS を使用して視覚的に非表示になります。
コード スニペットからわかるように、「Navigate to the homepage」はラッパーのタイトルで、画像の代替テキストは「Lovely Ladybugs for your Lawn」です。 スクリーン リーダーでロゴコードを聞くと、1 つの画像で伝わるビジュアルとアクションの両方が聞こえます。
<div title="Navigate to the homepage">
<a href="/">
<img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"/>
</a>
</div>
複雑な画像
複雑な画像は、装飾画像、情報提供画像、または 機能画像よりも多くの説明が必要になることがよくあります。メッセージ全体を伝えるには、短い代替説明と長い代替説明の両方が必要です。複雑な画像には、インフォグラフィック、地図、グラフ、複雑なイラストなどがあります。
他の種類の画像と同様に、複雑な画像に代替説明を追加する方法はいくつかあります。
<img src=".../Ladybug_Anatomy.svg" alt="Diagram of the anatomy of a ladybug.">
<a href="ladybug-science.html">Learn more about the anatomy of a ladybug</a>
画像に追加の説明を加える方法の 1 つは、リソースにリンクするか、ページの後で長い説明へのジャンプリンクを提供することです。この方法は、AT ユーザーだけでなく、認知、学習、読書に障がいのある方にも適しています。コードに埋め込まれているのではなく、画面上でこの追加の画像情報をすぐに利用できると便利です。
もう 1 つの方法は、aria-describedby 属性を
<img> 要素に追加することです。画像と長い説明を含む ID をプログラムでリンクできます。この方法では、画像と完全な説明が強く関連付けられます。拡張説明は画面に表示することも、視覚的に非表示にすることもできますが、より多くのユーザーをサポートするために表示しておくことをおすすめします。
短い代替説明を長い代替説明とグループ化するもう 1 つの方法は、
と <figcaption> 要素を使用することです。<figure>これらの要素は aria-describedby と同様に機能し、要素をセマンティックにグループ化して、画像とその説明の関連性を高めます。
ARIA role="group" を追加すると、<figure> 要素のセマンティクスをサポートしていない古いウェブ
ブラウザとの下位互換性が確保されます。
代替テキストのベスト プラクティス
もちろん、代替テキストを含めるだけでは十分ではありません。テキストも意味のあるものでなければなりません。たとえば、画像が、受賞したバラの茂みの葉を噛んでいるてんとう虫の群れに関するもので、代替テキストが「虫」と書かれている場合、画像のメッセージと意図を完全に伝えることができますか？絶対にできません。
代替説明では、関連する視覚情報をできるだけ多くキャプチャし、簡潔にする必要があります。スクリーン リーダーが読み取れる文字数に制限はありませんが、読み取りの疲労を避けるために、代替テキストを 150 文字以下にすることをおすすめします。画像にコンテキストを追加する必要がある場合は、複雑な画像パターンを使用するか、キャプション テキストを追加するか、メインコピーで画像をさらに説明します。
代替テキストに関するその他のベスト プラクティスは次のとおりです。
- スクリーン リーダーがこれらのファイルの種類を識別するため、「画像」や「写真」などの単語を説明に使用しないでください。
- 画像に名前を付ける際は、できるだけ一貫性があり、正確にしてください。代替テキストがない場合や無視される場合、画像名はフォールバックとなります。
- 英数字以外の文字（#、9、& など）は使用しないでください。画像名や代替テキストでは、アンダースコアではなく単語間にダッシュを使用してください。
- 可能な限り適切な句読点を使用してください。句読点がないと、画像の説明は 1 つの長い文のように聞こえます。
- ロボットではなく人間のように代替テキストを作成します。キーワードの乱用は誰にもメリットがありません。スクリーン リーダーを使用しているユーザーは迷惑に感じ、検索エンジンのアルゴリズムによってペナルティが科せられます。