［連載］植木 真の「JIS X 8341-3:2010　『逆引き』徹底解説」
第31回：JIS X 8341-3:2010 実践　＜その23＞ おまけ(2) Easy Checks 中編

前回から「おまけ」としてお届けしている、W3Cが作成中の "Easy Checks - A First Review of Web Accessibility" というドキュメントの解説。今回はその2回目として、次の3つをお届けします。そういえば、このドキュメント、12月20日付で更新されていました･･･。前回の三つは、大きな変更はないようなので、見なかったことにして次に進みたいと思います（苦笑）

• コントラスト比（色のコントラスト）
• テキストのリサイズ
• キーボード操作と視覚的なフォーカス

各項目について簡単に日本語訳してみましたので、それぞれのポイントを確認してみましょう。原文にある画像の説明が含まれているところもありますので、実際に "Easy Checks - A First Review of Web Accessibility" のページを見ながら読み進めてください。

■コントラスト比（色のコントラスト）

まず、「コントラスト比（色のコントラスト）」です。

例えば明るい色の背景にグレーの文字というように、文字と背景に十分なコントラストがない場合には、文字を読むことができない人がいる。
（サンプル画像あり）

加齢によりコントラスト感度が失われている年配の人の多くや視覚に障害のある人の中には、高いコントラスト（例えば、明るい背景に暗い色の文字、または暗い背景に明るい色の文字）を必要としている人がいる。
　（サンプル画像あり）

高いコントラストを必要とする人がいる一方で、ディスレクシア（失読症）のような読字障害のある人を含めて、明るい色（高輝度）の文字が読みづらいという人もいる。そのような場合には、輝度を低くすることが求められる。
（サンプル画像あり）

ウェブブラウザは、ユーザーが文字と背景の色を変更できるようにすべきであり、ウェブページはユーザーが色を変更しても問題ないようにする必要がある。

（このアクセシビリティ要件は、十分な「色のコントラスト」とよばれることがある。しかし、これは正しくない。技術的には「輝度コントラスト」である。このページでは「輝度コントラスト比」を略して「コントラスト比」という用語を用いている。そのほうが専門用語っぽくないからだ。）コントラストに関しては、知っておくべきことがたくさんあるが、ここでは基本的なことを紹介することにする。

というわけで、このセクションは原文のページに、いくつかの文字色と背景色の組み合わせのサンプル画像があるので、それを見ながら読み進めてください。

何をチェックすべきか（What to check for）

ウェブページは、デフォルトの状態で最低限のコントラストを確保しているか。通常のサイズのテキストであれば、少なくとも4.5:1以上のコントラスト比があるか。

コントラストをチェックするには、基本的には三つの方法があるが、それぞれに一長一短がある。

1. コントラスト比の一覧表 - そのウェブページで考えられうる全ての文字色と背景色の組み合わせについて、そのコントラスト比を一覧表にして提示してくれるツールがある。そういったツールの中には、一覧表の中でクリックすると、その組み合わせがウェブページのどの部分で使われているかを示してくれるものもある。
   • 長所：網羅性がある。
   • 短所：正確さに欠ける。具体的には、そのページに実際にはない色の組み合わせを提示することがある。
2. スポイトで色を選択 - 文字の色と背景の色を選択すると、そのコントラスト比を表示するツールがある。
   • 長所：正確である。
   • 短所：一度に一つの組み合わせしかチェックできない。画面を見れることとマウスを操作できることが前提となる。
3. 色を非表示にする - ページをグレースケールで表示する。
   • 長所：直接体験できる。
   • 短所：不正確である。コントラスト比が分からない。

これは、もうその通りですね。チェック作業が一番楽なのは、HTMLとCSSを解析して、全ての組み合わせを一覧表にしてくれるツール（上記1.）ですが、本当にその組み合わせがあるかを確認しなければならないのが難です。ワタクシが使っているのは、上記2.のツールで「カラー・コントラスト・アナライザー 2013J」というやつです。これはキーボード操作も可能です。現在はWindows版だけですが、Mac版もあるので早く日本語化しないとですね（汗）。

■テキストのリサイズ

二つめは「テキストのリサイズ」です。

ウェブコンテンツを読むために、それを拡大する必要のあるユーザーがいる。中にはテキストの書体や行間などを変更する必要があるユーザーもいる。

ほとんどのブラウザは、ユーザーが文字サイズを以下の方法によって変更できるようにしている：

• 文字サイズの設定（通常は「オプション」や「設定」メニュー）
• テキストだけの文字サイズ拡大機能
• ページ拡大機能（画像やボタンなども拡大する）

ページが適切にデザインされていないと、文字サイズを変更したときにそのページが使えなくなってしまうことがある。特に、テキストだけの文字サイズ拡大機能や文字サイズ設定によって、文字サイズを変更したときである。カラムやセクションが重なり合ってしまったり、行間のスペースがなくなってしまったり、一行が長くなりすぎたり、あるいはテキストが表示されなくなってしまったりすることがある。
（サンプル画像あり）
図：二つのスクリーンショットは、テキストの文字サイズを大きくしたときにどうなるかを示している。見出しがメインコンテンツのテキストと重なり、メインコンテンツのテキストがサイドバーにあるテキストと重なっている。さらに、サイドバーのテキストは、後ろのほうが消えてしまっている。

テキストの文字サイズを大きくすると、文章の一部が見えなくなってしまうことがある。そして、以下にあるサンプル画像の三つめのように、文章を読むにはユーザーが横スクロールをしなければならなくなる。ほとんどのユーザーは、横スクロールしなければならないと文章が読みづらくなり、障害によっては読めなくなってしまうこともある。
（サンプル画像あり）
図：一つめのサンプルは、標準のサイズのテキストの場合。二つめのサンプルは、ちょうど横幅いっぱいにテキストの文字サイズを拡大した場合。そして、三つめは横スクロールしなければ文章の一部が見えない状態のもの。

さて、このテキストのリサイズについては、JIS X 8341-3:2010では等級AAの「7.1.4.4 テキストのサイズ変更に関する達成基準」、WCAG 2.0ではレベルAAの「1.4.4 テキストのサイズ変更」が該当します。WCAG 2.0の解説書「テキストのサイズ変更：達成基準 1.4.4 を理解する」を読むと、次のようにあります。

つづきはメルマガで……。