アクセシビリティ対応の画像は、一見すると簡単なトピックのように思えます。画像に「代替テキスト」を追加すれば完了です。しかし、このトピックは一部の人が考えているよりも複雑です。このセクションでは、次の点について説明します。
- 画像をアクセス可能にするためにコードを更新する方法。
- ユーザーと共有すべき情報とその共有場所。
- 障がいのあるユーザーをサポートするために画像を改善するその他の方法。
画像の目的とコンテキスト
コードを 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 ユーザーに画像に関するコンテキストをより多く提供し、画像のメッセージや意図をよりよく理解できるようにします。
alt 属性を含めることで、<img> 要素に代替テキストを追加できます。これは、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 はデフォルトで SVG をスキップします。
SVG が装飾画像の場合は問題ありません。AT は意図的に無視します。ただし、SVG が情報提供を目的とした画像である場合は、ARIA role="img" を要素に追加して、AT が画像を認識できるようにします。
第 2 に、<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>
画像に説明を追加する方法の一つとして、リソースにリンクアウトしたり、ページ内の後の方にある長い説明へのジャンプリンクを提供したりする方法があります。この方法は、AT ユーザーだけでなく、認知障がい、学習障がい、読字障がいなどの障がいのあるユーザーにとっても有効です。これらのユーザーは、コードに埋め込まれた情報ではなく、画面上で追加の画像情報をすぐに利用できることでメリットを得られる可能性があります。
別の方法として、<img> 要素に aria-describedby 属性を追加することもできます。プログラムで、画像を長い説明を含む ID にリンクできます。このメソッドは、画像と完全な説明の間に強い関連付けを作成します。拡張説明は画面に表示することも、視覚的に非表示にすることもできますが、より多くのユーザーをサポートするためには、表示しておくことをおすすめします。
短い代替テキストを長い代替テキストとグループ化するもう 1 つの方法は、<figure> 要素と <figcaption> 要素を使用することです。これらの要素は、aria-describedby と同様に要素をセマンティクス的にグループ化し、画像とその説明の関連性を高めます。
ARIA role="group" を追加すると、<figure> 要素のセマンティクスをサポートしていない古いウェブブラウザとの下位互換性が確保されます。
代替テキストのベスト プラクティス
もちろん、代替テキストを含めるだけでは十分ではありません。また、テキストは意味のあるものでなければなりません。たとえば、画像が、受賞したバラの茂みの葉を食べるテントウムシの群れを表しているのに、代替テキストが「虫」とだけ書かれていた場合、画像のメッセージと意図が完全に伝わるでしょうか？絶対にありません。
代替テキストは、関連する視覚情報をできるだけ多く含み、簡潔である必要があります。スクリーン リーダーが読み取れる文字数に制限はありませんが、読み取りの疲労を避けるため、通常は代替テキストを 150 文字以下にすることが推奨されています。画像にコンテキストを追加する必要がある場合は、複雑な画像パターンを使用するか、キャプション テキストを追加するか、メインのコピーで画像をさらに説明します。
代替テキストのベスト プラクティスには、次のようなものがあります。
- スクリーン リーダーがファイル形式を識別するため、説明で「～の画像」や「～の写真」などの語句を使用しないでください。
- 画像に名前を付ける際は、できるだけ一貫性があり、正確な名前にしてください。画像名は、代替テキストがない場合や無視される場合のフォールバックです。
- 画像名や代替テキストには、英字以外の文字（#、9、& など）は使用せず、単語間にはアンダースコアではなくダッシュを使用してください。
- 可能な限り、適切な句読点を使用します。これがないと、画像の説明が長くて終わりのない文のように聞こえます。
- ロボットではなく、人間が書いたような代替テキストを作成します。キーワードの乱用は誰にとってもメリットがありません。スクリーン リーダーを使用しているユーザーは不快に感じ、検索エンジンのアルゴリズムはペナルティを科します。