今では、ほとんどのWebデザイン業界がアクセシビリティの重要性を知っています。それについて絶えず話し会い、クライアントにも真剣考えてもらうよう頼みます。 Webやユーザーに与える影響は大きいです。
しかし、細かい点が抜けていることがあります。例えば、「画像に代替テキストを使用してください」というメッセージを見ることがよくあります。これは、良いアドバイスですが理解するには少し曖昧です。
代替テキストはアクセシビリティの面で有益なのは良いことですが、本当に必要なのはコンテキストです。それらを使用する正しい方法は何でしょうか。使用してはいけないときはありますか。
これらの質問は、私が仲間のデザイナーや開発者と行ったTwitterの会話に触発されて浮かんできました。ウェブサイトの構築に苦労するのは、私だけではないことを認識することに役立ちました。今日は、この重要な属性の適切な使用方法を明確にしようとします。では、始めましょう。
画像の役割の変化
ウェブデザイナーが画像を利用する方法は、長年にわたってかなり変化しました。 初期の頃は、今では考えられないような方法で画像が使用されていました。現在では、ページタイトル、ナビゲーションシステム、およびコンテンツを含むページ全体としても機能しています。
スクリーンリーダーまたはその他の支援技術に依存しているユーザーは、ページが使用できなくなる可能性があります。コンテンツの大部分が画像として表示された場合、単純な代替テキストでさえも役に立ちません。
ありがたいことに、タイポグラフィの広まりにより、これまでのようにデザインの誤用がなくなりました。 そして、アクセシビリティの広まりもあり、多くの人が画像が果たすべき特定の役割を持っていることを認識しています。
テキストの重要性
画像を有効に使用すると、アクセシビリティが向上するはずです。それはある程度事実ですが、まだ台無しにする点が残っています。これは、代替テキストが入力され、正しく使用されるればすぐに解決できます。
代替テキストを単独で使用しなくても、必ずしもユーザーに大きなメリットはありません。たとえば、「About Us」という見出しタグがあるとします。その下は、会社の従業員の集合写真です。単に代替テキストをalt =” About Us”に設定すると、支援技術で読み取ったときに長くなります。したがって、ユーザーに画像が何であるか、またはそれが何を意味するかは伝わりません。
それでは、代わりに何を使うべきでしょうか。ページ自体のコンテンツとその中の画像の役割によって決まります。ただし、これは別の混乱をもたらします。W3Cには、画像を様々な概念に分ける役立つガイドがあります。
・有益性
・装飾性
・機能性
・テキストの画像
・繁雑さ
・画像のグループ
・画像マップ
このガイドでは、各概念の簡単な説明と、代替テキストを提供するための最も関連性の高いものを決定するのに役立つ例を示します。
必ずしも必要ではない
W3Cのガイドで最も興味深い情報の1つは、すべての画像に代替テキストが必要なわけではないということです。しかし、ちょっと待ってください。毎回altを使用するすべての呼び出しについてはどうですか。アクセシビリティを無視していませんか。
画像に情報を追加しない場合、代替テキストは不要になります。これらの状況では、代替テキストを使用すると、「スクリーンリーダーの出力に関する混乱が追加される」可能性があります。そのため、空白がないとページレイアウトが乱雑になるように、これにも同じことが言えます。
Webデザイナーにとって大変なのは、WAVEなどの自動アクセシビリティツールが、ページを読み進めるときに代替テキスト無しで画像にフラグを立てることです。そのため、必要に応じてクライアントに状況を説明しなければなりません。特定の状況では空の代替テキストが使える場合があります。
ユーザーへの支援について
代替テキストの使用方法について少し調べてみると、間違ったアプローチをしている人が多くいることを実感しました。これは、長い間存在していましたが、必ずしも楽しいものではありません。 功利主義的であり、常に頭に浮かぶわけではありません。
しかし、多くのユーザーにとって、重要です。 ページに統合した画像を誰もが見ることができるわけではないことを考えてみてください。 これらの人々にとって、代替テキストは、コンテンツにコンテキストをもたらすために役立ちます。ますます複雑なWebを構築する際は留意する必要があります。
おすすめ新着記事
おすすめタグ