アクセシビリティに関するメモ

勉強しとこう、と思ったので、

webデザインにおけるアクセシビリティに関してのメモ。

 

 

 

 

アクセシビリティとは

何かに人間や道具が接触でき、利用や操作が可能な状態を指します。
これは、モノ、サービス、情報などさまざまな対象について定義することができます。

webにおける、ウェブアクセシビリティは、障害者や、高齢者のユーザーも、

利用できるようにしなくてはいけない。

この問題は、利用者の問題ではなく、ウェブサイトを運営している側の問題である。

 

ということでデザインをする側であれば、

レイアウト・色合い・文字の選択 一つ一つに気を付けなければいけない。

誰もが利用する、ということを前提にしたwebサイトであればなおさらである。

 

 

アクセシビリティの配慮があるwebデザイン

このデザインが難しい。 何しろ自分にはわからない。
主にレイアウトや、色選びをするときに気をつけるべきは、

  • 全盲
  • 色覚障害
  • 高齢者

の、三種類の障害は少なくとも考えなくてはならない。

(音声がコンテンツとしてあるサイトの場合は、聴覚障害者に関しても考える。

今回は触れない。)

一つ一つ、気をつけなければいけない箇所をあげてみる。

 

webデザインする時に気をつけるべき点

全盲

全く視覚が利用できず、また点字を習得しているのは視覚障害者全体の1割であると言われている。

閲覧をする場合、音声読み上げソフトをキーボードで操作し、点字を習得している人の場合は、点字出力と音声を併用しているケースもある。

  • 画像の説明(img要素のalt属性)に説明文を適当に記す。

その説明文が音声として読まれるので、ファイル名とか(D101298.pngとか)になっていると、意味がわからない。

  • 日付の表記について、20XX.XX.XX表記ではなく20XX年XX月XX日の表記にする

ショッピングサイトの値段に関しても「1,000円」よりも「1000円」の方がよい。

あと「yen」じゃなくて「円」

¥1000って表記しても駄目なのかな・・・?

色覚障害

色の違いを区別することが難しい

  • コントラストを調整

色覚障害者の目線でどのように見えてるかわかるアプリがある。

色のシミュレータ(iPhone/android)

色のシミュレータアプリ紹介

これをみるとどのように見えるのか という事が一目でわかる。

強調した部分とその背景が同じくらいのコントラストの場合強調されにくい。

また色に頼り切ったデザインをしないこともあげられる。

高齢者

視覚障害・聴覚障害、双方の問題が発生する。

忘れやすい、疲れやすい。IE使ってる可能性が高い。

  • 文字サイズを大きめにする

もしくは文字サイズを調節できるボタンをつくる

  • わかりやすく

あらゆるユーザーにとっても、これは大事。

デザイン性との両立

このデザイン性とアクセシビリティの両立は難しい。

ボタンをたくさんつけたり、やたら大きい文字にしてみたり、文字の説明をたくさんつけてみたり。

見やすくはなるけど、見たくはならないサイトになってしまうかも・・・

 

ただその両立できるサイトをつくれるようにならねば。

 

大事なのは、毎日いろんなサイトをみる事だと思います。

知識をつけた上で、よくよくレイアウトや、コードを見てみると、

これいいなー とか これだっせえwww とかよく分かるようになってくる(と思う。)

 

 

 

とかいって、偉い事を言える立場ではないのですが(´・ω・`)

今回の参考・引用図書
アライド・ブレインズ 編 webアクセシビリティ完全ガイド

Share on Facebook
このエントリーをはてなブックマークに追加
Pocket

最近更新された記事