Webで検索すれば調べたいことや知りたいことが出てきて大体のことがわかります。しかし、中には検索した情報を閲覧することが困難な方も多くいらっしゃいます。
そこで重要となってくるのが「Webアクセシビリティ」です。
今回は「Webアクセシビリティ」についてのポイントやUI/UXデザインの制作ポイントについて解説いたします。もくじ
◆Webアクセシビリティとは
Webアクセシビリティとは、Webサイトにおける情報やコンテンツへのアクセスのしやすさのことを指します。
高齢者や障がい者など心身の機能に制約がありWebサイトの情報をうまく取得できない場合や、通信回線が弱い、暗いなどといった環境下でもWebを利用する誰もが情報を取得しやすく、アクセスがし易いサイト作りを図る概念になります。
Webアクセシビリティにはきちんとした指標があり、日本工業規格「JIS X 8341-3」の基準準拠が日本の企業の多くで用いられています。
◆使いやすいUI/UXデザインとは
Webアクセシビリティを意識したWebサイトを制作するには、誰もが使いやすいUI/UXデザインにすることが前提としてあります。
誰もが使いやすいUI/UXデザインとは、
・本文の内容のわかる見出しがある
本文の内容が何かタイトルを見ただけでわかるように、わかりやすい見出しを入れることで視覚障がい者の方や見出しをジャンプして本文を読む方でも素早く本文にたどり着けるようにします。
・画像には代替えテキストを入れる
視覚障がい者の方はどのような画像なのか情報をうまく取得できない場合もあります。
そういった事を想定して音声読み上げ機能を付けます。その際音声読み上げ機能は画像に設定されている代替えテキスト（alt属性）を感知して読み上げるので代替えテキスト（alt属性）は必須で設定する必要があります。
・コントラストの設定
弱視や色盲、老眼など目が不自由な人が利用する場合を想定して、文字の色や、背景色のコントラストをわかりやすくする必要があります。コントラストは認識されやすい4.5:1以上にすることが望ましいです。
・操作性の工夫をする
うまく手が動かせない人や、個々のWeb環境によってはマウスやトラックパッドが使えない場合もあります。そういった場合に備えてキーボードでの操作を想定して長いスクロールは避け、ボタンなどはクリック範囲を広く取るようにします。
・文字サイズの拡大機能
小さな文字が読みづらい場合を想定して文字サイズに拡大機能をつけるとより良いでしょう。
◆Webアクセシビリティ実例
・厚生労働省 Webトップページ
https://www.mhlw.go.jp/index.html
文字拡大サービスや音声読み上げサービス、サイト上での現在地の把握、
「ページの先頭へ戻る」テキストリンクの配置など、細部にわたって配慮されています。
・味の素株式会社 検査証明書
https://www.ajinomoto.co.jp/webaccessibility/2017/index.html
味の素株式会社はWebアクセシビリティ達成等級AAを目標として、基準を満たすページを増やしています。
◆まとめ
Webアクセシビリティに優れたWebサイトはSEOにも有効であり、人に優しい設計であるといえます。
Webアクセシビリティを配慮したUI/UXデザインは今回ご紹介した以外にもいくつもありますが、他社のサイトなども参考にしながら大事なポイントを押さえて誰もが使いやすいWebページ作りをしていきましょう。 フォーザウィンはIT業界で働く仲間を募集しています！ 経験、未経験は問いません。是非当社の採用情報をご覧ください。 採用情報を見る ＞