ウェブアクセシビリティについて(画像編)

前回「ウェブアクセシビリティの検査にたずさわって…」 においてウェブアクセシビリティについての概要や考え方をお知らせしましたが、今回は実践的な考え方について解説したいと思います。

ウェブサイトには画像を掲載することが多いと思います。ウェブサイトに画像を掲載する場合は下記のようにHTMLのimg要素を使います。

<img src="画像のURL" alt="画像の情報" >

ティーボくんのようなキャラクター画像でも装飾画像と考えてalt属性は空にします。説明が必要であれば前後のテキストで説明をいれます。
「ひまわり畑の風景の画像」とスクリーンリーダーで読み上げられても、視覚障がい者には意味が伝わらない可能性があります。装飾画像と考えてalt属性は空にしてください。文脈上で必要なら、前後のテキスト文脈で表現してください。
ここで注意することは、風景や装飾の画像の場合にはalt属性はalt=""というように、属性値は空にしなければなりません。風景や装飾画像の場合は視覚障がい者にとっては説明されても、必要のない情報の可能性があります。視覚障がい者はPCで情報を得るためにはスクリーンリーダーというプログラムを使用しています。サイトにある情報を得るために、風景などの装飾的な画像をスクリーンリーダーで読み上げられるのは余計な情報であると考えるべきだと思います。

したがって、装飾的な意味の画像はスクリーンリーダーで読み上げ対象となるalt属性は空にすべきだと考えます。そうすればウェブサイトでデザイン上で挿入している風景などの画像は、視覚障がい者には意味をもたない情報(視覚障がい者には画像が見えていない可能性がある)と考えて、alt属性は空にします。

一方、例えば、見出しに使用したいフォントがなかったり、ロゴなど、特定のデザインを使いたいために文字を画像にする場合があり、画像にするケースがあります。画像に文字が入っている場合は、基本的に文字情報はすべてalt属性に入れなければなりません。

<img src="画像のURL" alt="Person with  a disabiliy IT Support Okinawa 就労継続支援A型・B型事業所 障がい者ITサポートおきなわ">

ただし、見出しや前後のテキストに同じテキストがある場合はalt属性との重複を避けるため、その場合はalt属性を空にします。

画像には人物写真や風景画像の他にも地図、チャート、グラフなどがあります。そのような場合は画像に含まれる文字をすべてalt属性の中に入れる、ベージ内に前後にテキストとして画像がなくても伝わる同等な情報を入れる、または別ページへのリンクでもよいので、説明するページを用意してください。

基本的な考えかたとしては、もし画像がなかったとしても、同等な情報が伝わることが大切です。このように配慮してウェブページを制作すれば、障がい者に限らずすべての人に情報が伝わると私は考えています。

画像にはalt属性は必須です。alt属性がないとスクリーンリーダーはファイル名を読み上げてしまうので、「なんとか.jpg」とか「ほにゃらら.png」とファイル名を読み上げられてもユーザーにはなんのことかちんぷんかんぷんです。画像に意味が無い場合は「alt=""」のように空のalt属性を忘れずに付加してください。

(いしかわ)

ウェブアクセシビリティについて(画像編)