MacのExcel(エクセル)2011 文字入力が遅い。。

MacでExcel2011をいまだに使っていますが、有名なバグがあり、文字入力が異様に遅く、大変困っていました。
文字(日本語)を打つ時の「文字を打つ→変換→Enter」の一連の流れが、「文字を打つ」の段階でまず数秒待たされます。

“MacのExcel(エクセル)2011 文字入力が遅い。。” の続きを読む

Google Analyticsで時間帯別・曜日別のデータを見るには?

Googleアナリティクスで時間帯別のデータを見たい。
デフォルトでも用意されているものの複数日の合算ができないため、あまり実用的ではありません。
そのため、カスタムレポートの活用がおすすめです。

“Google Analyticsで時間帯別・曜日別のデータを見るには?” の続きを読む

アクセシビリティに配慮した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

 

おすすめ記事