画像：pixabay

書籍「デザイニングWebアクセシビリティ」の著者のおひとりである伊原力也さんをはじめ、A11YJ Slack Teamの有志で「Webアクセシビリティ関連の資料まとめ – Google ドキュメント」を公開されています。

ウェブ担当者通信でもユーザビリティ・デザインを担当していただいている坂本さんにウェブアクセシビリティのコラムを2018年5月から6月にかけて書いていただきました。
→　【プレミアム】何からはじめる？ウェブアクセシビリティ（1）

「ウェブアクセシビリティは障害者のためのもの」と考えている方は多いのですがそうではありません。「何からはじめる？ウェブアクセシビリティ」のコラム内で坂本さんは以下のように書かれています。

ウェブへの「アクセスのしやすさ」で困っているのは、高齢者や障害者だけではありません。

例えば怪我や腱鞘炎などで手が使いにくくなれば、手が不自由な人が遭遇するのと同じ問題に遭遇しますし、普段メガネをしている人が、メガネを忘れただけでも使いにくくなるはずです。ウェブアクセシビリティは他人ごとではなく、いつ自分が遭遇してもおかしくない問題なのです。

多くの企業でも取り組みが進みつつあります。「Webアクセシビリティ関連の資料まとめ」では、ガイドラインやWebアクセシビリティとは？といった記事や書籍はもちろんのこと、UXデザイン、情報設計・ライティング、HTML+CSS+JS、チェックツールなどの情報についてもまとめられています。
とてもありがたいまとめです。

Webアクセシビリティ関連の資料まとめ – Google ドキュメント

これまで、アクセシビリティの概要や、取り組む際に気をつけたいことをお伝えしてきました。今回は“色”のウェブアクセシビリティの話と、お役立ちサイト・ツールをご紹介します。

色のウェブアクセシビリティ

多様な色の見え方

普段なにげなく見ている色ですが、人によって見えている色が違うというのをご存じでしょうか？

人間が色を認識するためには、網膜にある錐体細胞という細胞が使われます。この細胞はL・M・Sの3種類があり、それぞれが赤・緑・青の光に反応し、この細胞の反応の組み合わせが脳に伝達されて色が認識されます。

【図7】色の見える仕組み

錐体細胞のいずれかがなかったり少なかったりする場合には、色の見え方が変わります。これが色盲や色弱と呼ばれる状態です。一口に色弱と言っても、細胞の数は人によってまちまちですので、色弱にも強度があるのです。

「色盲」や「色弱」という呼称は徐々に使われなくなってきており、カラーユニバーサルデザイン機構では、以下のように分類し、色弱者は「色の配慮の不十分な社会における弱者」と定義しています。

CUDOの新呼称		従来の呼称
C型	一般色覚者	色覚正常				3色型
P型（強・弱）	色弱者	第1		色盲・色弱	赤緑色盲	2色型 異常3色型
D型（強・弱）		第2		色覚異常
T型		第3		色覚障害	黄青色盲
A型		全色盲				1色型

【図8】カラーユニバーサルデザイン機構による色覚の呼称

また人間の目は加齢によっても、色の見え方が変わります。生まれたばかりの赤ちゃんの目は陶器のように白い色をしていますが、だんだんとこれが濁って黄色く変わっていきます。言ってみれば黄色いフィルター越しに色を見ている状態になっていきます。

また白内障や緑内障といった病気によっても色の見え方は変わりますし、視力だってバラバラです。そのため、他者と同じものを見ていても、どう見えているかなんて本当はわからないのです。

色に関するガイドライン

WCAG2.0（JIS X8341-3:2016）では、このような人による見え方の違いを吸収し、より多くの人が視覚での情報を取得できるように、色に関するいくつかのガイドラインが用意されています。

重要なことは、文字や図などの情報が、きちんと読みとれるということです。そのための達成基準をいくつか見ていきましょう。この達成基準はA、AA、AAAの順で厳しくなっていきますが、ビジネスで利用するウェブサイトであれば、AAは達成しておきたいところです。

達成基準1.4.1 色の使用: 色が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の視覚的手段になっていない。 (レベル A)

この達成基準は色だけで区別するようなことをしてはいけないということです。例を見てもらうとわかりやすいと思います。

【図9】必須かどうかを赤色で区別している例。必ずテキストなどと合わせて区別する

まず1つめの例は、お問い合わせフォームの必須を表現する場合です。左の方は必須の部分が赤い文字で書かれています。この方法の問題は、赤い色を識別できない人にとっては、どれが必須なのかわからないというところです。それを修正したのが右側の例です。必須の部分は赤の色を使っていますが、「必須」と明示されています。これによって、赤い色が識別できなくても、必須項目が理解できるようになります。

【図10】色が失われると、情報そのものが損なわれます

もう一つは折れ線グラフです。グラフと凡例は色分けされていますが、これもそもそも色が識別できなければ、どの色が何を表しているのかわからないわけです。試しにグラフ部分をモノクロで印刷してみると、よくわかるはずです。このような場合にも、フォームの例と同じように文字を組み合わせて、どれが何を表しているかを明示しましょう。

ChromeとFirefoxのみになりますが、モノクロをブラウザ上で簡単に再現できる(un)clrdという拡張機能もあり、ぜひ入れておきたい拡張機能です。

基本的には文字と色は必ず組み合わせて使うようにすれば、達成基準1.4.1を満たすことはそれほど難しくありません。

1.4.3 コントラスト (最低限) : テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。ただし、次の場合は除く: (レベル AA)

• 大きな文字: サイズの大きなテキスト及びサイズの大きな文字画像に、少なくとも 3:1 のコントラスト比がある。
• 付随的: テキスト又は文字画像において、次の場合はコントラストの要件はない。アクティブではないユーザインタフェース コンポーネントの一部である、純粋な装飾である、誰も視覚的に確認できない、又は重要な他の視覚的なコンテンツを含む写真の一部分である。
• ロゴタイプ: ロゴ又はブランド名の一部である文字には、最低限のコントラストの要件はない。

まず、コントラスト比について説明しておきましょう。これは背景色と文字色の色を計算式を使うことで出てくる比で、1:1～21:1の数字が出てきます。背景色が#FFFFFFの白、文字色が#000000の黒である場合には、最高値の21:1の数字が出てきます。すなわち、比率が高い方がはっきりと見えることを表しています。

【図11】コントラスト比の計測例

計算式は複雑なものですが、ウェブ上にもダウンロードソフトにも簡単に計算できるソフトがあります。シンプルで使いやすいものにはカラー・コントラスト・アナライザーがあります。画面上の色をスポイトで拾うことができるため、初心者でも簡単に使うことができます。ダウンロードページは英語ですが、インストール時に日本語を選べるようになっています。

【図12】カラーコントラストアナライザー（Windows版）

またブラウザ上で使えるツールもあります。試しに自身のサイトで使われている色を以下のページで計算してみましょう。

色のコントラストチェッカー

付則の部分はあまり気にしなくてもよいのですが、ロゴについては最低限のコントラストという要件はないので、元々あるロゴの色を変えたりする必要はありません。そこだけ気をつけておけばよいでしょう。

1.4.6 コントラスト (高度) : テキスト及び文字画像の視覚的提示には、少なくとも 7:1 のコントラスト比がある。ただし、次の場合は除く: (レベル AAA)

達成基準1.4.3をもう少し厳しくしたものが達成基準1.4.6となります。1.4.3では4.5:1だったコントラスト比が7:1になっています。

7:1というと少し厳しいと思われるかもしれませんが、本文のような長い文章の場合には、ぜひクリアしておきたい項目です。

2.3.1 3回のせん（閃）光，又はしきい（閾）値以下の達成基準

難しそうに見えますが、高速の点滅を使わないというのがこの基準です。速い画面の点滅は光による発作を起こす恐れがあるため、1秒間に3回大きく画面の色が変わるような表示をしてはいけません。

代表的な例は、今から20年以上も前に起こったポケモンショックです。現在でもニュースやワイドショーでフラッシュが多く焚かれるようなシーンでテロップが表示されることがありますが、ウェブコンテンツにおいては、意図的にデザインしないとそのような点滅が起こることはありません。

そのための注記1には「この達成基準を満たさないコンテンツでは、利用者がウェブページ全体を使用できないおそれがあるため、ウェブページ上の全てのコンテンツは他の達成基準を満たすために用いられているか否かにかかわらず、達成基準を満たさなければならない」と書かれています。ページを利用するためには必ずこの基準を満たしていなければならないということです。

せん光の問題は健康被害につながる可能性があります。動画コンテンツが多く見られるようになっていますので、気をつけておきたい項目です。

WCAG2.1について

JIS規格への反映は先になるでしょうが、WCAG2.0の次の規格であるWCAG2.1が近々勧告（規格が最終段階になること）される予定です。勧告されると、それが標準的なウェブの仕様ということになります。

新たな色に関する達成基準も出てきていますが、基本的にはコントラストに関する部分になります。読みにくい文字では誰も得しないことを覚えておけば、すぐに対応できるはずです。

カラーユニバーサルデザインについて

WCAGなどのウェブアクセシビリティは最低限必要な部分を達成させるためのものと言えますが、さらに全ての人に情報が正確に伝わるように配慮されたデザインのことを「カラーユニバーサルデザイン」といいます。

東日本大震災のとき、各テレビ局は津波に関する情報を放送していましたが、「大津波警報」「津波警報」「津波注意報」の区別の色が各局で異なっていました。一般の人にもわかりづらく、色弱の人には警報による色の差がわかりにくいという意見も寄せられました。

これ以降、テレビ局の津波警報の色は統一されましたが、その色の選定にはカラーユニバーサルデザインの考え方が取り入れられています。

カラーユニバーサルデザインは多くの場面で使われるようになってきており、最近ではJIS Z 9101(図記号―安全色及び安全標 識―安全標識及び安全マーキングのデザイン通則)とJIS Z 9103(図記号―安全色及び安全標識―安全色の色度座標の範囲及び測定方法)が改正されました。要するに道路標識などの色が、今までよりも色弱の人に見分けやすくなりました。

【図13】カラーユニバーサルデザインで改正されたJIS Z 9103

このような不便を生じさせない色を使うのがカラーユニバーサルデザインなのですが、ウェブアクセシビリティの規格とは異なり、達成基準があるわけではありません。しかし、よりシビアに色を選ばなければならない場面では、カラーユニバーサルデザイン機構（CUDO）が発表しているカラーユニバーサルデザイン推奨配色セットが参考になります。

主に公共の利益に関するもの分野や工業製品での導入が進んでいますが、ウェブサイトのデザインにも活かせるものですので、ぜひ事例などを確認してみましょう。

ウェブアクセシビリティを学べるサイト・ツール

ウェブアクセシビリティについてより詳しく学びたい方のために、いくつかのサイトやツールを紹介しておきます。すべてを覚えて使うのは難しいかもしれませんが、よりよいウェブ環境のために、できることから進めていきましょう。

Weba11y.jp［エー イレブン ワイ］

アクセシビリティに関する最新情報の発信、セミナーの開催などでアクセシビリティの啓発を行っているサイトです。ウェブサイトとFacebookページの両方をおさえておくと、最新の情報に触れることができます。

Webアクセシビリティ対策って、何からやればいいんですか？／Webアクセシビリティのコンサルタントの植木真さんに聞いてきた

漫画形式でウェブアクセシビリティについて解説しているページです。上記のエーイレブンワイを運営するインフォアクシア社の植木真さんによる、わかりやすい解説が必見です。

WCAG2.0 日本語訳

WCAG2.0の規格全文の日本語訳を読むことができます。

みんなのアクセシビリティ評価ツール：miChecker (エムアイチェッカー)Ver.2.0

ウェブサイトがJIS X 8341-3:2016の達成基準を満たしているかをチェックできるツールです。Windowsのみで利用可能ですが、現在のページの問題点をチェックしてくれるため、ウェブページの改善に役立ちます。

カラーユニバーサルデザイン機構

カラーユニバーサルデザインの普及を行っているカラーユニバーサルデザイン機構のウェブサイトです。導入事例や推奨配色セットのダウンロードなど、色のユニバーサルデザインの情報を発信しています。

まとめ

ウェブアクセシビリティは特別なものでも、一部の人のためだけのものではありません。自分のできることを少しずつ行っていくことで、未来の使いやすいウェブ環境につながります。

難しいことのように思われがちですが、その第一歩はけして難しいものでもありません。ぜひこの機会に今までのサイトを見直して、多くの人に使いやすい・見えやすいサイトに変えていきましょう。

前回お伝えしたとおり、アクセシビリティに配慮することは決して難しいことではありません。今回は、実際に取り組む際に気をつけたいことをご紹介します。

何からはじめればいいの？

私はアクセシビリティ全般の専門家ではありませんが、視覚に関する部分（主に色彩）のウェブアクセシビリティについては、10年以上取り組んでいる者で、現在でもウェブ制作を行っています。その中で日頃気をつけているのは以下のようなところです。

1. 正確でシンプルなHTMLのマークアップ
2. WAI-ARIA（ウェイ・アリア）の活用
3. 読みやすいテキストの色の組み合わせ

1．正確でシンプルなHTMLのマークアップ

HTMLでどんなタグが使われていても、CSSによってどのような見栄えにも変えられます。ですが、これはユーザーエージェント（ウェブブラウザ・音声読み上げソフト・点字ブラウザなどのHTML文書を解釈するソフト）に対して、どの部分が見出しで、ここは本文、そしてどのような画像であるという情報を正確に伝えるためには、HTMLの正しさが重要です。

【図3】HTMLを解釈するユーザーエージェントの例

このようにソフトがHTMLを理解できることをマシン・リーダブルといいますが、検索エンジンがHTMLを理解するのも同じことです。音声読み上げの場合には、見出しやリンクで読み上げる性別を変えるなどすることで、HTMLの文書の持つ意味を「見る」以外の方法で伝えてくれます。

2. WAI-ARIA（ウェイ・アリア）の活用

WAI-ARIAはWeb Accessibility Initiative – Accessible Rich Internet Applicationsの略語で、HTMLを拡張し、よりアクセシブルにするための仕様です。

HTMLのタグに属性を付記することで、その部分がどのような役割を持っているのかや、現在の状態（タブが今開いている状態であるかどうかなど）をブラウザや音声読み上げソフトなどの支援技術に伝えることができるようになるというものです。

【図4】WAI-ARIAのrole属性でHTML各部の役割を示した例

私はマークアップの専門家ではなく、その内容に精通しているわけではないため、jQueryのプラグインなどを使用する際には、WAI-ARIAに対応しているかどうかを基準に選ぶようにしています。

3. 読みやすいテキストの色の組み合わせ

文字を読みやすくすることは、多くの人にとって便利なものであるはずです。先に述べた1と2はHTMLのマークアップに配慮することで、できるだけ多くのユーザーエージェントに正確に情報を伝えることができるというものでした。

それに対して、読みやすいかどうかは「見える」ことが前提となります。ウェブは今のところ視覚による利用がもっとも多いのですが、その視覚にもさまざまな特性があり、人によって見え方が変わります。弱視や色弱（以前は色盲と呼ばれていた）のような見え方が異なる人や、加齢により老眼が進んだ人などいろいろな人への配慮が必要です。

【図5】読みやすい文字と読みにくい文字のサンプル

またスマートフォンのようなモバイル端末の場合、屋外の強い光の下では色が飛んでしまうことも多いです。薄い色の文字よりは濃い文字の方が読みやすいのですが、さまざまな場面でより多くの人に見てもらうための工夫も、アクセシビリティへの配慮の一つと言えます。

【図6】外光が強ければ、色が飛んで見えにくくなります

もっとも簡単に取り入れられるアクセシビリティへの配慮は、業務によって異なりますが、「見える」ことが前提の色のアクセシビリティは、専門的な知識がなくとも検証できる部分です。ウェブの技術的な知識はわからないけれども、ウェブアクセシビリティについて何かやっていきたいという場合には、もっとも多くの人が利用している視覚への配慮を行うのがよいでしょう。

次回はいよいよ最終回。技術的な知識がなくても取り組める“色”のウェブアクセシビリティについて、そして有益なサイト・ツールをご紹介します。

アクセシビリティは障害を持っている方や、高齢者のためだけのものではありません。 今回は、具体的にどんなサイトでウェブアクセシビリティを取り入れるか。そして、取り入れるのは難しくないのか？などをお伝えします。

どんなサイトでウェブアクセシビリティを取り入れる？

総務省の「みんなの公共サイト運用ガイドライン」では、国や地方公共団体などの公的機関でのウェブアクセシビリティの運用について書かれています。また公的機関に準じる電気・ガス・交通のようなインフラを形成する企業などでも、どんどんウェブアクセシビリティは取り入れられています。大規模災害が起きたとき、特定の人が情報を得られないという状況には問題があるからです。

また2016年4月1日に「障害を理由とする差別の解消の推進に関する法律（障害者差別解消法）」が施行され、上場企業をはじめとする多くの一般企業でもウェブアクセシビリティが多く取り入れられたのが見受けられました。

この障害者差別解消法では、基本方針として以下の4つが定められています。

• 一 障害を理由とする差別の解消の推進に関する施策に関する基本的な方向
• 二 行政機関等が講ずべき障害を理由とする差別を解消するための措置に関する基本的な事項
• 三 事業者が講ずべき障害を理由とする差別を解消するための措置に関する基本的な事項
• 四 その他障害を理由とする差別の解消の推進に関する施策に関する重要事項

この三には「事業者」と書かれており、その規模については何も触れられていません。つまりウェブアクセシビリティは、既にすべての事業者が考えなければならない当たり前のものになってきているのです。

企業のウェブ担当者で、制作を外部に委託している人も、ウェブアクセシビリティは特別なものではなくなっていることを知っておいた方がよいでしょう。

ウェブアクセシビリティって難しくないの？

JIS X8341-3:2016には試験実施ガイドラインがあり、さまざまな項目の達成基準を満たすことを目指すのであれば、それなりに敷居も高くなります。ですが、そもそも試験を行っても、すべての利用者に対応することはできません。それくらい人もウェブの使い方も多様だからです。また試験をクリアしたからといって、必ずしも使いやすいウェブサイトになるとも限りません。

ウェブアクセシビリティを向上させるには、HTMLをきちんとすることやビジュアルデザインでの配慮が必要なのですが、分業である場合には、自分の業務以外のことはどうにもならないこともあるでしょう。デザインは自分がするけど、コーディングは別の人が行うという場合や、制作そのものは外部の制作会社などに委託しているという場合には、どのくらいウェブアクセシビリティに配慮してもらえるかがわからないことも多いはずです。

【図2】ウェブの見た目と構造の概念図

また何らかのサービスを使っている場合には、そのサービスに依存することになります。Facebookを中心に使っている人は、Facebook自身のアクセシビリティの対応度に左右されてしまいます。

このように難しい側面もありますが、自分の守備範囲の中でできる範囲のことをするということであれば、基本的な部分を押さえて改善していくのは、それほど難しいものではありません。

自分が制作しないという場合でも、ウェブアクセシビリティに配慮することは十分にできるのです。

次回はアクセシビリティに取り組むにあたり、何からはじめたらいいのか。そして、気をつけたいことをお伝えします。

ウェブアクセシビリティとは？

最近よく聞かれるようになってきたウェブアクセシビリティという言葉、皆さんはご存じでしょうか？

日本ではウェブアクセシビリティに関する「JIS X8341-3:2016」というJIS規格があります。この規格はW3Cが定めたWCAG2.0というISO規格にもなっているガイドラインと同じもので、国際的にも通じる内容のものです。

正式には「高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェア及びサービス－第3部：ウェブコンテンツ」といいます。

ここには「この規格は、高齢者及び障害のある人を含む全ての利用者が、使用している端末、ウェブブラウザ、支援技術などに関係なく利用することができるように、ウェブコンテンツは確保すべきアクセシビリティの基準について規定する」と書かれています。つまりウェブアクセシビリティは「特定の誰か」が使いやすいことではなく、「すべての利用者が利用できる」ことを実現させるために必要なものなのです。

ですが、ウェブアクセシビリティの話題でよく出てくるのは、「目が見えない人が音声読み上げを使っている事例」で、どうしても「高齢者・障害者」のためのものだという印象を持っている人も多いのではないでしょうか。ですが、ウェブへの「アクセスのしやすさ」で困っているのは、高齢者や障害者だけではありません。

例えば怪我や腱鞘炎などで手が使いにくくなれば、手が不自由な人が遭遇するのと同じ問題に遭遇しますし、普段メガネをしている人が、メガネを忘れただけでも使いにくくなるはずです。ウェブアクセシビリティは他人ごとではなく、いつ自分が遭遇してもおかしくない問題なのです。

【図1】アクセシビリティは高齢者・障害者のためだけのものではありません

もちろん障害について配慮することは、ウェブアクセシビリティにおいては、たいへん重要なことです。しかし一口に障害と言っても視覚・聴覚・身体・発話・認知・学習・神経などに分けられますし、視覚の中でも、まったく見えない全盲の人と少ししか見えない弱視の人、特定の色の見分けが難しい色弱の人で配慮の方法は変わります。

そのような複雑な条件の全てに対応したウェブサイトを作るのは難しいのですが、そのよりどころとして、WCAG2.0やJIS X8341-3:2016などの規格を利用すれば、より多くの人が使えるウェブサイトに少しでも近づけていくことができます。それによって、ウェブ全体のアクセシビリティ環境がよくなっていくのです。

次回は、具体的にどんなサイトでウェブアクセシビリティを取り入れるかをお伝えしていきます。

画像：イラストAC

日本人男性の約20人に1人、日本人女性の約500人に1人が色弱（赤緑色弱）と言われているそうです。
色弱の方は、一部の色の組み合わせに対して色の感じ方が違います。

カラーユニバーサルデザインとは、色の感じ方の違いで得られる情報に差が出ないよう、すべての人に情報が正確に伝わるユニバーサルデザインのことを言います。
サイトデザインをするときの色選び、カラーユニバーサルデザインを意識していますか？

記事では、視覚障害とはどのようなものなのか、またサイトデザインの色使いで気にした方がいいことは何か、についてまとめられています。
たとえば、グラフや図で色を変えて説明をしているとき、色覚異常の方は文章での説明がなければそのグラフが何を表しているのか、正しい情報が得られていないかもしれません。

また、ユニバーサルデザインの対応が進んでいる鳥取県のサイトでは、「カラーユニバーサルデザインガイドブック」がPDFでダウンロードできます。推奨の配色カラーやチェックリストもあり参考になります。

すべての人に伝わるサイトづくり、コンテンツだけじゃなくデザイン面も考えておきたいですね。

視覚障害を意識したWebサイトを作るためのポイント | UX MILK

「Web・アプリとカラーユニバーサルデザイン」 – 勉強会メモ – Qiita

カラーユニバーサルデザインの推進/人権施策/とりネット/鳥取県公式サイト