Webデザインではアクセシビリティが重要
子どもから大人まで、幅広い年齢層でスマートフォンが普及し、手軽にインターネットに接続できるようになり、今やインターネットは私たちの生活に欠かせない物となっています。
インターネットから得られる情報が爆発的に増えている一方で、情報の発信側は『アクセスのしやすさ』や『使い勝手のよさ』など、よりよい情報の発信が求められています。
そこで誕生した言葉が『アクセシビリティ』や『ユーザビリティ』といった言葉です。
そもそもアクセシビリティとは
『アクセシビリティ』とは、情報とのつながりやすさ、情報の入手しやすさという意味があります。
例えば、画面に表示された文字は、目が見えない人には分かりません。つまり、目で見てわかる情報は、目が見えない人にとってアクセスビリティが悪いと言えます。
また、表示されている言語が理解できるかによっても、アクセシビリティは違ってくるでしょう。
Webにおけるアクセシビリティとは、身体のハンディキャップや言語の違いを超えて、どのような人であっても、その情報にアクセスできるかどうかを表す言葉です。
なぜアクセシビリティが重要なのか
目が見えない人は表示される情報にはアクセスできませんし、耳が聴こえない人は音の情報にアクセスできません。そのため、障がいがある人にとっては、複数の情報入手方法があるとより分かりやすいページとなります。
また、障がいはなくても、外国語が分からない、老眼で見えづらい、片手がふさがった状態でパソコンを操作しているなど、私たちは常に万全の状態で情報にアクセスするわけではありません。
どのような環境にあっても、あらゆる情報を得られるようにすることは、ユーザーから喜ばれるだけでなく、情報を発信する側にとってもビジネスチャンスにつながります。
実際にアメリカやカナダ、韓国ではアクセシビリティ確保を義務化する動きが出ています。
基準となる指標をチェックしておこう
アクセシビリティの基準には、国際基準の『WCAG 2.0』と日本国内の基準の『日本工業規格 JIS X 8341-3』の二つがあります。基準を満たした見やすいサイトが作れるように、さまざまなツールも存在しています。
『Photoshop』や『Illustrator』の校正機能では、P型（1型）色覚、またはD型（2型）色覚の見え方を確認できます。また、『colorable』は背景と文字のコントラストをチェックして、見えやすさを段階表示します。
『スクリーンリーダー』は音声で読み上げてくれますし、『Unicorn - W3C 統合検証サービス』は、HTML/XHTMLが、W3Cの規定に沿って作られているかを確認できるなど、ツールによってもアクセシビリティの向上ができるようになりました。
すぐできるアクセシビリティ対応の例
アクセシビリティに対応したWebサイトを作る場合、実際にはどんなところに注意して作ったらよいのでしょうか。
ここではユーザーにとって、見やすいページ、分かりやすいページを意識したアクセシビリティの対応例を紹介します。
文字の色と背景色のコントラストに注意
Webサイトの場合、目で見て情報を確認することが多くなっています。そこで大切になるのがサイトの『見やすさ』です。
見やすさを決める大きな要因として『コントラスト』があります。白地に黒文字、もしくは黒地に白文字といったコントラストは見やすいですが、白地に明るい色の文字、黒地に暗い色の文字は見やすいとは言えません。
見やすいデザインを作るなら、WCAG 2.0の最低限基準Aの1.4.3のコントラスト比は付けた方がよいでしょう。
コントラスト比を確認するツールに『カラー・コントラスト・アナライザー』があります。前景色と背景色を選択すると、コントラスト比の他、文字の大きさによる適合・不適合が簡単に分かります。
カラー・コントラスト・アナライザー｜ツール｜エー イレブン ワイ［WebA11y.jp］
機種依存文字は使わない
パソコンにはさまざまな機種があり、表示される文字の中には『機種依存文字』があります。 Web作成においては、機種依存文字を使わないようにしましょう。
機種依存文字を使うと、ユーザー側では表示が崩れてしまったり、音声読み上げができなかったりする場合があります。
中には、丸の中に数字が入ったものや、mmやkgなどの単位を一文字で納めた記号文字など、文章でよく使われるものも存在します。
文字入力をして変換した場合、変換候補一覧の横に『環境依存』の表記がある場合は使用しないようにしましょう。
ページの内容を表す適切なタイトル付けを
Webページには必ずタイトルを付ける場所があるので、忘れずに付けましょう。このページにはどんな情報が書いてあるのかの判断材料にもなりますし、ほかのページとの区別がつきやすくなります。
特に音声読み上げの場合、ページタイトルがないと結論が最後になってしまうため、ユーザーが理解しにくいページになってしまいます。
また、ページ内の文章が長くなる場合は、途中で中見出しや小見出しをつけることも大切です。中見出しや小見出しをつけることで、ユーザーに伝わりやすく、読みやすいページになります。
図形や画像においてはこんなことに注意
Webに掲載できるのは、文字情報だけではありません。図形やグラフ、画像や動画といった、非テキスト情報もあります。こうした情報を載せる場合の注意点についても見ていきましょう。
アイコンやグラフには色や形の違いをつける
情報の内容によっては、文字で表現するよりもアイコンやグラフを使うことで、分かりやすくなる場合があります。
しかし、アイコンやグラフも使い方によっては、かえってユーザーを混乱させてしまう可能性があります。
例えばアイコンは、同じような色や形で統一してしまうとかえって分かりにくい物となってしまいます。グラフの場合も、同じ系統の色だけでまとめてしまうと、色覚にハンデキャップがある人には、違いが分かりにくくなります。
形を変えてみたり、違う系統の色を入れたり、模様を入れたデザインを使うことで、区別しやすくなるでしょう。
Webサイト内の画像には代替テキストを
目が見えない人にとって、音声読み上げソフトの存在はとても大きいです。情報が文字の場合は、文字を拾って読み上げることができますが、写真の場合、文字情報がなければ音声読み上げソフトは情報を読み上げることができません。
Webに掲載されている写真の情報を読み上げてもらうための物として『代替テキスト（alt属性）』があります。
代替テキストが使われるのは、目が見えない人への情報提供だけではありません。画像が表示されない場合、画像の代わりに表示するテキスト情報としても使われます。
そして、画像情報が読み込めない検索エンジンのクローラーにも情報提供ができるので、SEO対策としても有効です。
まとめ
私たちの生活には欠かせなくなったインターネットは、障がいのある方や高齢者も大勢利用しています。
また、簡単に全世界の情報が取得できるようになった今、場所や立場、状況に関係なく適切な情報を得られるWeb環境が必要です。
アクセシビリティを整備するためのツールも数多く提供されています。それらを利用しながらユーザーに優しいWeb制作を心がけましょう。
