styleguide icon indicating copy to clipboard operation
styleguide copied to clipboard

[accessibility] 画像

Open manabuyasuda opened this issue 7 years ago • 0 comments

  • 画像はあくまで補足として、画像がなくても文章だけで伝えられるようにすること
  • alt=""は必須とする(属性値は必ずしも必須ではない)
  • 情報を過不足なく伝えるためにalt="〜の写真"のように値を入れること
  • テキスト画像はその画像のテキスト情報をそのまま値に入れること
  • リンク付きの画像であっても、その画像の情報を伝えること(リンク先の情報ではない)
  • アイコンのように特定の意味を持たない、もしくは伝えることで冗長になったり意味が逆に伝わりづらくなってしまう場合は値を空にする
  • 画像が縮小されたときに情報が読み取れなくなることを避ける

情報は画像ではなく言葉で伝えるほうが確実。例えば言葉の意味は辞書に載っているが、画像の意味は受け取った側でバラツキがでる。伝わりやすい手段を選ぶことは、情報を伝える側も情報を受け取る側にとってもメリットのあること。

alt属性自体の省略が可能な場面もあるけれど、ごく稀であること、省略しなければならない理由もないので、基本的に属性自体の省略はしない。さらにスクリーンリーダーはaltが省略されていると、画像のソース(例えば/img/logo.svg)を読んでしまい必要のない無駄な情報を伝えてしまうことになる。

alt="〜の写真"などとしておくと、その人自体は見えなくても、他の人が説明をしてくれるかもしれない。そのためにはそこに写真があるといったことが伝わらなければいけない。100%伝えられなくても、過不足なく伝えることが大切。

リンク付きの画像の場合に、そのリンクをクリックするとどうなるのかといったaltの付け方を推奨するものがあるが、その場合も画像についての情報を伝えるものとする。視覚に障害があったとしても、Webを日常的に使っていることに違いはない。同じように慣れているだろうし、特別扱いをすることで逆に伝わりにくい状態になってしまう可能性がある。

manabuyasuda avatar Dec 30 '16 18:12 manabuyasuda