アクセシビリティに配慮したWebサイトをつくるために〜JIS X 8341-3〜

障がい者の方、高齢者の方にも、Webサイトをより良い状態で閲覧してもらうために…。
WebサイトにもJIS規格があるのをご存知でしょうか?

 

JIS規格「JIS X 8341-3」

「JIS X 8341-3(高齢者・障害者等配慮設計指針-情報通信における機器,ソフトウェア及びサービス-第3部:ウェブコンテンツ)」
…というJIS規格が存在します。

一体いつから!?

2004年6月に初めて制定され、最新版は2016年3月に改正されています。

  • 2004年06月 → JIS X 8341-3:2004
  • 2010年08月 → JIS X 8341-3:2010
  • 2016年03月 → JIS X 8341-3:2016

※誤って2004年を2014年と記載していました…大変失礼いたしました(2017年3月7日記)

JIS X 8341-3 とは、どんな規格?

「高齢者・障害者等配慮設計指針」とうたわれているとおり、高齢者や障がい者の方でも不便なくWebサイトを閲覧し、情報を得られるようアクセシビリティに配慮するための指針です。

日本工業標準調査会:データベース-JIS詳細表示「JIS X 8341-3(閲覧のみ)」
閲覧できる環境が限られているようです

具体的にどういった項目を障がいとして定めているかについては、
「全盲、弱視、色覚障害、聴覚障害、肢体不自由、高齢者」
がそれにあたります。

どんなサイトで準拠されているの?

国及び地方公共団体等の公的機関のホームページ等が、高齢者や障害者を含む誰もが利用しやすいものとなるよう、

総務省が音頭を取り、JIS X 8341-3への準拠を進めています。

準拠されたWebサイト例

札幌市:札幌市公式ホームページのウェブアクセシビリティ方針
旭川市:ウェブアクセシビリティ方針について
稚内市:アクセシビリティの方針について

アクセシビリティとは?

例えば、パソコンでWebサイトを閲覧するとき。
多くの人は、マウスでカーソルを操作しながら画面を見る…といったスタンスを想像されるのではないでしょうか。
しかし、

  • マウスの操作が困難で、操作はキーボードのみ、という人がいます。
  • 色覚障害があり、多くの人が読める文字が読みづらい人がいます。
  • 視覚ではなく、聴覚で文字を「聴きながら」Webサイトを利用している人がいます。

…こういった状況で閲覧をされている方がいることは、身近な方や知り合いにでもいない限り、なかなか想像しづらいのではないでしょうか。
そして、もし前述の方が閲覧しようとしているWebサイトが、

  • キーボードだけで操作できる配慮がされていないWebサイトだったら
  • 文字の色が薄すぎたり、背景色と混同するような文字色が使われていたら
  • 文字が画像化されて読み上げ可能な文字自体が使われていなかったら

情報にアクセスする事自体が困難となってしまいます。
しかし、

  • tabボタンで適切に進めるよう配慮されていれば
  • 文字色と背景色に適切なコントラストが保たれていれば
  • Web上の文法にのっとった文章で、画像にもaltを適切に設定していれば

情報にアクセスすることが可能になります。
こういった情報へのアクセスのしやすさの事を「アクセシビリティ」と呼ばれます。

配慮される具体的な内容は?

例えば、色覚障害の方や高齢者(白内障など)への配慮として、背景色と文字色のコントラストに基準が設けられています。最低限レベルのコントラスト比として、次のように定められています。

1.4.3 コントラスト(最低限レベル)の達成基準

テキスト及び文字画像の視覚的提示には,少なくとも4.5:1 のコントラスト比がある。

4.5:1 …と数字で聞いても、まったくイメージがわきません。それに、コントラスト比は、どうやって調べれば良いのでしょうか?

コントラスト比を調べるツールがあります。

▼カラーコントラストアナライザー
Colour Contrast Analyser

Windows、Mac、ともに対応されており使いやすくおすすめです。
このツールを使ってしらべてみると…。

例えば文字色が白(#ffffff)の場合で、背景色をグレー(#333333)から段々と薄くしていくとすると…。

背景色#333、文字色#fff、コントラスト比 12.6:1

↑コントラスト比が12.6:1と十分ですね。

 

背景色#666、文字色#fff、コントラスト比 5.7:1

↑背景がぐっと薄くなりましたが、まだまだ可読性は高いです。コントラスト比 は、5.7:1。

 

背景色#777、文字色#fff、コントラスト比 4.5:1

↑ ストップ!!ここでコントラスト比4.5:1です。

大きな文字でない場合はここが限度ということです。ちなみに、大きな文字とはどの程度なのでしょう?

a) 大きな文字 サイズの大きなテキスト及びサイズの大きな文字画像には,少なくとも3:1 のコントラスト比がある。

「JIS X 8341-3:2016」の注釈によると大きな文字サイズとは、

少なくとも18 ポイント,又は14 ポイントの太字の(テキスト)。全角文字のフォントは,それと同等の文字サイズ。

と定義されています。

背景色#969696、文字色#fff、コントラスト比【3.0:1】
18 ポイントの文字
16ポイントの文字
14 ポイントの文字(太字)

こんな感じですね。
上記のサンプルでは16ポイントだとアウト、18ポイントと、14ポイントの太字はセーフとなります。

文字と背景色ひとつとっても、このように細かく基準が設けられているのです。

ますます重要となるアクセシビリティと障害者差別解消法

平成28年4月1日から施行された「障害を理由とする差別の解消の推進に関する法律」をご存知でしょうか。

障害者差別解消法ポスター▶︎内閣府:障害者差別解消法

国連の「障害者の権利に関する条約」の締結に向けた国内法制度の整備の一環として、全ての国民が、障害の有無によって分け隔てられることなく、相互に人格と個性を尊重し合いながら共生する社会の実現に向け、障害を理由とする差別の解消を推進することを目的として制定されたものです。

つまり、障がいによりWebサイトにアクセスできず困っている方がいて指摘があれば、対応する必要がでてくる場合があるということになります。

まとめ

もはや、インフラのひとつと化したWeb。日常生活に無くてはならないものとなりました。公的機関のWebサイトでなくとも、こういった規格などは適宜取り入れていきたいですね。
障がい者、高齢者にとってアクセシビリティが高いということは、みんなにとっても読みやすいサイトであるということ。アクセシビリティの高いWebサイト制作ができるよう、意識を高めていきたいです。