イメージの代替テキストを使用するガイド

今日、多くの開発者はalt 画像の属性.私たちのほとんどは、それがウェブページをアクセス可能にする1つの方法であるということを知っていることができます、しかし、我々が本当にそれを利用するとき、代わりのテキストの範囲を理解します、それを使う方法.私は、アクセシビリティ擁護者であることに1つのステップであるので、この記事では、詳細にALT属性について説明しています.
ここで正直な告白は、私が本当にアクセシビリティに関与する前に、私はウェブ上のすべてのイメージの記述的なテキストを持つことの重要性を理解していませんでした.私はほとんどの罪を残して有罪ですalt 属性空白.私がよりよく知っている今、私はそれが誰にでも得られるこの新しい知識を共有するためにこの記事を書いている理由の1つである自分自身にそれを保つことができません.

代替テキストとは

別のテキストまたはAltテキストとして、それは、ウェブ上のイメージのための書かれたテキスト記述です.
ALTテキストは本当に便利で、これらのいずれかのシナリオで便利です.

スクリーンリーダなどの支援技術を用いた人.

画像を持っている人々は貧しいインターネット接続のために自分のデバイス上でオフになった.

これは、WebページのSEOを向上させることができます.

イメージのための良いaltテキストを書くことは非常に重要です、そして、置かれてはいけません.Webコンテンツアクセシビリティガイドラインの重要性を示すにはWCAG 2.1 それが本当に重要であることを示す最初の規則があります.

Guideline 1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

Altテキストの使い方

一般的に、Webページにイメージを追加するときに、イメージを記述するためにHTMLイメージ要素を使用して、イメージタグのAlt属性を使用してイメージの説明を行います.以下に例を示します:

<img src="./burger.png" alt="A girl holding a hamburger.">

上記のalt属性は、画像のコンテキストを記述します.この場合、スクリーンリーダーがこのページで使用されている場合.代わりにaltテキストを読んで、ユーザは使用するイメージの非常に記述的な文脈を取得します.
ALTテキストを書くときに考慮する他のことがあります.これはイメージの記述的な代替テキストを書くだけのプライマーです.私は重要な概念をウェブページ上の画像を使用するときの注意を取るつもりです.
ウェブ上のすべてのイメージは、イメージの機能を記述する代わりのテキストを持たなければなりません.
ウェブ上でイメージを使用するための7つの概念があります.

有益なイメージ:有益なイメージは、情報または概念の断片を記述するイメージです.説明された情報は、感情/印象から、リンクで使用されるラベルまたはファイル形式への何でもありえます.有益なイメージのためのテキスト代替は、イメージの意味または内容を伝えるべきです.以下に例を示します:

<img src="./girl.png" alt="A girl smiling happily.">

上記のイメージは女の子の感情を示します.したがって、アイデアは、代替情報をこの情報を伝えることです.

装飾的なイメージ:装飾的なイメージは、必ずしも意味または情報を伝えないイメージです.これらのイメージは、内容記述が既に提供されているか、またはイメージがスタイリング目的のために使われるので、主にページの内容に情報を付加しない.したがって、alt 属性が指定されていないか、空のままである(alt="") . この理由は、スクリーンリーダのような補助技術を冗長なテキストをユーザに読み込むことを避けることです.リーブalt いくつかのスクリーン読者が代わりにイメージのファイル名を発表するので、完全に属性は良い習慣でありません.以下に例を示します.

<img src="./line.png" alt="">

機能的なイメージ:機能的なイメージは、イメージの情報を伝えるだけでなく有益なイメージよりむしろ取られる行動を運ぶイメージです.それらはほとんどリンク、ボタン、および他の対話的な要素で使用されます.代替テキストは、イメージの説明よりむしろ行動を伝えなければなりません.例えば、別のテキストを言うsearch list の代わりにa microscope or print page の代わりにimage of a printer . 空を持つalt 属性はあまりにも有用ではありませんので、ユーザーが画面上の読者を使用して、その時点でアクションを取るようにサイトをナビゲートする通知することができます.以下に例を示します:

<input type="image" src="search.png" alt="search this page">

テキストのイメージ:名前のようなテキストのイメージは、イメージで示されるテキストを記述しています.これはほとんどの現代のブラウザで使用されるので、私たちはテキストを表現するためにイメージを使用するのではなく、私たちがそれを望む方法を見るためにCSSをスタイルテキストに使用することができます.テキストを表示するために画像の代わりにテキストを使用すると、テキストを簡単にスケーリングまたは変更することができますとしてより多くの利点がありますが、明快さを失うことなく画像が、テキストが歪んで、画質を失う.利用できる唯一の可能なオプションがテキストを記述するためにイメージを使用することである場合、代替テキストはまた、イメージにテキストを含まなければなりません.例えば、

<img src="text.png" alt="For sale: baby shoes, never worn.">

画像のグループ:画像のこのタイプは、情報の単一の部分を伝えるために一緒にグループ化されているイメージを表します.例は、評価を表すために心臓アイコンのコレクションでありえます.各イメージの説明テキストを追加するとき、イメージの1つだけのAlt属性は、画像のグループの説明を持つ必要がありますが、他の画像は空ですalt 属性はスクリーンリーダによって無視される.以下に例を示します:

<img src="full-heart.png" alt="1.5 of 3 hearts">
<img src="half-heart.png" alt="">
<img src="empty-heart.png" alt="">

複雑なイメージ:複雑なイメージは、情報の非常に詳細でかなりの量を伝えます.これらのタイプの画像は、グラフから棒グラフ、地図、場所、図表、イラストなどの範囲にあります.最初の画像の短い説明です.第2は、画像によって伝えられる情報を十分に説明するためのイメージの長い説明です.以下に例を示します:

<figure role="group">
  <img src="bar.png" alt="Bar chart showing population of animals in SA and LA zoos.">
  <figcaption>
    <p>The bar chart shows a population of the animals in South African Zoo compared to Los Angelos Zoo. With the number of giraffes, monkeys and orangutans compared in both zoos.</p>
  </figcaption>
</figure>

イメージマップ:イメージマップは様々な地域に分けられたイメージですarea 要素.例は組織図でありえます.イメージマップを使用して作成されます<img> and <map> 要素.テキストの代替はimg 要素とそれぞれarea 要素.以下の例では、組織内の個人を識別するために各ノードを表す組織図を示します.

<img src="orgchart.png"
     alt="Board of directors and related staff: "
     usemap="#Map">
<map name="Map" id="Map">
    <area
        shape="rect"
        coords="176,14,323,58"
        href="…"
        alt="Davy Jones: Chairman"
    >
 ...
</map>

これらのすべてのイメージの種類が表示されると、どのように、どのテキストを使用するかを知っていますか?The Alt decision tree ガイドは、その決定を支援するために提供されます.それで、疑わしいとき、ALT決定木を使用してください.

ヒントは、代替テキストを書くときに注意してください

ALTテキストを終了します.これは、他のコンテンツを読む前に、画面の読者のビットを一時停止します.これは、ユーザーのための経験を向上させます.

ALTテキストを起動しないimage of or photo of .

画像を記述する際には特に注意してください.

SEOの目的のためのキーワードの詰め込みを避けてください.

行区切りを追加しないalt テキスト.これは、画面リーダーがイメージを記述しているときに奇妙な一時停止を引き起こす可能性があります.

空を使うalt 属性alt="" 装飾的なイメージのために.例えば、ここで使用される文脈を理解しているので、ウェブサイトの背景画像は必要ありません.

結論

この記事では、私はイメージのために代替テキストを使用する利点と異なる文脈で彼らを利用する方法について詳細に説明しました.私はあなたがこれを読んで満足しており、したがって私の質問は、これを読むだけでなく、それを実践することを学ぶことではない.私は、ウェブが誰からでも集団的な努力でよりアクセス可能になると思っています.