webサイトのユニバーサルデザインって何だろう?

webサイトのユニバーサルデザインって何だろう?

こんばんわ。静岡でweb制作してるtaisonです。
梅雨時期に入りましたが、まだそんなに湿気もなくて過ごしやすい時期ですね。
願わくばずっとこのぐらいの気温・湿度でいてもらいたいものです。

さて、今日は万人がサービスを使いやすいように考慮されるユニバーサルデザインを、webの世界から紐解いていこうと思います。
皆が滞在しやすいサイト作れるかなぁ・・・

そもそもユニバーサルデザインとは?

まずはざっくり引用。

ユニバーサルデザイン(Universal Design、UD)とは、文化・言語・国籍の違い、老若男女といった差異、障害・能力の如何を問わずに利用することができる施設・製品・情報の設計(デザイン)をいう。

Wikipedia

とにかく出来るだけ多くの人が、意識せずとも利用が出来るようなデザイン設計を考えようっていう概念のことです。

普段何気なく使用している多くの物やサービスに、この概念が使われています。
逆に何気なく使えてしまっているからこそ、デザインする側は意識して設計をしていかないと難しい部分ですね。

webサイトにおけるユニバーサルデザイン

このユニバーサルデザインをwebサイトに当てはめる場合、どういった所が問題点としてフォーカスされるか洗い出す必要がありますね。
なのでまずは問題提起していきます。

フォーカスしたい問題点

視覚的な部分
全盲や弱視、色覚障害。見えない人や色が満足に識別できない人がいる
聴覚的な部分
難聴も軽度から重度まで、人によってはまったく聴こえない人(全聾)もいる
(私の息子は2人とも重度難聴です)
導線や操作部分
手足などが不自由で、デバイス操作や画面の見方に制限がある

およそこんなところでしょうか。
では、上記のような部分はどうしたら解決できるでしょうか?色々と掘り出してみたいと思います。

対策方法

視覚的な部分への対策
この視覚的な部分の対策が一番必要かと思います。何よりwebサイトは見るものですし。
考えられる対策としては以下の通り。

画像のaltタグを最適化する なるべく適したaltを入れるのは当然として、altがない画像に対しても、altは指定しておかねばなりません。
全盲の方が閲覧する状況でalt指定しておかないと、画像ファイル名が読み上げられてしまって、かなりめんどくさいみたいです。
色覚障害に対応する 色覚障害には、P型・D型と呼ばれる障がいの種別が2種あり、それぞれ色の認識が違います
赤いものが茶色ぽく見えたり、緑が黄色に見えたり。全般的に黄色から青の色で識別をしているようです。

上記の問題から考えると赤や緑をなるべく避けて、黄色や青でサイト構築すると、見た目に差異がなくなる感じですね。
もちろんブランドカラーなどもあるでしょうから、必ずこの色味にできるかというと、そうでもないワケですが、、、、
難しいところですね。

ちなみにwebサイトの色覚チェックをしたい場合、以下のリンクからチェックすることができますので、ご興味ある方は一度利用してみてください。

Colorblind Web Page Filter

色だけで要素を明示しないようにする 例えば強調したいところやリンク部分を区別する時、色を変更するだけでテキスト部分と区別しているとします。
この場合、色覚障がいのある方は、色によっては非常に区別がつきにくい状況にあり、色の区別ができない可能性があります。
それこそ通常テキストの色が茶色でリンクが赤だった場合、同じような色に見えてしまうワケです。

そのため区別をする時は、強調なら太字にするとか、リンクなら下線をつけるなど、色以外でも区別の方法を設ける必要があります。
リンクに下線は意識せずともリンクとイメージできるでしょうから、まさしくユニバーサルデザインですね。
比較画像なんかの場合(シャツの色の比較など)は色の名前を付けたり、インフォグラフであれば片方に模様を付けたり。と、なるべく色以外でも区別ができる方法を考えてみましょう。

聴覚的な部分の対策
主に動画や音声ファイルに該当する部分でしょうか。今の時代動画コンテンツもたくさんありますし、webサイトにも動画や音声が用いられるケースは増えてきています。
留意する点は、周囲への配慮と補助機能です。

周囲への配慮
聴覚障害、特にまったく聴こえない方が大衆の場でwebサイトの閲覧をする場合、アラートのような形で急に音が鳴っても気づかない可能性があります。
こうなると本人が意図しない所で嫌がられる。というカオスな状況が出来上がってしまいます。

対策としてはやはり、音が鳴る前に許可を促す文章などを表示するのが一番でしょうか。

補助機能
動画を視聴する際に、やはり字幕がないと内容が理解できません。
視覚的な要素で内容が理解できるモノであれば問題ありませんが、インタビューや製品紹介などでは必ず字幕が必要になるでしょう。(アテレコして楽しむなら話は別ですが)

また、私の息子もそうなんですが、音の大きさの判断が健聴者と違い、こちらが大きいと思う音でも普通の音のように聴いている時があります。
いずれ音量自動調整みたいな機能が出ると嬉しいですね。

導線や操作部分の対策
肢体不自由の方の場合、情報を得るための機器の操作に難があると考えられます。
デバイスいかんは製造メーカーにお任せするとして、webサイトに関しては、なるべく操作しやすいインターフェイスを考える必要性がありますね。

例えば、導線の設計。一昔前はやたらサイドバー設置してリンク増やして。みたいなwebサイトがありました(今もある)が、これだと遷移する部分がたくさんあって、操作する側は疲れてしまう気がします。
なるべく無駄な要素は省いて、少ない遷移で内容を把握できるようなサイト設計が望ましいでしょう。
実際googleもそんな方向性に持ってってますし。

その他、高齢者や認知障害など、対応すべき部分は多々あります。全部を盛り込んでデザインすることはなかなか難しいですが、なるべく対応していくことが望ましいでしょう。

常に意識をしつつ何気なく使えるサイト作りを目指しましょう

障がい者によるインターネットの利用率は10数年前と比べ2倍ほどに跳ね上がっています。それほどインターネットが身近になったということですが、その分サービス提供する側も意識して提供をしていく必要がでてきます。
よりユニバーサルデザインを意識して、ユーザーが迷うことのないサイト制作をしていきたいですね。

最後に、webアクセシビリティのサイトチェックがありますので、下記リンクからご自身のサイトもチェックしてみてください。
規格ごとの検証もできますので、参考になるかと思います。
(自分のサイトもチェックしてみました。大きな問題はないですが、課題ありでした 汗)

総務省のアクセシビリティチェック

ちなみに、このサイトきちんとレスポンシブになってます。

こちらの記事も読まれています

Windowsでgulpのバージョンアップを簡単に!nodistを使ったおすすめ管理方法を紹介!... こんばんは。taisonです。 前回記事でPCリフレッシュをしてnode.jsが消えた!っというお話をしました。 Windows8.1にgit for Windowsを導入してgithubに爪痕を残す   gitに続き、node.jsの復旧をしようとしたのですが、せっかくだ...
Windows8.1にgit for Windowsを導入してgithubに爪痕を残す... こんばんはtaisonです。 先日PCの調子が悪くなりまして、どうにもこうにも動かなくなったもんだから、 「そろそろリフレッシュするかぁ」 と、安易にパソコンのリフレッシュをしました。するとどうでしょう。 gitやらnode.jsやら綺麗さっぱり消えてるではありませんか! ...
ついに発売!iPhone X web制作への影響について調べてみる... きたる11月3日に発売されるiphone x。 発売前から色々と話題になってますが、とりわけIT、web関連の方々はザワザワしてるんじゃないでしょうか? なぜならiphone x。ディスプレイの形が変わり、web制作やアプリ制作にだいぶ影響が出るんじゃないの?という話が出ているからです。 かつて...
gulp-ejsとjsonファイルを使って更新データの管理を楽にする方法... 本格的な梅雨時期に入ったようで、本日もうなるような大雨ですね。 私の事務所は入り口がくぼんだような地面になっているので、往来する時は池に飛び込むような仕様になっております。 さて今回の題材はタイトルのとおり。 皆さん公開したサイトデータの中でちょくちょく更新する必要があるデータを扱う時があ...

制作に役立つカテゴリの最新記事