画像

「アクセシビリティの高い画像」は一見単純に思えるかもしれませんが、 「代替テキスト」変換して完了ですしかし このトピックはもっと複雑なので 多くの人が思うかもしれませんこのセクションでは、次の内容を確認します。

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

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

コードを 1 行も記述する前に、まず 使用方法を定義します。この点について自問してみると、 画像の用途とコンテキストを確認することで、 ユーザーに付与できます。 支援技術（AT） スクリーン リーダーなどの機能です。

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

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

ビジュアル フローチャート（例: 画像のディシジョン ツリー 画像がどのカテゴリに属するかを判断するのに役立ちます。

ブラウザの拡張機能または拡張機能を使用して、サイトまたはウェブアプリ上の画像を非表示にしてみてください。 使用できます。「残りのコンテンツが理解できているか」を検討してください。 答えが「はい」の場合、装飾画像である可能性が高くなります。そうでない場合、画像は 文脈的に必要であるという点で有益な情報であることが必要です。一旦 最も正確なコードの記述方法を判断できます。 できます。

装飾的な画像

装飾画像とは、 背景となるコンテキストや情報を一切追加しない コンテキストをより深く理解できます。装飾的な画像は補助的なもの 本質ではなくスタイルを提供する 可能性があります

画像を装飾と判断する場合は、プログラムで画像を非表示にする必要がある ダウンロードされます。画像を隠すようにプログラムすると、その画像が AT に ページのコンテンツ、コンテキスト、アクションを理解するために画像は必要ありません。そこで、 画像を非表示にするには多くの方法があります。たとえば、空白または null の代替テキストを使用する ARIA の適用 CSS 背景として画像を追加します。以下は、スペースを非表示にする方法の ダウンロードします。

空または null: alt

空または null 代替テキスト属性が欠落している代替テキスト属性と異なる あります。代替テキスト属性が指定されていない場合、AT は ファイル名や周囲のコンテンツを表示して、ユーザーに詳細情報を提供します。 説明します。

ロールを presentation または none に設定しました

ロールが presentation または none に設定されている 要素のセマンティクスをユーザー補助から公開しないようにする 表示されます。当面の間、aria-hidden= "true" 要素全体とその子がすべて Accessibility 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 が無視します。 意図したとおりに処理します。しかし、参考になる画像がある場合は、ARIA role="img" AT が画像を画像として認識するにはパターンに追加する必要があります。

次に、<svg> 要素は alt 属性を使用しないため、 異なるコーディング方法を使用して、 を使用して、情報を示す画像に代替の説明文を追加できます。

  <svg role="img"...>
     <title>Cartoon drawing of a red, black, and gray ladybug.</title>
  </svg>

機能イメージ

機能イメージとは、 関連付けられます。正常に機能する画像の例として、 虫メガネ（検索ボタンとして使用）やソーシャル メディアに誘導したとしても、 別のウェブサイトやアプリに誘導するアイコンです。

情報提供画像と同様に、機能画像には代替機能を含める必要があります 説明を使用して、すべてのユーザーに目的を伝えます。説明的な画像とは異なり 各機能イメージは、イメージのアクションを記述する必要があります。 サポートします。

ロゴの例では、画像は有益かつ実用的です。 情報を伝達し、リンクとして機能する画像。このような場合は 各要素に代替説明文を追加することはできますが、 要件があります

代替説明文を画像に追加する方法の一つとして、視覚的に非表示にする方法があります。 あります。この方法を使用した場合、次の理由により、テキストはスクリーン リーダーで読み上げられます。 DOM には表示されていますが、カスタム CSS のサポートにより視覚的に非表示になっています。

コード スニペットを見ると、ホームページに移動すると、は ラッパーのタイトル、画像の代替テキストは「Lovely Ladybugs for your 芝生。」スクリーン リーダーでロゴコードを聞くと、 伝えられるアクションを 1 つの画像で表現します。

<div title="Navigate to the homepage">
   <a href="/">
      <img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"></img>
   </a>
</div>

複雑な画像

複雑な画像になることが多い 装飾的、情報的、または詳細な説明よりも 見てみましょう。短いものと長いものの両方が必要 description を使用してメッセージの全文を記述します。複雑な画像にはインフォグラフィックや 地図、グラフ/チャート、複雑なイラストなどが必要です。もう一つは 使用できる場合、代替手法を 説明を追加しましょう。

<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 のユーザーだけでなく 障がい（認知、学習、読書など） 追加の画像を表示することでメリットを得られる可能性がある 画面に表示されるようになりました。

もう 1 つの方法は、aria-describedby 属性を <img> 要素。画像を含む ID にイメージをプログラムでリンクできます。 作成しますこの方法では、画像と 説明全文が表示されます拡張された説明は 非表示にすることも、おすすめすることもできますが、 できます。

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

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

もちろん、代替テキストを含めるだけでは不十分です。また、テキストは あります。たとえば、テントウムシの群れが食べ物を噛んでいる画像であれば、 あなたの代替テキストは「虫」です。 画像のメッセージと意図を正確に伝えるにはどうすればよいでしょうか。全然ちがうよ。

代わりの説明文は、可能な限り関連性の高い視覚的情報を取り込む必要があります 簡潔さを心掛けてください。使用できる文字数に制限はありませんが、 読み上げることができるため、通常、代替テキストは 150 文字（全角 75 文字）以内にしてください。フィルタ条件として 複雑な画像パターンの一つを使用して メインコピーで画像の詳細な説明を付けることもできます。

必要に応じて代わりのテキストを プラクティスの例は次のとおりです。

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

理解度をチェックする

ARIA と HTML に関する知識をテストする