アクセシビリティに配慮した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サイト制作ができるよう、意識を高めていきたいです。

 

Google Maps スクロールに関するカスタマイズ

スワイプ時に、Google Mapsを意図せず操作してしまってページのスクロールが先へ進まずに困る…。
これが解消されたのは、まだ記憶に新しいところ。

スマホ閲覧時のGoogle Mapsが使いやすくなった!

スワイプ中の指がGoogle Mapsに触れると、「地図を移動させるには指2本で操作します」と地図上に表示され、地図が意図しない挙動(地図がスクロールするなど)をしないようになりました。

20170116_img

2016年11月25日 Google Cloud Japan 公式ブログで、Google Maps APIの仕様変更に関する記事が紹介されています。

米国時間 11 月 15 日、Google はマップを埋め込んでいるサイト向けに、直感的なスクロール操作が行える機能を導入し、モバイル デバイス上でフルスクリーン コントロールをデフォルトで表示するようにしました。これにより、ユーザーはモバイル ブラウザ上でのマップ操作をより直感的に行え、フラストレーションを感じることも少なくなるはずです。

【参考】
▼Google Maps API 新機能:スマートなスクロール機能をモバイル ウェブ マップに導入
https://cloud-ja.googleblog.com/2016/11/google-maps-api_25.html

 

この嬉しい仕様変更は、Google Maps JavaScript API に「gestureHandling」というオプションが新たに追加されたことによるもの。

今まで大問題ではないけれど、少しやりづらかった部分が解消されましたね。
個人的にもスマホで閲覧中、Google Mapsがでてくると無意識に画面の端をスワイプする癖がついてました。

ここまではいいのですが、じゃあ、

パソコン閲覧時のGoogle Mapsは?

と、思いました。

パソコンで見るGoogle Mapsはどうなの?

パソコンで見るGoogle Mapsも、スクロール中にGoogle Mapsにさしかかると意図せず地図が拡大され、とても煩わしいですよね。
解決方法は既にいくつかあり、

  • Google Maps API を使う(このサイト内の関連ページへ
    var myOptionsの項目で
    scrollwheel: false /*ページスクロール中のマウスに反応させない*/を追記すればOK
  • iframeの場合は、style="pointer-events:none;" を使う
    ※これは地図がそもそも動かなくなるのでNG
  • iframeの場合、一度クリックすれば地図が操作できるようにjQueryでカスタマイズ

といった選択肢があります。
パソコン閲覧時の場合、スマホ閲覧時ほどの困り感はないですが、
かゆい所に手が届くカスタマイズではないでしょうか。

 

【参考サイト様】
http://itstudio.co/2016/05/31/5802/
http://blog.ddwnet.com/archives/1213.html

 

おすすめ記事

 

Google Maps API で地図をカスタマイズしてみる 2016 → 2017

Webサイト制作では必ずと言ってよいほどお世話になっている「Google Maps」。
ディレクションにまわるようになってからは直接コードを触る機会も少なく、カスタマイズも未経験のままだったので、ここでひとつ勉強のためにやってみようと思い立ちました。
2016年6月と10月に仕様変更がされているため、Web上の情報には古い(仕様変更前の情報)ものが多く悩みながらの実装となりました。

古い情報で実装して一旦失敗、その後新しい手法で実装成功、の流れで記載していきますのでお急ぎの方は「APIキーが必要」からご覧ください!

Google Maps API で地図をオリジナルにカスタマイズ!

【1】Google Maps APIをhead内で読み込む

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>

…と書くだけです。
※後ほどのべますが、これだと地図が表示されず困ることになります。

【2】bodyタグにonloadを記述

<body onload="initialize();">

【3】地図を埋めたい場所に指定のコードを記述

※jsは適宜外部ファイル化してください

<script>
function initialize() {
  var latlng = new google.maps.LatLng(43.0685834,141.348829);/*表示したい場所の経度、緯度*/
  var myOptions = {
    zoom: 15, /*拡大比率*/
    center: latlng, /*表示枠内の中心点*/
    mapTypeId: google.maps.MapTypeId.ROADMAP/*表示タイプの指定*/
  };
  var map = new google.maps.Map(document.getElementById('gmap_ct'), myOptions);
/*スタイルのカスタマイズ*/
 var styleOptions =
[
 {
 "featureType": "landscape.natural",
 "stylers": [
 { "color": "#90c892" }
 ]
 },{
 "featureType": "road",
 "stylers": [
 { "gamma": 2.61 },
 { "color": "#ffffff" }
 ]
 },{
 "featureType": "transit.line",
 "stylers": [
 { "invert_lightness": true },
 { "visibility": "simplified" },
 { "color": "#ffbe00" }
 ]
 },{
 "elementType": "labels.icon",
 "stylers": [
 { "visibility": "off" }
 ]
 },{
 "featureType": "landscape.man_made",
 "elementType": "geometry",
 "stylers": [
 { "visibility": "simplified" },
 { "color": "#ffce5f" }
 ]
 },{
 "featureType": "poi",
 "elementType": "geometry",
 "stylers": [
 { "color": "#ffde5b" }
 ]
 },{
 "featureType": "water",
 "stylers": [
 { "color": "#dfe8ff" }
 ]
 },{
 "featureType": "transit.station",
 "elementType": "geometry",
 "stylers": [
 { "color": "#fab022" }
 ]
 }
];
 
 var styledMapOptions = { name: 'あーと・とー' }
 var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
 map.mapTypes.set('sample', sampleType);
 map.setMapTypeId('sample');
 
/*オリジナルアイコンの取得*/
var icon = new google.maps.MarkerImage('/xxxxxx.png',/*アイコンの場所*/
 new google.maps.Size(44,44),/*アイコンのサイズ*/
 new google.maps.Point(0,0)/*アイコンの位置*/
);
 
/*マーカーの設置*/
var markerOptions = {
 position: latlng,/*表示場所と同じ位置に設置*/
 map: map,
 icon: icon,
 title: 'ここです'/*マーカーのtitle*/
};
var marker = new google.maps.Marker(markerOptions);
 
}
</script>
<div id="gmap_ct" style="width:100%;height:640px;"></div>

※ソースコードは参考サイト様より
※色に関するカスタマイズは奥が深いので、今回は解説省略です。
スタイル化されたマップ |Google Maps JavaScript APIをご参照ください。

…さて、これでまずは地図が表示されるはず、だったのですが。。。

スクリーンショット 2017-01-15 1.39.13

エラーが発生してしまいましたね。

APIキーが必要

2016年6月22日から新規サイトでGoogle Mapsを使用する場合はAPIキーが必須になりました。
参考サイト様

APIキーが必要…といわれても、特に取得せずとも表示されているサイトもあるよ?
と思っていたら、2016年の6月22日から仕様が変更された模様。
それ以前のものは、APIキーなしで表示されているという事のようです。

では早速、APIキーを取得していきましょう。

1)ウェブ向け Google Maps API へアクセス。

スクリーンショット 2017-01-15 2.01.382)画面右上のキーを取得ボタンをクリック。Google Maps ウェブ API をアクティベートする、のウィンドウが出たら、右下の「続ける」をクリックします。

3)Google APIs に移動しました。画面の指示に従い進みます。
スクリーンショット 2017-01-15 2.08.564)Keyに任意の名称をつけて、進みます。
スクリーンショット 2017-01-15 2.12.502017-01-15-2.16.535)取得した「キー」をhead内で読み込みます。

<script src="https://maps.googleapis.com/maps/api/js?key=xxxxxx"></script>

6)「エラーが発生しました」と表示されていた場所に、無事GoogleMapが表示されました!
スクリーンショット 2017-01-15 2.26.16

Google Maps API 無償版には制限がある

Google Maps API 無償版のポリシー変更により2016年10月12日より地図が表示されない場合があります。

1.APIの使用が25,000回/日を超えた場合、以後エラーとなり地図が表示されない。

2.Google Maps APIが古いバージョンの場合、エラーとなり地図が表示されない。

参考サイト様より

…ということで、今まで使っていたものが使えなくなる場合があるのですね。
こちらの仕様についても要注意です。

おすすめ記事

 

Webサイトで使えるフォント〜font-family〜

個人的なメモ。
標準搭載フォントを並べて見た目で比較してみたくなりました。

標準搭載 ゴシック系フォント(日本語)

fonts01

Windows 8.1、OS X Mavericks(10.9)からは、游ゴシック体が標準搭載され、WinとMac両方で表示が可能となりました。

日本語フォント(Webフォントおすすめ)

fonts02

ご存知、Googleフォントの日本語フォントです。癖のない、美しい書体。これが無料というのが本当にありがたい。

欧文フォント(Webフォントおすすめ)

fonts03

どちらもGoogleフォントです。欧文もNoto Sansがきれいなのですが、個人的にはLatoの方が好きだったりします。数字の詰めや数字の形が好みです。

Webフォントは、2016年は個人的に少しずつ使うようになってきましたが、既に普通にフォントを選べる時代。デザインの自由度が高まりますね。

ただ、Webフォントを使用していると環境によっては若干表示が重かったりもするので注意。それほど気にはなりませんが、表示軽量化のために標準搭載フォントだけで仕上げるのも一興かなとも思います。

イラレで小文字が打てない…?スモールキャップス機能について

イラレで大文字しか打てない。小文字が大文字の形になる。。

Illustrator(イラストレーター/略称:イラレ)で作業中に、文字が思い通りに打てずに困ったことになりました。

アルファベットの小文字が、大文字の形になってしまうんです…。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-15-21-01-28 %e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-15-21-01-34

フォントの問題か?と思い、フォントを変えてみましたが全て同じ。
イラレを再起動したけれど、だめ。
パソコン画面右上にある入力選択肢を操作するも、解決せず。

しばらくGoogle検索と格闘し、やっと原因がわかりました。

スモールキャップスにチェックが入っていたせいでした!

…はじめてきいた名称でした(^^;)

そして当然、そんなところにチェックした記憶もなく。
ちなみにスモールキャップスはここにあります。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-15-21-06-16

スモールキャップス、そしてオールキャップスという機能があります。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-15-21-01-40 %e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-15-21-01-46 こんな機能があったとは…。
使いこなせれば、色々と便利になるんだろうなと思いつつ、スモールキャップスのチェックをはずして一件落着でした。参考サイト様に感謝。

▼参考サイト様
Illustrator(イラストレーター)でオールキャップス・スモールキャップス