画像の効果的な Alt テキストの書き込み

Web アクセシビリティについて何か知っている人のイメージに割り当てられた代替、または ALT、本文が知っています。これは、スクリーン リーダーすることはできません画像を理解するではなく割り当てられた代替テキストを読み上げますが、です。Internet Explorer での我々 だけで画像の上にマウスを移動に表示される黄色のヒントで探してこの ALT テキストを見ることができます。他のブラウザーは （正しく） これをしないでください。代替テキストを挿入する HTML です。

src="filename.gif「img alt ="代替説明ここに行く」

しかし、確かにイメージの ALT テキストを記述するためのスキルがすることはできませんか？ちょうどそこの説明をポップアップ表示して、右に行くには良いですか？まあのようなもの。確かに、それはロケット科学ではないがいくつかのガイドラインに従う必要があります.

スペーサー イメージと ALT テキストの欠落

スペーサー イメージは、常に割り当てる null の ALT テキストや alt =""。この方法ほとんどのスクリーン リーダーはイメージを完全に無視されもその存在をアナウンスはありません。スペーサー イメージはかなりほとんどのウェブサイトを使用して目に見えないイメージです。彼らの目的は、領域、ページに作成する名前が示唆するようです。時々、それは不可能だ (高さと幅を指定する) のイメージと volià に固執することができますので、必要なビジュアル表示を作成するには、必要な余分なスペースがあります。

誰もスペーサー イメージをこの null の ALT テキストを使用します。いくつかのウェブサイトのスティックで alt =「スペーサー イメージ」。特に、10 人で行がどのように迷惑このスクリーン リーダーのユーザーはすることができます想像してください。スクリーン リーダーと言うと、「画像、スペーサー画像」10 倍の行 (スクリーン リーダーは通常言う言葉は、「画像」、その ALT テキストを読む前に） - 今では、ないに役立つ ！

ALT 属性のスペーサー画像 (おそらく他のイメージ) を他のウェブ開発者のまま。このケースでは、ほとんどのスクリーン リーダーは、ファイル名を 'newsite/images/onepixelspacer.gif' することができます読み上げます。スクリーン リーダーはこのイメージとして発表する「画像、newsite スラッシュ画像スラッシュ 1 ピクセル スペーサー ドット gif」。10 行でこれらのだったら何これのような音が想像しなさい!

行頭文字とアイコン

行頭文字とアイコンの処理では、同様にスペーサー イメージ、null の代替テキストまたは alt キーを割り当てる必要がありますので =「」。項目の一覧について各項目を進んで、空想付きの行頭文字だと思います。ALT テキスト、「行頭」各イメージには、「箇条書きイメージ」が割り当てられている場合ことを読み上げるスクリーン リーダー リストの各項目の前に、そのビットを長くするリストを取ることによって。

アイコンは、通常のリンクを補完するために使用する必要がありますもが割り当てられます alt =""。リンク テキストの横にアイコンを配置、多くのウェブサイトは、リンク テキスト、アイコンの代替テキストとして使用します。スクリーン リーダー最初この ALT テキストをクリックし、[リンク テキストは、[リンクの 2 回、だと思いますので、明らかに必要ではない発表します。

(理想的には、箇条書きとアイコンの背景画像を CSS ドキュメントとして呼び出す必要があります - これは、HTML ドキュメントから完全に削除したがって、ALT の説明の必要性を削除します。)

装飾的な画像

装飾的なイメージもする必要がありますが割り当てられます null の代替テキストまたは alt =""。イメージが純粋な目キャンディーの場合もそれがあるし、その存在を通知されては、単に、騒音公害に追加します知っているスクリーン リーダーのユーザーの必要はありません。

逆に、ブランドのアイデンティティのあなたのサイト上の画像を作成して、スクリーン リーダーのユーザーから隠すことによって、このグループのユーザーの同じ経験否定するいると主張することができます。アクセシビリティの専門家、元の引数に賛成する傾向があるが、確かに、後者は有効なケースもあります。

ナビゲーション ＆ テキスト内の画像を埋め込む

空想のテキストを必要とするナビゲーション メニュー イメージ内のテキストを埋め込むには選択の余地があります。この状況では、ALT テキストにイメージを展開するには使用しないでください。いかなる状況下で 'あなたはすべてを支援するように設計されてすべて当社の素晴らしいサービスについて読む' ALT テキストが言う必要があります。メニュー項目によると、'サービス' [ALT テキスト 'サービス' が言う必要があります。代替テキストは、常にイメージの内容を記述する必要があり、逐語テキストを繰り返す必要があります。上のナビゲーションを展開する場合などこの例では、title 属性使用することができます。

同じイメージ内で埋め込まれている他の任意のテキストを適用します。ALT テキストを単に繰り返す逐語、テキスト、イメージに含まれます。

(使用されているフォントが特に一意である限り、それはしばしば画像 - 高度なナビゲーション内のテキストを埋め込むには必要ではありません・背景効果は CSS を今達成することができます。

会社のロゴ

Web サイトは、どのように彼らにロゴの ALT テキストの適用で異なる傾向があります。いくつかと言う、'会社名' その他 '会社名ロゴ'、他の 'ホーム' に戻るイメージ (通常、リンクはホームページに戻る) の機能について説明します。ALT テキストする必要があります常に説明、イメージの内容これを覚えて、最初の例では、alt =「会社名」、おそらく最高です。ロゴがホームページに戻るリンクの場合、この効果的にタイトルの札を伝達できます。

結論

効果的な ALT テキストの書き込みには難しいのではないです。場合は、装飾用の画像、null の代替テキストまたは alt キー =」「通常する必要があります使用 - は、これまで、ALT 属性を省略します。画像にテキストが含まれる場合このテキストは、逐語は ALT テキストが単に繰り返す必要があります。覚えて、ALT テキストの内容の画像と説明する必要があります。

またも短いとできるだけ簡潔な代替テキストを保つようにしてください。Web ページには、スクリーン リーダーで聞いて体験サーフィン痛みを伴う肥大化し、不要な ALT テキストをスクリーン リーダーのユーザーはしないように従来の方法よりも時間がかかります。