画像

アクセス可能な画像は、一見シンプルなトピックに見えるかもしれません。画像に「代替テキスト」を追加すれば完了です。しかし、このトピックは一部の人たちが思うほど 微妙になっています。このセクションでは、以下の事項を確認します。

• コードを更新して画像にアクセスできるようにする方法。
• ユーザーと共有する必要がある情報および共有場所
• 障がいのあるユーザーをサポートするために画像を改善するその他の方法。

画像の目的とコンテキスト

コードを 1 行も記述する前に、まず画像のポイントと使用方法を検討する必要があります。画像の目的とコンテキストについて自問することで、スクリーン リーダーなどの支援技術（AT）を使用して、人に情報を伝える最適な方法を決定できます。

次の点について考えてみましょう。

• 画像は、機能やページのコンテキストを理解するために不可欠ですか。
• 画像ではどのような情報を伝えようとしていますか？
• 画像はシンプルですか、それとも複雑ですか？
• 画像はユーザーの感情を引き出したり、行動を促したりしますか？
• それとも、画像ははっきりした目で見えるだけで、目的は割り当てられていませんか？

画像ディシジョン ツリーなどの視覚的なフローチャートは、画像がどのカテゴリに属しているかを判断するのに役立ちます。

ブラウザの拡張機能やその他の方法を使用して、サイトまたはウェブアプリの画像を非表示にしてみてください。そのうえで、自分のコンテンツが理解できているかどうかを自問しましょう。 イエスの場合は、装飾的な画像である可能性が高いと言えます。そうでない場合、なんらかの形で情報が提供され、コンテキスト的に必要です。イメージの目的を決定したら、最も正確なコーディング方法を決定できます。

装飾的な画像

装飾画像は、ユーザーがコンテキストをよりよく理解できるようにするコンテキストまたは情報を追加しない視覚要素です。装飾的な画像は補足的なものであり 中身ではなくスタイルを表現できます

装飾的な画像であると判断した場合は、その画像をプログラムによって AT に対して非表示にする必要があります。画像を非表示にするようにプログラムすると、ページのコンテンツ、コンテキスト、アクションの理解に画像が必要ないことを AT に通知します。画像を非表示にするには、空のテキストや null の代替テキストを使用する、ARIA を適用する、CSS の背景として画像を追加するなど、多くの方法があります。装飾的な画像をユーザーに対して非表示にする方法の例を、次にいくつか示します。

alt が空または null です

空または 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> 要素を使用したシンプルな代替説明は、.jpg、.png、.svg など、参照されているファイル形式に関係なく、alt 属性を含めることで実現されます。

<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 to home」がラッパーのタイトル、画像の代替テキストが「Lovely Ladybugs for your Lady」であることがわかります。スクリーン リーダーでロゴコードを聞き取ると、ビジュアルとアクションの両方が 1 つの画像で聞こえます。

<div title="Navigate to the homepage">
   <a href="/">
      <img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"></img>
   </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 のユーザーだけでなく、認知、学習、読解障がいなどの障がいのある方にとっても適しています。この追加の画像情報をコードに埋め込まなくても、画面上に簡単に表示できればよいと言えます。

また、<img> 要素に aria-describedby 属性を追加することもできます。長い説明を含む ID に画像をプログラムでリンクできます。このメソッドにより、画像と詳しい説明の間に強い関連付けが作成されます。詳細な説明は画面上に表示することも、視覚的に非表示にすることもできますが、より多くのユーザーに表示するために表示したままにすることを検討してください。

短い代替説明文と長い説明文をグループ化するもう一つの方法は、HTML5 の <figure> 要素と <figcaption> 要素を使用することです。これらの要素は、要素を意味的にグループ化するという点で aria-describedby と同様に機能し、画像とその説明との間に強い関連付けを形成します。ARIA role="group" を追加することで、<figure> 要素のネイティブ セマンティクスをサポートしていない古いウェブブラウザとの下位互換性を確保できます。

代替テキストに関するおすすめの方法

もちろん、代替テキストを記載するだけでは不十分です。また、テキストも意味のあるものにします。たとえば、テントウムシの群れが賞のバラの茂みを噛むテントウムシの画像で、代替テキストが「虫」である場合、画像の完全なメッセージと意図が伝わるでしょうか。決してそうではありません。

代替の説明では、関連する視覚的情報をできるだけ多く取り入れ、簡潔にする必要があります。スクリーン リーダーが読み取れる文字数に制限はありませんが、通常は、読者の疲れを防ぐため、代替テキストは 150 文字以下にすることをおすすめします。画像に追加のコンテキストを追加する必要がある場合は、複雑な画像パターンのいずれかを使用するか、キャプション テキストを追加するか、メインコピーで画像の詳細を説明します。

他にも、次のような代替テキストに関するおすすめの方法があります。

• 説明に「画像」や「写真」などの語句は使用しないでください。これらのファイル形式はスクリーン リーダーによって識別されます。
• 画像に名前を付けるときは、できるだけ一貫性があり正確なものにしてください。画像名は、代替テキストがない、または無視された場合の代替テキストです。
• 英数字以外の文字（#、9、& など）は使用せず、画像名や代替テキストにはアンダースコアではなくダッシュを使用してください。
• 可能な限り適切な句読点を使用してください。これがないと、画像の説明は 1 つの長文で終わりのない連続した文章のように聞こえます。
• ロボットではなく人間のように代替テキストを記述してください。キーワードの乱用は誰にとってもメリットではありません。スクリーン リーダーを使用しているユーザーは煩わしく、検索エンジンのアルゴリズムによってペナルティが課されることになります。

理解度チェック

ARIA と HTML に関する知識の確認