はじめに

こんにちは、最近はもっぱらUIやUXについての記事を書いているS.Tです。
いきなりですが、以前に書いたこの記事を読まれた方はおられるでしょうか。

関連記事

デザイナーとコーダーの橋渡し-スタイルガイドの大切さ-

はじめに「なにか想定していたものと違う」「これはどういう意図なのだろう」何かを作ろうとしたとき、人は必ず、理想とするものを頭の中に持っています。し...

なぜ、この記事を今取り上げたかと言いますと、サムネイルに注目してほしいからです。このサムネイルは私が商用利用可のオープンライセンスの素材を使用して作成したものですが、今回見ていただきたいポイントはタイトルと背景色のコントラスト比です。

使用したサムネイル画像

このサムネイルを作ったときは、タイトルと背景の色をあえて似たものにして馴染ませ、全体の色バランスを整えるという意図でもって作っていました。しかし、今見返してみると、どうにも見にくいという印象を持ちます。そこでWebツールのコントラストチェッカーを用いて確認を取ってみました。
（参考:色のコントラストチェッカー）

コントラストチェッカー

右側の欄にNGという文字が3つ縦に並んでいるのがわかるかと思います。これは要するにコントラスト比が足りなくて読みにくいと判断されたということです。悲しい結果になりましたが、さてこのコントラスト比が足りないという判断は何を基準になされたのでしょうか。

今回はその判断基準と密接に関わる、WEBアクセシビリティについてお話していきたいと思います。

結論を言えば、WEBアクセシビリティは今後極めて重要になっていくと筆者は考えています。
なぜなら、アクセシビリティとダイバーシティ（多様性）を推進する現状の流れは不可分だからです。

アクセシビリティ（accessibility）とは

まずWEBアクセシビリティとはなにかという前に、アクセシビリティという言葉について説明します。語源はaccess（到達、入手）とability（できること、能力）から来ています。accessibilityを訳すと「入手のしやすさ」や「アクセス（到達）しやすさ」という意味になります。

さて、先程のサムネイルをもう一度見てみてください。ここでいうアクセシビリティ（到達のしやすさ）とは「文字の読みやすさ=視認性」と読み替えてもらって構いません。どうでしょう、きっと読みにくいと感じた方が多いのではないでしょうか。

なぜ読みにくいかというと、冒頭でも触れたようにコントラスト比が足りないからです。文字の大きさや太さによって異なりますが、WEBでは文字と背景のコントラスト比が4.5以上であることが推奨されています。今回のケースではコントラスト比が2.127しかなかったため基準値以下と判断されてしまいました（注釈:画像についてはまた基準が異なります。今回は文字と背景のコントラスト比について説明をしたかったのでサムネイル画像を例にさせていただきました）。

このコントラスト比4.5という数値はW3Cという非営利の標準化団体が定めたものです。

https://www.w3.org/WAI/（英語）

WCAG2.0（英語）

アクセシビリティとしては他にも代替テキストの使用、テキストサイズなどの項目などがあります。

リンク先を見ると結構な項目があったので、見た人の中には気圧された方もいるかもしれません。実際、これに全てに対応しなければいけないと考える方は多いです。もちろん、すべてに対応できればそれに越したことはありませんが、リソースが足りずに対処できないことがほとんどでしょう。なので、すべてに対応するのではなく、対応できるところは対応する、というのが現実的なところになるかと思います。

さて、ではWEBアクセシビリティを達成しようと思ったら、一体何に気をつければよいのでしょうか。

ポイントは3つ。文字、コントラスト、そして気遣いです。

WEBアクセシビリティとしての文字とコントラスト

WEBサイトは人に見られることを前提にしています。そのため殆どのサイトでは訪問者に対して情報を理解しやすく伝えることが重要です。サイトには様々な要素がありますが、特に文字の取り扱いには注意しなければなりません。なぜなら、文字はほぼすべてのWEBサイトにある要素だからです。もし、先に示したサムネネイルのように文字と背景のコントラスト比が小さかったり、行間がとても狭まっているととても見にくいものになってしまいます。

（左:コントラスト比、行間がともに小さく見にくい。右:コントラスト比、行間ともに適切）

コントラスト比については少し前に触れたようにWCAG2.0で定められています。行間・文字間（以下、テキスト間隔）についてはWCAG2.0のあとに策定されたWCAG2.1で定めています。テキスト間隔が狭まっていると読みにくくなるので、WCAG2.1で新たに追加されたのは当然の流れであったでしょう。テキスト間隔の達成基準は以下のようになっています。

• フォントサイズの1.5倍以上の行の高さ（行間隔）
• 次の段落の間隔をフォントサイズの少なくとも2倍
• フォントサイズの0.12倍以上の文字間隔
• フォントサイズの0.16倍以上の単語間隔

これらの達成基準に適合するのは決して難しいことではありません。もし、サイトの新規作成やリニューアルを考える機会があれば、是非達成してみてください。

WEBアクセシビリティの推進と気遣いの関係

なぜ、WEBアクセシビリティの推進が必要なのか。ポジティブ（積極性）とネガティブ（消極的）の2つの方向性から見ていきましょう。

ピザが注文できなくて訴訟に-ネガティブな理由-

WEBアクセシビリティを推進するネガティブな理由は、それをしないことで不利益が発生するからです。

これはアメリカの例になりますが、WEBアクセシビリィが不十分だったために、サイト利用者が割引のピザを注文することができないとして訴訟問題に発展しました。判決は最高裁まで争われましたが、視覚障害者に対するアクセシビリティ対応が不十分だっとして、運営会社が敗訴しています。

日本で同様の裁判が開かれた際に同様の判決になるかどうかは不明です。しかし、WEBアクセシビリティを推進しないとこのような訴訟リクスがあるかもしれない、ということは念頭に置くべきでしょう。これがWEBアクセシビリティを推進するネガティブな理由です。

ダイバーシティを推進する-ポジティブな理由-

WEBアクセシビリティを推進するポジティブな理由は、それが同時にダイバーシティを推進するからです。
ダイバーシティ（Diversity）の概念を説明するとそれだけで紙面がいくらあっても足りないので、ここでは単純に多様性という意味で捉えてください。ところで、アクセシビリティの話をしているのになぜダイバーシティの話になるのか、不思議に思っている方もおられるかもしれません。ですが多様性というワードを考えていくと両者が不可分の関係性であることが見えてきます。

WEBアクセシビリティを考慮して作られたサイトは、多様な人が同じ体験を受けることができるサイトです。さきほどのピザの訴訟問題では、サイトを利用した際により安くピザを注文できなかったことが問題のポイントになっていました。ここで重要なのは、本来アクセシビリティが担保されていれば受けられたサービスを訴訟した男性が受けることができなかった、という点です。一見すると、男性がサービスを受けられなかったのだから、男性が一方的に損をしたという図式に落とし込められるかもしれません。しかし、果たしてそれは正しいのでしょうか。

筆者の考えは違います。ピザの訴訟で言えば、運営会社はアクセシビリティを考慮しなかった結果、サービスを受けられたかもしれない層を取り逃していた、と見るべきです。つまり機会損失を生んでいたということで、運営会社としても損をしていたのです。

アクセシビリティを推進するということは、多様な層にリーチをかけることと同義です。またダイバーシティを推進することにも繋がるため、企業としての姿勢を示すことにも繋がります。

本質は気遣い

ネガティブな理由とポジティブな理由の2つを見てきましたが、アクセシビリティの本質は他人に対する気遣いであると、筆者は思います。WEBアクセシビリティを推進する際は、単に他がそうしているからというだけでなく、なぜそれをするのか、しなければならないのかを振り返っていただけると幸いです。

おわりに

アクセシビリティの具体的な話から始まり、最後はダイバーシティまで話が進みました。

アクセシビリティを推進する本質は気遣いであると言いましたが、これはすべてのことに言えることだと思います。
弊社ではWEBサイト制作をする際、チーム一丸となってサイト制作を行っております。もし、サイト制作でお悩みの方がおられましたら、弊社問い合わせまでご連絡ください。お客様の目的にあったサイト制作のプランをご提案させていただきます。

➡まずはお気軽にお声がけください。 よろしくお願いいたします。