アクセシビリティデザインを作ることのメモ-Web Accessibility Guide

アクセシビリティっていうものは一言で表すと「誰もが不便を感じない」ということに尽きるようです。そして「便利」「快適」になることとは違うニアンスだと思います。一部の人間にとっては「便利」「快適」になるかもしれないが、もう一部の人たちには「不便」になってしまうことはナンセンスだということのようです。そういうことを追求していくとキリがない。だからいろんなサイトを見ても「コピペ」で完成できるものが置いてないのがわかります。

素朴な疑問だったのですが、これは富士通のこちらのページに詳しく書いてあります。一言で表すと「アクセシビリティデザイン」からより使いやすくすることを「ユニバーサルデザイン」になります。なので根本的なことは「アクセシビリティデザイン」と覚えていて問題ないでしょう。そこからすべきことを追求していくことで、障害者にとっての配慮の仕方を「バリアフリー」となり、障害者に限定しない方法を「ユニバーサルデザイン」となった。ということです。
富士通 ユーザビリティとアクセシビリティ

WEBデザインにおけるアクセシビリティデザインの特徴には主に２つが挙げられると思います。情報整理とユーザーインターフェース。ユーザーインターフェースだけではなく「誰でもわかりやすい文章」という概念もアクセシビリティに該当します。そしてユーザーインターフェースに必須なことは、「文字の大きさ」「色彩」「コントラスト」「レイアウト」「図形」をアクセシビリティに気を使って作成すること。

文字の大きさ

見えにくい小さいフォントを避ける。WCAGではデフォルトサイズの150％(18pt)又は14ポイントの太字が推奨されている。

色彩

可視域の光に対する感度を分光感度と年齢層の区別の差をなるべくなくする。よく年寄りが「青信号」を「緑信号」というのは、この感度が低くなっていくため「青」を青と脳が処理できなくなってしまうためです。分光感度にある黄色～青までの色がシニアには黒茶のようなサングラスのフィルターをかけられたような感じになります。それらを感じられるツールをmiChecker (エムアイチェッカー) と言ってこのあとでで紹介していきます。
Photo by Wiki:Luminosity function

実際にmiChecker (エムアイチェッカー) で確認すると、左側が通常で右側がシニアに映っていそうな画面の色イメージになります。

コントラスト

テキスト（及び画像化された文字）とその背景の間に、少なくとも4.5:1以上のコントラスト比をもたせること（参考ページ：WCAG 2.0（日本語版））MacでもWindowsでも利用できるツールをこのあとで紹介しています。このツールは背景色とテキスト色の値を入れるだけでチェックしてくれます。

レイアウト

わかりやすいボタン配置、扱いやすい操作性（目的が理解しやすい）ファーストビューに主要なリンク先（ボタン）を表示させる。

アイコンまたは図形

理解しやすい図形またはイラスト、インフォグラフィックスを用いること。

制作時に付け加える点

• 「トップページ」と「前のページ」へのリンクは分かりやすくしておく。
• ファーストビューには重要な箇所（アクセス数の多いページ）や会社概要、連絡先などを記載する。
• 検索窓は大きくして認識しやすく、目立ちやすい箇所に配置する。
• フォントの大きさは８０％以下にしない、WCAG 2.0の規定など日本語は標準よりも150%のサイズ、行間も150%としている。
• リンク色の設定（a:link、a:visited、a:hover、a:active）は標準色を利用する。
• ローマ字表示はなるべく避ける。さらには分かりにくいカタカナ表記も普段の生活に利用しない表記は避けるべき。
• ボタン、メニューなどのリンクの先のボタンはわかりやすく、そして１ページの中にあまり多く置かない。
• エラーページの表記は「404 NotFound」だけにせず、日本語での説明書きやよくある質問などへページ誘導をさせること。

これだけは注意する点

• ポップアップ広告は避ける。行う場合は必ず「閉じる」のボタンを分かりやすく置くこと。
• 下層ページへのアコーディオンメニューは避ける。行う場合は必ず「開く」と「閉じる」のボタンを分かりやすく置くこと。
• バナー広告と、コンテンツのバナーは同じ列に置かないこと。必ず分けること。同列で表示させたい場合は「バナー広告」だとわかりやすく表示させる。
• 検索結果の表示に広告などいれてはいけない。検索は直感的だけがほしいユーザーが多いため、最もわかりやすくさせるのがコツ
• ウェブページの印刷（プリント）は正確にされること。cssのmedia指定に注意する。media=’all’が好ましい。

便利なツールはこの２つ。

和製ツール、miChecker (エムアイチェッカー)

miChecker (エムアイチェッカー) Winのみ
このツールは「年齢」「視力」などの設定もできてアクセシビリティには欠かせないツールです。総務省は開発した和製ツールです。
一応は最新のJava をダウンロードしておくと良いでしょう。

簡単にWCAG 2.0の推奨コントラストチェックができる Colour Contrast Analyser

Colour Contrast Analyser(Win and Mac)
これはマックでも使える。しかも使い方は非常にシンプルです。色の値を入れるだけで下の方のチェックマークが変化します。これはWCAG 2.0の推奨のコントラストのチェック判断です。動画にしてみた方がわかりやすいのでみてください。
[fvplayer src=”http://www.yoshidablog.com/wp-content/uploads/2015/11/Colour-Contrast-Analyser.mov”]

この２つだめ熟読しておけば十分！というサイト

・WCAG 2.0（日本語版）
・JIS X 8341-3:2010 関連文書

その他参考にした主な公的機関などのページ

・ウェブアクセシビリティ基盤委員会
・みんなの公共サイト運用モデル改定版（２０１０年度）
・情報バリアフリーのための情報提供サイト