ご家族や常連のお客様に、スマートフォンで自社のホームページを開いて、電話番号を探してもらったことはありますか。作った側が何度も見ているページほど、初めて見る人がどこでつまずくかは見えなくなります。とくに年配の方は、つまずいても何も言わずにページを閉じ、別の方法で連絡してくるか、連絡をやめます。
老眼で手元の小さな字が読みにくくなるのは、多くの人が身近に見て知っていることです。ホームページの側でできる工夫はそれほど多くなく、見る場所は文字の大きさ、文字と背景の色の差、押す場所の大きさ、電話番号の置き方に絞れます。
文字の大きさと拡大
ウェブの読みやすさには、W3C という団体が作っている WCAG という国際的な基準があります（出どころは後の節でまとめます）。項目ごとに A、AA、AAA の三段階があり、AA は真ん中の段階です。WCAG は、本文の文字を何ピクセルにせよとは決めていません。代わりに、文字を200%まで拡大しても内容や機能が失われないことを AA の条件にしています。小さく作ってあっても、読む人が拡大すれば読める。そのためには、拡大した時にページが崩れないことが条件になります。
確かめ方は簡単です。パソコンなら、Ctrl キー（Mac は command キー）を押しながら「+」を何回か押し、200%まで大きくします。スマートフォンでは、指で広げる拡大は画面全体を虫眼鏡のように大きくするだけなので、どんなページでも横にはみ出して見え、確かめ方には向きません。代わりにブラウザの文字の大きさの設定を上げます。iPhone の Safari なら、検索フィールドの左側のボタンから「ページの拡大/縮小」を選び、大きい「あ」を押します（Apple のサポート）。Android の Chrome なら、設定の「ユーザー補助機能」にある「デフォルトのズーム」のスライダーで大きくできます（Chrome ヘルプ）。大きくした状態で文字が重なったり、横にはみ出して読めなくなったり、ボタンが隠れたりするなら、そこが直す対象です。また、ページによっては、指で広げても拡大できないように作られていることがあります。その場合は制作会社に、拡大を止める設定になっていないか聞いてください。
もう一つ見てほしいのが、行と行の間です。行の間が詰まった長い文章は、字が大きくても読む場所を見失います。段落を短く区切るだけでも、読みやすさはずいぶん変わります。
文字を画像にしてしまうのも、拡大の敵です。営業時間の表やメニュー、チラシをそのまま1枚の画像にして載せているページをよく見かけます。画像の文字は拡大するとぼやけ、読み上げの機能でも読まれず、検索にも拾われません。チラシの画像を載せるのはかまいませんが、日付や時間、料金のような大事な情報は、画像とは別に文字でも書いておきます。
文字と背景の色の差
薄いグレーの文字を白い背景に置くと、見た目はすっきりします。そのかわり、屋外の明るい場所や、画面の明るさを落としたスマートフォンでは、ほとんど読めなくなります。
WCAG では、文字と背景の明るさの差をコントラスト比という数値で表し、通常の文字で4.5対1以上を AA の条件にしています。大きな文字（18ポイント以上、太字なら14ポイント以上。本文のおよそ1.5倍）は3対1以上です。測るには、文字の色と背景の色のコード（#333333 のような値）を、WebAIM の Contrast Checker のような無料のツールに入れます。英語のページですが、文字の色（Foreground）と背景の色（Background）のコードを入れる欄が2つあるだけで、合格かどうかがその場で出ます。色のコードが分からなければ、制作会社に聞けばすぐに分かります。
写真の上に白い文字を載せたデザインは、写真の明るい部分で文字が消えがちです。これは数値で測りにくいので、実際に屋外で画面を見て確かめるのが早いです。
色だけで意味を伝えない点にも気をつけます。「赤い字の項目は必須です」だけでは、赤が見分けにくい人には伝わりません。「必須」と文字でも書きます。
押す場所の大きさ
WCAG 2.2 では、指やマウスで押す部分の大きさを24×24 CSSピクセル（画面上の大きさを表す単位。制作会社に伝えればそのまま通じます）以上にすることを AA の条件にしています（WCAG 2.2 の達成基準 2.5.8 の解説）。より厳しい AAA の段階では、44×44 CSSピクセル以上です。24は最低の線で、年配のお客様を思い浮かべるなら、44に近いほうを目指してよいと思います。なお、24に届かない小さなボタンでも、周りに十分な間隔があれば条件を満たせる例外があります。
見落としやすいのは、文字だけのリンクが並んでいる場所です。「会社概要」「アクセス」「採用」のような短いリンクが詰めて並んでいると、隣を押してしまいます。押すつもりのない場所を押して別のページへ飛ぶと、年配の方は戻り方が分からず、そこで閉じてしまいます。ボタン同士の間を空けるだけでも、押し間違いは減ります。
もう一つ、勝手に切り替わる画像にも注意します。トップページで数秒ごとに写真と文章が入れ替わる作りは、ゆっくり読む人にとっては、読み終わる前に文章が消える仕組みです。どうしても使うなら、止めるボタンを付けて、切り替わる間隔を長めにとってもらいます。大事な案内は、動く場所に置かないのが無難です。
電話番号の置き方
高齢のお客様にとって、ホームページのゴールは電話であることが多いはずです。ここがいちばん大事です。
まず、電話番号を画像にしないこと。番号が画像になっていると、スマートフォンで押しても電話がかかりません。拡大すればぼやけますし、読み上げの機能でも読まれません。番号は文字で置き、押せば電話のアプリが開くようにしてもらいます。パソコンで見ている人は、番号を押しても電話はかかりません。手元の電話で打ち込めるように、番号は大きめの文字で、市外局番から区切りを入れて書いておくと読み間違いが減ります。
番号のすぐ近くに、電話を受けられる曜日と時間も書きます。受付時間が別のページにあると、かけてつながらなかった人は、また探しに戻らなくてはいけません。定休日と昼休みも同じ場所に。
番号をページの一番下にだけ置くのも避けたいところです。長いページを最後まで送れる人ばかりではありません。ページの上のほうと、問い合わせの案内をする場所の両方に置いておくと安心です。
数値の出どころと法律
ここまでの数値は、W3C が作っている WCAG（ウェブコンテンツ・アクセシビリティ・ガイドライン）から取っています。最新版は WCAG 2.2 です。日本の規格の JIS X 8341-3:2016 は、2008年に出た WCAG 2.0 と同じ内容になっています（WAIC による JIS X 8341-3:2016 解説）。
三段階のうち A がいちばん基本で、AAA がいちばん厳しい段階です。全部を読み込む必要はありません。初めて取り組む人向けには、デジタル庁がウェブアクセシビリティ導入ガイドブックを出していて、図が多く読みやすい資料です。
法律の話も少しだけ。障害者差別解消法の基本方針（令和5年の改定版）は、ウェブなどの情報アクセシビリティの向上を、事業者が努める「環境の整備」に位置づけています（内閣府 障害を理由とする差別の解消の推進に関する基本方針）。これとは別に、障害のある方から個別に申し出があった時に対応する「合理的配慮の提供」は、改正法が施行された2024年4月から事業者にも義務になっています（内閣府 障害者差別解消法のページ）。高齢の方に限った話ではありません。ただ、目の見えにくい人に読める作りは、老眼の人にも読めます。
社内でできる確かめ方
数値の確認より先にやってほしいのが、実際の人に使ってもらうことです。ご家族や、協力してくれる常連のお客様に、スマートフォンで次のことをお願いしてみてください。
- 電話番号を探して、電話をかける画面まで進む（発信ボタンの手前で止めてもらう。押してしまっても自社にかかるだけなので大丈夫、と先に伝えておく）
- 定休日と営業時間を確かめる
- 行き方や駐車場の場所を探す
大事なのは、横で見ていても手を貸さないことです。どこで指が止まったか、どこで「これかな」とつぶやいたかをメモします。一人だけでなく何人かに頼むと、たまたまの迷いか、誰もが止まる場所かの区別がつきます。
作る側も一度、スマートフォンの画面の明るさをいちばん下げて、屋外で自社のページを見てください。色の差が足りない場所は、それだけでかなり分かります。
直す順番は、電話番号、文字の拡大、色の差、押す場所の順がおすすめです。電話番号の直しは小さな作業で済むことが多く、効き目がすぐに出ます。押す場所の大きさはページ全体の並びに関わることが多いので、ほかの直しと一緒に制作会社に見てもらうと無駄がありません。今のサイトが自分たちだけでは直せない作りになっている時は、当社のホームページ救済のページに進め方を載せています。
