大塚孝二さまざまな人が閲覧するWebサイト。人々の生活を豊かにし、役立つツールでもあるWebサイト。身体的特徴、障がいを持った人でも使える道具でなければならないだろう。Webサイトはどのようなユーザーに対しても同じように情報を伝える配慮が必要である。この「様々な人への配慮する」という考えは、建築設計やプロダクトデザインするうえで必要となるユニバーサルデザインという考え方と共通するものである。このユニバーサルデザインという考え方は、Webサイトでは「Webアクセシビリティ」という考え方にあたる。Appleはこのアクセシビリティに30年も前から取り組んでいる。Googleは「Googleの使命は世界中の情報を整理し、世界中の人々がアクセスできて使えるようにすることです」と述べている。アクセシビリティの重要性が謳われている。今回はこの「アクセシビリティ」について深めてみよう。●そもそもアクセシビリティとは?大辞泉によるとアクセシビリティとは「近づきやすいこと。道具などの使いやすさ、情報やサービスに対する利用のしやすさ。アクセシビリティとは高齢者・障がい者を含む誰もが、様々な製品や建築やサービスなどを支障なく利用できるかどうか、あるいはその度合いを表す言葉である。感覚すべてに対して知覚できないものであってはならない。・操作可能ーインタフェースが、利用者の実行できないインタラクションを要求してはならない。・理解可能ーコンテンツ又は操作が、理解できないものであってはならない。・堅牢性ー技術やユーザーエージェントが進化していったとしても、コンテンツはアクセシブルなままであるべきである。咀嚼すると、「Webアクセシビリティ」とは年齢や身体的な能力に関係なく、誰もが同じように欲しい情報にたどりつけ、サイトを操作でき、利用できるように整備することを示している。建築でいえば、車椅子の人が建物の中にスムーズに入ることができるように、スロープを設計するように、Webデザインも同様で、高齢者、視覚障がい者、聴覚障がい者、身体障がい者でも健常者と同様にスムーズに情報を閲覧できるように配慮することをWebアクセシビリティと言う。●視覚障がい者はどのようにWebを利用しているのか?日本には約31万人の視覚障がい者がおり、視覚障がい者の多くの方がWebサイトを利用している。インターネットが普及するまで情報源はラジオ、テレビ、点字書籍などでしかなかったものが、インターネットの登場で情報供給量は爆発的に増えた。下に、視覚障がい者どののようにWebサイトを利用しているかYouTubeでアップされているので紹介する。視覚障がい者のWebページの使い方の動画を見ると分かるように、視覚障がい者、弱視の方に配慮したサイトを構築するには具体的にはどのようなことに配慮すれば良いのだろう。下に5つの留意点を整理してみた。$、¥、()など記号は読み上げられないので使用する際は注意が必要である。読み上げソフトではスペースは区切りと判断されるので、文章中に不用意にスペースを使用しない。2.テキストリンクの書き方に注意するテキスト中にリンクを示す言葉に、”申し込みはこちらまで”や”申し込みはここをクリック”などがあるが、音声ブラウザにはリンク部分のみを抽出して読み上げる機能があり、音声ブラウザユーザーはこの機能をよく利用している。リンク内容を示す「こちら」とか「ここをクリック」では理解ができない場合が多い。”申し込みは申し込みページから”などリンク部の言葉は具体的に記述する必要がある。3.画像の代替テキスト(alt属性)を記述する画像を配置す際は、代替テキスト(alt属性)をしっかり記述する。代替テキストは音声ブラウザでは読み上げられるのでimg要素にはalt属性をつけ、画像内容をテキスト記述を行うことで、音声で画像の内容を視覚障がい者にしっかり届けるようにする。4.コントラストの確保し、カラーユニバーサルを活用する文字と背景色のコントラストが弱いと読みにくくなってしまう。WebアクセシビリティのJIS規格「JISX8341-3:2016」では、コントラスト比を次のように定めている。テキスト及び文字画像の視覚的提示には、少なくとも4.5:1のコントラスト比が必要。サイズの大きなテキスト(日本語22pt、他言語18pt以上)及びサイズの大きな文字画像には、少なくとも3:1のコントラスト比が必要。色についてはコントラスト以外にも、色だけで内容を表現しないカラーユニバーサルの考え方で表現する。カラーユニバーサルデザインについては当ブログでは「色弱者に優しいWebサイトをデザインしよう」を参照。5.高齢者などが文字サイズを拡大可能にする文字サイズを大きくして表示できる文字拡大サービスを提供する。どのようなブラウザであっても必要に応じて文字サイズを変更すると、文字サイズが可変するスタイルにする。障がいの有無に関わらず、共生できる社会を目指すための法律である。公共施設、店舗などのサービスばかりではなく、Webサイトにおいてもアクセシビリティの確保が必要なのである。●iphoneのアクセシビリティ機能AppleはmacOSだけではなく、iOS、AppleWatchなどの製品にすべてのラインナップに対してアクセシビリティの開発を30年以上も前から行っている。iphone、ipadはタッチディバイスであるが、画面を読み上げる機能、音声入力などをサポートし、視覚障がい者の利用を可能にしている、ここではiphoneのアクセシビリティ機能の一端を紹介する。音声アシスト機能「Siri」は画面タッチ操作の必要がなく、知りたい情報があれば、画面入力しなくても、「今日の天気はどうなの?」など尋ねる今日の天気を教えてくれる。Siriはホームボタンを長押し、または「HeySiri」と呼びかけることでも起動する。「VoiceOver」は、画面上の情報をジェスチャーで操作する画面読み上げ機能である。ホームボタンを3回クリックするかSiriにボイスオーバーオンを言うと起動する。バッテリー残量、メール通知などを読み上げる機能もある。視覚障がい者はスマートフォンのキー入力は難しいが、VoiceOverをオンにすれば、キーをタップすることで、文字を読み上げるため、キーの位置を把握でき、入力が可能となる。「スピーチ」という読み上げ機能もあり、スピーチはWebサイトや電子書籍などを読み上げるツールである。スピーチは画面上部から下に2本指でスワイプすることで文章が音読される。このスピーチはEPUBとPDFに対応しているので、Kindleなどの本を読むことができる。3、iphoneに慣れない人に簡単にオン/オフの切り替えができる「ショートカット」機能iphone操作が不慣れな人や操作が複雑な場合、アクセシビリティ機能にショートカット機能が用意されている。ショートカットはホームボタンを3回素早く押すことで起動することができる。ショートカットとして指定できるのは、AssistiveTouch、VoiceOver、カラーフィルタ、スイッチコントロール、ズーム機能、ホワイトポイントを下げる、色の反転である。ショートカット機能を1つだけチェックすれば、3回クリックでその機能がオンとなり、複数選択すると選択メニューが現れる。主なものは色を反転は、ポジフォルムをネガフィルムのように変換するもの。ズーム機能は弱視の人のためで、虫眼鏡とウィンドウズームの2つから選ぶことがきる。スイッチコントロールは、Bluetooth対応のスイッチハードウェアを使って特定のアクション設定が可能である。参考:Appleのパーソナルなディバイスをすべての人が使えるように●まとめインターネットの世界でのアクセシビリティとは、より情報を得やすくすることである。なかでも、視覚や聴覚、身体に障がいがあり、一般的な操作が困難な人に向けての機能を指し、何か特別な機能のように感じらるが、近い将来、このアクセシビリティを意識したサイト設計は当たり前のこととなるだろう。アクセシビリティに配慮するということはWebサイトをシンプルにデザインし、シンプルな機能として仕様を改善することであり、そのようにデザインすることは、障がいを持った方ばかりでなく、健常者にとっても利用しやすいサイトととなり、結果としてユーザビリティの向上に繋がり、さらにはコンバージョン率アップに繋がるのだ。自社サイトは、どこまでアクセシビリティを意識した設計を行っているか、一度、見直してみるのも良いだろう。紹介、ECサイト運営に役立つ記事やマーケティング戦略について紹介します。ネットショップ運営者やネットショップ関係者は是非購読ください。