デザインとグラフィックの総合情報サイト
[エムディエヌ・デザイン・インタラクティブ]

ウェブアクセシビリティ・レポート 第13回 シニアに向けてのアクセシビリティ

ウェブアクセシビリティ・レポート

文=KeiYu HelpLab石田優子
ユーザーの視点に立ったサイト構築、運営に関するユーザビリティ、アクセシビリティの向上などのコンサルティング、調査などを行っている。


第13回
シニアに向けてのアクセシビリティ

団塊の世代以上のシニアがパソコンやインターネットを利用する機会が増えてきたが、シニアはパソコン操作に不慣れな場合が多く、思いがけないところでつまずく。今回はシニアに優しいWebサイトのあり方について考えてみる。

記事協力
小嶋新(NPO法人しゃらく)


ユーザーサイドのスキルや知識

シニアにとっての文字拡大機能
シニア向けのアクセシビリティの配慮としてまず思いつくのは文字拡大機能である。このための配慮として、文字サイズをCSSでの可変指定にし、JavaScriptを利用した文字拡大縮小ボタンを各ページにつけているサイトが増えている。「+」ボタンで一段階大きく、「-」ボタンで一段階小さくを目印にしている場合が多いが、この文字拡大縮小ボタンの概念がシニアには理解できず、ボタンだけでは見過ごしてしまう。

そもそも、ブラウザで文字サイズを拡大できることを知らないというシニアが実に多い。「パソコンを使い始めて、2年して初めてブラウザで文字拡大できるということを知った」という声が実際にある。

ターゲットユーザーがシニア層の場合は、文字サイズを最初からブラウザ標準のサイズか【1】、14pt以上に設定しておくほうがよい。たとえ文字拡大機能を搭載していても、わからないために利用しないユーザーがシニア以外でも多いことを知っておいていてほしい。

【1】スローネット(www.slownet.ne.jp/)。シニア向けのサイトのため、デフォルトの文字サイズをブラウザ標準程度にしている。シニア専用サイトでも文字サイズが小さい場合が多いが、この程度のサイズは必要
【1】スローネット(www.slownet.ne.jp/)。シニア向けのサイトのため、デフォルトの文字サイズをブラウザ標準程度にしている。シニア専用サイトでも文字サイズが小さい場合が多いが、この程度のサイズは必要


文字拡大方法の説明ページを用意する
ターゲットユーザーが幅広く、情報量を多くするために文字サイズをブラウザ標準のサイズより小さくしている場合は、文字拡大縮小ボタン以外に、各ブラウザでの文字拡大方法を、操作の画像付きで説明したページを用意し、各ページからその説明ページにリンクする配慮がほしい。説明文だけでなく画像が必要なのは、そもそも「ブラウザ」とは何かわからないシニアが多く、自分が使っているブラウザの名前やバージョンなどを把握していないケースがあるからだ。

しかし、画像付きでそれが自分の使っているブラウザの見た目と同じだと、Internet Explorer、Netscapeといった名前はわからなくとも、画像を見て、何となく理解することができる。

その際、シニアは一般的なブラウザを使用しているだろうからシェアの高いInternet Explorerぐらいで十分だろうと思うのはまちがいだ。友人や家族からパソコンを譲り受けたり、だれかに設定してもらったパソコンをそのまま利用している人などもいる。実際、OS、ブラウザ、バージョン名の入力欄付きのフォームに「OSやブラウザとは何かわかりません」という言葉付きで舞い込んだ60代のユーザーの使用環境を聞いていたら、Firefoxだったという経験がある。Operaを使っている人もいた。このため、できるだけ多くのブラウザごとの説明ページが欲しい。

また、英語に弱い人が多いので【2】の事例のように「Internet Explorer(インターネットエクスプローラー)」とカタカナも添えるような配慮があるとより親切だ。シニア以外でも、多くの人にとってブラウザは、デスクトップのアイコンをクリックしたらホームページを閲覧できるといった感覚のものでしかない。

【2】山口県/文字拡大について(www.pref.yamaguchi.jp/theme/guidance/font.html)。各ページ右上の「文字拡大について」のテキストリンクから表示される説明ページ。Opera、Safari、Mac版 Internet Explorerまで多種類のブラウザでの文字拡大方法を画像入りで説明している
【2】山口県/文字拡大について(www.pref.yamaguchi.jp/theme/guidance/font.html)。各ページ右上の 「文字拡大について」のテキストリンクから表示される説明ページ。Opera、Safari、Mac版 Internet Explorerまで多種類のブラウザでの文字拡大方法を画像入りで説明している


Web制作者にとって当たり前のことでも、一般ユーザーにとっては理解できない概念や用語が多いため、せっかくWebアクセシビリティ機能を実装しても、ユーザーサイドのスキルや知識に合わせた配慮がないと使われない可能性が高いことには十分注意しよう。


シニアに敷居の高い入力作業

ログインは大きな壁
オンラインショッピングサイトなどで、会員登録してログインしないと購入できないところが増えつつあるが、これは一般ユーザーにとってめんどうで、サイトからの離脱率を高める。特にシニアにとっては、より難関だ。

まず、シニアは自分のメールアドレスを知らない場合がある。最初のメーラーの設定をだれかにしてもらい、デスクトップの手紙マークのアイコンをクリックすればメールを送受信できるといった覚え方をしているためだ。

また、メールアドレスを知っていても、入力段階で、大文字、小文字、全角、半角、「.(ドット)」と「,(コンマ)」の打ちまちがえなどもしがちだ。

さらに、パスワードを自分で決めて、半角8文字以上でアルファベットと数字の組み合わせで入力するといった要求があると、パスワードという概念自体がわからないうえに、より入力ミスの可能性が高まる。どうしてもログインが必要なサイトの場合は、パスワードは自動的に設定して、登録したメールアドレスあてに送信するという方法が、シニアにとっては戸惑いが少ない。ただ、いずれにしても、メールアドレスやパスワードによるログインは大きな壁なので、セキュリティの重要度が高いサイト以外では、できるだけ避けるほうがよいだろう。

フォームの入力項目や入力制限を減らす
全角/半角、大文字/小文字などの区別がわからないのとともに、シニアは項目名を気にせず、ともかく最初の入力欄にすべて入力してしまう傾向がある。

たとえば、「姓」「名」の2項目があると、最初の「姓」に名前まで入れてしまう。ふりがなのひらがな、カタカナ、あるいは住所の都道府県、区市町村、番地、建物名などの細かな項目分けも難関だ。電話番号のハイフンの有無などの制限もミスを誘う。そしてエラーが表示されても、その意味がわからない場合が多い。このため、できるだけ項目分けを減らし【3】、またどのような形式で入力されても、バックエンドのシステム側で処理するような仕組みが大事になる。

【3】健康食品の原料屋(www.genryoya.com/)。無料サンプルは、名前、郵便番号、住所、メール、自由入力のコメント欄がひとつずつの全角半角などの入力制限なしのシンプルなフォームから請求できる。実際の購入でなければ、この程度での項目で十分
【3】健康食品の原料屋(www.genryoya.com/)。無料サンプルは、名前、郵便番号、住所、メール、自由入力のコメント欄がひとつずつの全角半角などの入力制限なしのシンプルなフォームから請求できる。実際の購入でなければ、この程度での項目で十分


どうしても入力項目を多くする必要がある場合、入力できない人用に入力フォーム欄に問い合わせ用の電話番号を大きく添えるのが、サイト運営サイドとして可能ならばもっとも親切だろう【4】。

【4】碁・囲碁のパンダネット(www.pandanet.co.jp)の入会申し込みページ。シニアにも関心が高いサイトであるため、フォーム入力が苦手な人のために電話でも入会申し込みを受け付けており、電話番号をフォームの上部に大きく表示している
【4】碁・囲碁のパンダネット(www.pandanet.co.jp)の入会申し込みページ。シニアにも関心が高いサイトであるため、フォーム入力が苦手な人のために電話でも入会申し込みを受け付けており、電話番号をフォームの上部に大きく表示している


注目される技術PIP
フォームなどは、できるだけ項目を減らし、自由入力を可能にするのがシニアにとっても、パソコンに不慣れなユーザーにとっても親切だが、どうしても細かな情報入力が必要なフォームで最後まで入力してもらうための技術として注目されているもののひとつにFlashと人物映像を組み合わせたPIP(Person in Presentation)がある。

実際の人物映像が音声ガイダンス付きで説明するもので、商品紹介などにも効果的だが、【5】の場合は、入力項目をひとつずつ音声で説明し、またエラーの場合は、その場でエラーメッセージが表示され、音声でも誤りを知らせる。通常のHTMLのフォームのようにすべて入力してボタンを押すとエラー一覧が表示される形式よりも、戸惑わずに修正できる。

【5】ジョインベスト証券(www.joinvest.jp)のPIP(Person in Presentation)を使用した口座申込画面。人物動画の音声、フォーム下の字幕で、項目内容の説明を見たり聞いたりしながら入力できる
【5】ジョインベスト証券(www.joinvest.jp)のPIP(Person in Presentation)を使用した口座申込画面。人物動画の音声、フォーム下の字幕で、項目内容の説明を見たり聞いたりしながら入力できる


一般的にシニアにとっては文字ばかりのページよりは判読しづらく、図解や写真などを多く取り入れたページが好まれる。画像、あるいは動画が操作やページの内容理解の助けとなることは障害者ユーザーの場合にもある。画像や音声に対する代替手段の配慮を忘れなければ、マルチメディアはテキストのみのページよりも理解しやすく、閲覧、操作を支援する場合も多いことを覚えておいてほしい。


本記事は『Web STRATEGY』2008年1-2 vol.13からの転載です

twitter facebook google+ このエントリーをはてなブックマークに追加 RSS