« ブログのトップページに戻る

自社サイトはアクセシビリティを意識してますか?

   投稿者 : 2017年10月26日 By

タイトルイメージ画像

さまざまな人が閲覧するWebサイト。そして人々の生活を豊かにし、役立つツールでもあるWebサイト。Webサイトはどのような人種、性別、年齢、さらには身体的特徴、障がいを持った人でも使える道具でなければならないだろう。
そして、Webサイトはどのようなユーザーに対しても同じように情報を伝える配慮が必要である。この「様々な人への配慮する」という考えは、建築設計やプロダクトデザインするうえで必要となるユニバーサルデザインという考え方と共通するものである。
このユニバーサルデザインという考え方は、Webサイトでは「Webアクセシビリティ」という考え方にあたる。
Appleはこのアクセシビリティに30年も前から取り組んでいる。そしてGoogleは「Googleの使命は世界中の情報を整理し、世界中の人々がアクセスできて使えるようにすることです」と述べている。つまりアクセシビリティの重要性が謳われている。
今回はこの「アクセシビリティ」について深めてみよう。

 

●そもそもアクセシビリティとは?

大辞泉によるとアクセシビリティとは「近づきやすいこと。物を得やすいこと。また、道具などの使いやすさ、情報やサービスに対する利用のしやすさ。」とある。
つまり、アクセシビリティとは高齢者・障がい者を含む誰もが、様々な製品や建築やサービスなどを支障なく利用できるかどうか、あるいはその度合いを表す言葉である。
Webサイトにおいての「Webアクセシビリティ」についてはWeb Content Accessibility Guidelines(WCAG 2.0)というW3Cが定めたガイドラインが存在し、次の4つの原則を中心に構成されている。

  • ・知覚可能ー利用者の感覚すべてに対して知覚できないものであってはならない。
  • ・操作可能ーインタフェースが、利用者の実行できないインタラクションを要求してはならない。
  • ・理解可能ーコンテンツ又は操作が、理解できないものであってはならない。
  • ・堅牢性ー技術やユーザーエージェントが進化していったとしても、コンテンツはアクセシブルなままであるべきである。

咀嚼すると、「Webアクセシビリティ」とは年齢や身体的な能力に関係なく、誰もが同じように欲しい情報にたどりつけ、サイトを操作でき、利用できるように整備することを示している。

建築でいえば、車椅子の人が建物の中にスムーズに入ることができるように、スロープを設計するように、Webデザインも同様で、高齢者、視覚障がい者、聴覚障がい者、身体障がい者でも健常者と同様にスムーズに情報を閲覧できるように配慮することをWebアクセシビリティと言う。

 

●視覚障がい者はどのようにWebを利用しているのか?

日本には約31万人の視覚障がい者がおり、視覚障がい者の多くの方がWebサイトを利用している。インターネットが普及するまで情報源はラジオ、テレビ、点字書籍などでしかなかったものが、インターネットの登場で情報供給量は爆発的に増えた。
視覚障がいを持たれる方はどのようにWebサイトを通して情報を取得しているのだろうか? 下に、視覚障がい者どののようにWebサイトを利用しているかYouTubeでアップされているので紹介する。

 

視覚障害者(全盲)のウェブページ利用方法

 

視覚障害者(弱視)のウェブページ利用方法

 

●Webアクセシビリティを確保するための5つ留意点

視覚障がい者のWebページの使い方の動画を見ると分かるように、視覚障がい者、弱視の方に配慮したサイトを構築するには具体的にはどのようなことに配慮すれば良いのだろう。
下に5つの留意点を整理してみた。

 

1.環境依存文字、スペースは使用しない

環境依存文字を使うと、文字化けが起こったり、視覚障がい者が利用する読み上げソフトが読み上げられなかったりする可能性がある。環境依存文字、※、$、¥、()など記号は読み上げられないので使用する際は注意が必要である。 また、読み上げソフトではスペースは区切りと判断されるので、文章中に不用意にスペースを使用しない。

 

2.テキストリンクの書き方に注意する

テキスト中にリンクを示す言葉に、”申し込みはこちらまで”や”申し込みはここをクリック”などがあるが、音声ブラウザにはリンク部分のみを抽出して読み上げる機能があり、音声ブラウザユーザーはこの機能をよく利用している。リンク内容を示す「こちら」とか「ここをクリック」では理解ができない場合が多い。”申し込みは申し込みページから”などリンク部の言葉は具体的に記述する必要がある。

 

3.画像の代替テキスト(alt属性)を記述する

画像を配置す際は、代替テキスト(alt属性)をしっかり記述する。代替テキストは音声ブラウザでは読み上げられるのでimg要素にはalt属性をつけ、画像内容をテキスト記述を行うことで、音声で画像の内容を視覚障がい者にしっかり届けるようにする。

 

4.コントラストの確保し、カラーユニバーサルを活用する

文字と背景色のコントラストが弱いと読みにくくなってしまう。WebアクセシビリティのJIS規格「JISX8341-3:2016」では、コントラスト比を次のように定めている。

  • テキスト及び文字画像の視覚的提示には、少なくとも4.5:1のコントラスト比が必要。
  • サイズの大きなテキスト(日本語22pt、他言語18pt以上)及びサイズの大きな文字画像には、少なくとも3:1のコントラスト比が必要。

また、色についてはコントラスト以外にも、色だけで内容を表現しないカラーユニバーサルの考え方で表現する。

カラーユニバーサルデザインについては当ブログでは「色弱者に優しいWebサイトをデザインしよう」を参照。

 

5.高齢者などが文字サイズを拡大可能にする

文字サイズを大きくして表示できる文字拡大サービスを提供する。
どのようなブラウザであっても必要に応じて文字サイズを変更すると、文字サイズが可変するスタイルにする。

 

2016年4月に「障害者差別解消法(障害を理由とする差別の解消の推進に関する法律)」が施行され、行政公共機関ばかりではなく、民間事業者に対してもアクセシビリティへの配慮が義務付けられた。
障害者差別解消法とは障がいの有無に関わらず、共生できる社会を目指すための法律である。公共施設、店舗などのサービスばかりではなく、Webサイトにおいてもアクセシビリティの確保が必要なのである。

内閣府:障害を理由とする差別の解消の推進

 

 

●iphoneのアクセシビリティ機能

AppleはmacOSだけではなく、iOS、AppleWatchなどの製品にすべてのラインナップに対してアクセシビリティの開発を30年以上も前から行っている。iphone、ipadはタッチディバイスであるが、画面を読み上げる機能、音声入力などをサポートし、視覚障がい者の利用を可能にしている、ここではiphoneのアクセシビリティ機能の一端を紹介する。

 

1.「Siri」は視覚障がい者の強い味方

音声アシスト機能「Siri」は画面タッチ操作の必要がなく、知りたい情報があれば、画面入力しなくても、「今日の天気はどうなの?」など尋ねる今日の天気を教えてくれる。 Siriはホームボタンを長押し、または「HeySiri」と呼びかけることでも起動する。

siri初期画面

 

2.画面情報を読み上げる「VoiceOver」

「VoiceOver」は、画面上の情報をジェスチャーで操作する画面読み上げ機能である。ホームボタンを3回クリックするかSiriにボイスオーバーオンを言うと起動する。 バッテリー残量、メール通知などを読み上げる機能もある。
また、視覚障がい者はスマートフォンのキー入力は難しいが、VoiceOverをオンにすれば、キーをタップすることで、文字を読み上げるため、キーの位置を把握でき、入力が可能となる。
また、「スピーチ」という読み上げ機能もあり、スピーチはWebサイトや電子書籍などを読み上げるツールである。スピーチは画面上部から下に2本指でスワイプすることで文章が音読される。このスピーチはEPUBとPDFに対応しているので、Kindleなどの本を読むことができる。

VoiceOver初期画面

 

3、iphoneに慣れない人に簡単にオン/オフの切り替えができる「ショートカット」機能

iphone操作が不慣れな人や操作が複雑な場合、アクセシビリティ機能にショートカット機能が用意されている。 ショートカットはホームボタンを3回素早く押すことで起動することができる。
ショートカットとして指定できるのは、AssistiveTouch、VoiceOver、カラーフィルタ、スイッチコントロール、ズーム機能、ホワイトポイントを下げる、色の反転である。ショートカット機能を1つだけチェックすれば、3回クリックでその機能がオンとなり、複数選択すると選択メニューが現れる。
主なものは色を反転は、ポジフォルムをネガフィルムのように変換するもの。
ズーム機能は弱視の人のためで、虫眼鏡とウィンドウズームの2つから選ぶことがきる。
また、スイッチコントロールは、Bluetooth対応のスイッチハードウェアを使って特定のアクション設定が可能である。

ショートカット初期画面

参考:Appleのパーソナルなディバイスをすべての人が使えるように

 

●まとめ

インターネットの世界でのアクセシビリティとは、より情報を得やすくすることである。
なかでも、視覚や聴覚、身体に障がいがあり、一般的な操作が困難な人に向けての機能を指し、何か特別な機能のように感じらるが、近い将来、このアクセシビリティを意識したサイト設計は当たり前のこととなるだろう。
アクセシビリティに配慮するということはWebサイトをシンプルにデザインし、シンプルな機能として仕様を改善することであり、そのようにデザインすることは、障がいを持った方ばかりでなく、健常者にとっても利用しやすいサイトととなり、結果としてユーザビリティの向上に繋がり、さらにはコンバージョン率アップに繋がるのだ。
自社サイトは、どこまでアクセシビリティを意識した設計を行っているか、一度、見直してみるのも良いだろう。

タグ:

このエントリーをはてなブックマークに追加
 

今なら海外展開の為の成功BOOKを無料ダウンロードできます。是非この機会にお読みください。