web-dev-qa-db-ja.com

インフォグラフィックの代替テキストバージョンはどの程度詳細にすべきですか?

最近、インフォグラフィックに代わるアクセシブルなテキストの選択肢について同僚と議論しました。彼らが代替テキストを書いたとき、彼らは埋め込まれたテキスト自体と混合された画像で詳細に起こっていることを詳細に正確に書いた。

私の主張は、それが主な焦点であり、グラフィックがそれをサポートしているだけであり、コンテンツの理解に追加されていないため、それは画像自体のテキストのみであるべきであるということです。また、視覚に障害のあるユーザーは、少しひいきに感じるかもしれません。私はすべてのものをアクセシブルにすることに全力を尽くしていますが、このレベルまでは無意味に思えます。

インフォグラフィックの代替テキストはどの程度の詳細レベルを持つべきですか?

17
Wander

答えは、サイトをどのようにアクセスできるようにするかによって異なります。 (ヒント:本当に正当な理由がない限り、アクセス可能にする必要があります。)

WCAG 2.0アクセシビリティガイドラインの状態:

1.1.1非テキストコンテンツ:ユーザーに提示されるすべての非テキストコンテンツには、同等の目的を果たす代替テキストがありますが、下記の状況。 (レベルA)

Controls、Input:非テキストコンテンツがコントロールであるか、ユーザー入力を受け入れる場合、その目的を説明する名前が付けられます。 (ユーザー入力を受け入れるコントロールとコンテンツの追加要件については、ガイドライン4.1を参照してください。)

時間ベースのメディア:非テキストコンテンツが時間ベースのメディアである場合、代替テキストは少なくとも非テキストコンテンツの説明的な識別を提供します。 (メディアの追加要件については、ガイドライン1.2を参照してください。)

テスト:テキスト以外のコンテンツがテストまたは演習であり、テキストで提示された場合無効になる場合、代替テキストは少なくとも非テキストの説明的な識別を提供します-テキストコンテンツ。

Sensory:非テキストコンテンツが主に特定の感覚体験を生み出すことを目的としている場合、代替テキストは少なくとも非テキストコンテンツの説明的な識別を提供します。

[〜#〜] captcha [〜#〜]:非テキストコンテンツの目的が、コンテンツが人によってアクセスされていることを確認することである場合コンピュータ以外の場合は、非テキストコンテンツの目的を特定および説明する代替テキストが提供され、さまざまなタイプの感覚の出力モードを使用した代替形式のCAPTCHAが提供され、さまざまな障害に対応します。

装飾、書式設定、非表示:非テキストコンテンツが純粋な装飾である場合、視覚的な書式設定のみに使用される場合、またはユーザーに表示されない場合は、支援技術では無視できるように実装されています。

インフォグラフィックはこれらのアイテムのいずれにも該当しないため、完全なテキストによる説明を提供する必要があります。

(さて、方法実際に大きなインフォグラフィックに対してそれを行うのは別の質問です!)

10
JonW

アクセシビリティの状態に関するノルムのチタインガイド:空間的な説明を使用せずに、電話で誰かに説明するために使用する単語と一致する必要があります(例:左側、上部、他の近く)。悪いことです!)そしてそれは意図された意味を最もよく伝えます。

同じトピックのページに他の画像がある場合など、これはaltの一般的な知識に違反する場合があります。「黄色のラボの白黒画像」と「黄色のラボのカラー画像」が、「両方の代替テキストに「黄色の実験室」。

白黒の画像を参照するときに黄色のラボという用語を使用することをどのように提案できるかは、読者への練習問題として残しておきます。 ;)

10

JonWの回答 は適切なものであり、次の問題に対処しますかどうかインフォグラフィック全体に同等のテキストを提供する必要がありますが、本当の答えはないと思いますここで尋ねている質問は、その説明がどの程度詳細である必要があるか、特に、インフォグラフィックの付随的なグラフィックを説明する必要があるかどうかです。

一般的に言って、画像の代替テキストのガイドラインは、テキストはグラフィックの簡潔なテキストの意味論的同等物を提供することに焦点を当てるべきであるということです。たとえば、通常、派手にレンダリングされたテキスト(影付きの派手なフォントの "New!")である画像には、テキストのみの代替テキストがあり、レンダリングを説明していません。 VCRスタイルの再生ボタンの画像は、通常、「右向きの三角形」ではなく「再生」であり、純粋に表面的な画像の画像は、通常、空のaltテキストを持っています。

画像に適切なALTテキストを作成する方法の詳細については、 this(WebAIM) およびその他のさまざまなサイトを参照してください。

これらのガイドラインをインフォグラフィックに適用すると、グラフィックが実際に(a)テキストで伝えられる情報に追加されている(b)追加の情報を伝えている場合にのみ、グラフィックを説明する必要があります。

つまり、すぐに「テーマ」グラフィック要素を無視できます。

グラフィック要素がテキストに関して冗長である場合は、それも無視できる場合があります。たとえば、「インフォグラフィックの80%が興味をそそらない」など、80%がどのように見えるかを示す円グラフがあるテキストの場合、円グラフはテキストに対して冗長であるため、個別に説明する必要はありません。 :テキストはすでにその情報をカバーしています。 (ただし、グラフィックにより、目の見えるユーザーが特定の点に特に重点を置いていると思われる場合は、テキストにもこれが反映されていることを確認してください。)

私がこれまでに見たインフォグラフィックから、それらのグラフィックのほとんどはこれらの最初の2つのカテゴリのいずれかに分類される傾向があり、視覚的な魅力を追加しますが、セマンティック情報を追加しないため、追加の必要はありません。テキスト。

インフォグラフィックのトリッキーなケースは、グラフィックスがテキストだけでは伝えられない情報を実際に伝えているケースです。これらは、折れ線グラフまたは比較チャートである傾向があり、目を向けた情報を伝える独自のテキストによる説明が必要です。ユーザーが表示されます。これは、チャートの目標を考慮に入れ、そのコンテキストで意味のある説明を考え出す必要がある1つのケースです。たとえば、折れ線グラフを正確な一連の数値として説明するのではなく、「2001年に売上高がピークに達し、2年後には半減する」という点を説明します。

または、簡単に言えば、これに対するあなたの見方(同僚の見解に対して)は正しいアプローチです。そして、価値があるのは、同僚の詳細レベルが適切な1つの場所は、特定のインフォグラフィック自体のレイアウトについて実際に議論しているデザインブログサイトなどにインフォグラフィックが表示されていた場合です。コンテキストは、方法の点で重要です。画像について説明してください。ただし、通常の場合、テキストはプレゼンテーションではなく、インフォグラフィックのメッセージに固執する必要があります。

6
BrendanMcK

重要なのは、簡潔にすることですが、埋め込みテキストの意味が少しも減らされたり変更されたりしないように、十分なコンテキスト情報を提供することです。たとえば、これは "a11y memes" Tumblrブログ の画像です。

enter image description here

キャプションは、埋め込みテキストのアクセス可能なバージョンを提供するだけではありません。また、どのミームが使用されているかをユーザーに通知します。キャプションに埋め込みテキストが含まれているだけの場合、コンテキストとユーモアは失われます。

追加の説明テキストを少しだけ含めることにより、埋め込まれたテキストのコンテキストが大幅に強化され、視覚障害のあるユーザーが冗談を言っていることになります。

5
aled.co

画像の代替テキストは、欠落している画像をユーザーに知らせる必要があります。画像が画面上の特定のデータ/テーブルのセットに関連している場合は、画像が属するデータのセットも参照する必要があります。画像が説明している限り、アクセス可能なユーザーは画面上の適切な場所に移動して、不足している情報を取得できます。また、画像にテキストが埋め込まれている場合、そのテキストは代替テキストに表示されます。

1
JeffH