泉南市の事業者向けWebアクセシビリティ改善

「電話番号は見つかったのに、小さくて押せない」「予約フォームを入力したが、エラーの直し方が分からない」。ホームページを見てくれた人が、こうした小さな障壁で離れてしまうことがあります。事業者側には問題なく見えていても、文字を拡大する人、手指を細かく動かしにくい人、屋外でスマートフォンを見る人には、予約や問い合わせを完了できない設計かもしれません。

Webアクセシビリティは、特別な人だけのための追加機能ではありません。必要な情報を見つけ、理解し、操作し、困ったときに別の方法へ切り替えられる状態をつくることです。この記事では、泉南市の医療・介護、店舗、教室、修理、地域サービスなどを想定し、予約・問い合わせの一連の流れを改善する方法を解説します。

泉南市で「自力で完了できるサイト」が重要になる背景

泉南市DX推進計画は、生産年齢人口の減少や高齢者人口の推移を踏まえ、社会情勢とデジタル化の進展へ柔軟に対応する必要性を示しています。人手が限られる事業者にとって、営業時間外にも必要事項を確認できるホームページは大切な窓口です。ただし、ページを用意しただけで、誰もが使える窓口になるわけではありません。

泉南市第9期地域包括ケア計画の概要版では、2023年9月末の人口を58,992人、高齢化率を29.8％とし、75歳以上は今後しばらく増加する見込みとしています。高齢者本人がサービスを探す場合も、離れて暮らす家族が代わりに調べる場合もあります。どちらか一方へ決めつけず、本人が自分で選べる設計と、必要に応じて家族や電話へ切り替えられる設計を両立させることが重要です。

アクセシビリティは文字を大きくするだけではない

泉南市のユニバーサルデザインの考え方では、高齢者、身体の不自由な人、キーボードやマウスを使いにくい人、音声ブラウザを使う人など、さまざまな環境を想定しています。文字と色だけでなく、分かりやすい構成、読み上げ順、画像の説明も挙げられています。

事業者サイトでも、次のような状況を想定すると改善点を見つけやすくなります。

老眼鏡が手元になく、文字を拡大して読む
手の震えや痛みがあり、小さなボタンを正確に押しにくい
色の違いだけでは、必須項目やエラーを見分けにくい
片手でスマートフォンを持ちながら、屋外で予約する
日本語に不慣れで、長い説明や専門用語を理解しにくい
一時的なけがでマウスを使えず、キーボードで操作する

高齢者を一括りにするのではなく、「どの場面で、何ができなくなるか」を見ることが改善の出発点です。

合理的配慮とWeb標準を混同しない

政府広報オンラインの合理的配慮に関する案内では、2024年4月1日から、企業、団体、店舗などの事業者による合理的配慮の提供が義務化されたことが説明されています。一方で、これを「すべての民間サイトが、直ちにWCAGの全項目へ完全適合しなければならない」と言い換えるのは正確ではありません。

デジタル庁のウェブアクセシビリティ導入ガイドブックは、事業者も対象に、JIS X 8341-3:2016やスマートフォンでの考え方を分かりやすくまとめています。WCAG 2.2は、知覚できる、操作できる、理解できる、技術的に解釈できるという観点で点検するための国際的な基準です。制度の説明、規格への適合表明、個別の法的判断は分け、必要に応じて専門家へ確認してください。

本人・家族・スタッフの三者で利用場面を分ける

泉南市の地域サービスでは、高齢者本人がスマートフォンで予約する場面、離れて暮らす家族が情報を調べる場面、電話を受けたスタッフが空き状況を確認する場面が同じ手続に含まれることがあります。アクセシビリティ改善を「本人がオンラインで最後まで操作できるか」だけに限定すると、途中で支援へ切り替える人の負担を見落とします。

まず、三者がどこから参加し、何を引き継ぐかを決めます。

利用場面	主に操作する人	必要な情報	切替時に繰り返させないこと
本人が予約	利用者本人	対象、日時、料金、持ち物	選んだサービスと希望日時
家族が下調べ	家族・支援者	本人が対象か、代理相談の範囲	本人との関係、確認済みの条件
途中で電話へ切替	本人または家族	受付時間、伝える項目、担当窓口	入力済み内容を最初から説明する負担
スタッフが受付	店舗・施設担当者	空き状況、折返し方法、配慮事項	オンラインと電話で異なる案内

図の主経路は、本人が情報を理解し、操作・入力して完了する流れです。途中で難しいと感じた場合は、家族の支援、電話、メールへ切り替えられるようにします。その際、ページ名、選択したサービス、希望日時などを短い受付番号や共有しやすい要約で引き継げると、同じ説明を最初から繰り返す負担を減らせます。個人情報を不用意にURLへ含めず、引き継ぐ範囲と保存期間は事業者側で決めてください。

文字・色・余白は実際の利用環境で確かめる

本文は、文字サイズだけでなく、行間、1行の長さ、背景とのコントラスト、見出しの区切りを合わせて調整します。淡い灰色の細い文字は、整って見えても明るい屋外や低い画面輝度では読みにくくなります。必須、空きあり、エラーなどを赤や緑だけで示すと、色を区別しにくい人へ状態が伝わりません。色に加えて「必須」「残り2枠」「メールアドレスを入力してください」のように文字で示します。

確認するときは、デザイナーの大きなモニターだけで判断しません。スマートフォンの標準表示、文字拡大、明るい場所、暗い場所で読み、本文とボタンの境目が分かるかを見ます。ブランドカラーを捨てる必要はありませんが、重要な文字や操作には見た目より判読性を優先します。

拡大しても横へ行き来しないページにする

文字を拡大したとき、文章の右端が画面外へ出たり、固定されたメニューが本文を覆ったりすると、内容を追えません。WCAG 2.2のリフロー解説は、320 CSSピクセル相当で、内容や機能を失わず、原則として二方向のスクロールを求めない考え方を示しています。

実務では、ブラウザを200％に拡大し、次を確認します。

見出しと本文が画面幅に合わせて折り返す
予約ボタンや電話番号が隠れない
Cookie通知や固定バナーが本文を覆わない
横長の料金表は、表の枠内だけ横スクロールできる
拡大後もメニューを開閉できる

「スマートフォンで見える」だけでは不十分です。文字を大きくした状態で、同じ機能を使えることまで確認します。

押し間違えにくいボタンとリンクをつくる

予約、電話、地図、メニューのボタンが小さく密集していると、意図しない場所を押しやすくなります。WCAG 2.2のターゲットサイズ解説は、ポインター操作の対象について24×24 CSSピクセル以上、または十分な間隔を設ける基準を示しています。ただし、基準の最小値を満たすだけで使いやすいとは限りません。重要な操作は、指で迷わず押せる面積と周囲の余白を確保します。

ボタンの文言も「こちら」ではなく、「空き状況を確認する」「電話で予約する」「見積もりを相談する」のように、押した後の行動が分かる表現にします。電話リンクと地図リンクを同じアイコンだけで並べず、文字ラベルを付けます。

入口ごとに次の行動を一つに絞る

トップページに予約、問い合わせ、LINE、電話、資料請求を同じ強さで並べると、選択肢が多すぎて迷います。ページの目的に合わせ、主な行動と代替行動を分けます。

ページ	主な行動	代替行動	先に示す判断材料
サービス詳細	予約へ進む	電話で相談	対象、料金、所要時間、空き確認方法
初回相談	問い合わせる	家族から電話	相談できる内容、担当者、個人情報の扱い
修理・訪問	見積もりを依頼	緊急時の電話	対応地域、現地調査、受付時間
教室・イベント	開催日を選ぶ	空き状況を聞く	対象年齢、持ち物、キャンセル条件

「予約する」の直前に必要な情報が別ページへ散らばっていると、戻る操作が増えます。対象、料金、日時、場所、キャンセル条件を確認してから、そのまま操作へ進める順番にします。

フォームは入力より「直しやすさ」を重視する

項目名を入力欄の中だけに表示すると、文字を入力した後に何の欄か分からなくなることがあります。ラベルは欄の外に残し、必須か任意か、入力例、使う目的を簡潔に示します。初回相談なら、氏名、連絡方法、相談内容など、本当に必要な項目へ絞ります。

WCAG 2.2の入力エラー識別では、自動検出したエラーについて、どの項目で何が間違っているかを文字で説明することが求められます。「入力に誤りがあります」だけでは、直す場所が分かりません。

エラー箇所の近くに具体的な理由を表示する
ページ上部にもエラー一覧を出し、該当欄へ移動できるようにする
赤枠だけでなく文字とアイコンを併用する
エラー後も正しく入力した内容を消さない
送信ボタンを何度も押さなくてよいよう、処理中と完了を示す
日時切れや通信失敗時に、戻り方と代替窓口を案内する

送信完了画面には、受付済みであること、返信の目安、控えの送付先、急ぎの場合の連絡先を示します。自動返信メールだけに頼ると、迷惑メールへ入った際に完了を確認できません。

電話や家族からの相談を「失敗後の救済」にしない

オンライン予約を主にしても、電話やメールなどの代替窓口を消す必要はありません。電話番号には受付時間、休業日、通話で伝える項目を添えます。聞こえにくい人や電話が難しい人のために、メールやフォームも選べるようにします。

家族から相談できる場合は、本人の同意が必要か、どこまで代理で進められるか、個人情報をどの段階で確認するかを説明します。代替窓口を最下部へ隠すのではなく、フォームの開始前とエラー時にも案内します。これは「オンラインを使えなかった人だけの救済」ではなく、利用者が自分に合う方法を選ぶための設計です。

画像・動画・PDFだけに重要情報を閉じ込めない

営業日、料金、持ち物、予約条件を画像だけで掲載すると、読み上げや文字拡大で確認しにくく、検索にも伝わりにくくなります。重要事項はHTMLの本文でも示し、画像には内容に応じた代替テキストを付けます。飾り画像へ長い説明を付ける必要はありませんが、図解が判断に必要なら、本文にも要点を書きます。

動画は字幕だけでなく、音声がなくても意味が分かるか、操作ボタンをキーボードで使えるかを確認します。PDFを掲載する場合も、予約条件や料金の要点はHTMLで読めるようにし、PDFだけを唯一の情報源にしないことが大切です。

自動検査・実機・利用者確認を組み合わせる

自動検査は、代替テキストの欠落や一部のコントラストなどを見つける助けになります。しかし、予約ボタンの意味が分かるか、エラーから戻れるか、電話へ切り替えられるかまでは判断できません。次の順序で確認します。

自動検査で明確な技術的欠落を洗い出す
スマートフォンとパソコンで200％拡大し、横あふれを確認する
キーボードのTabキーだけで予約完了まで進む
読み上げ機能で見出し、ラベル、エラー、完了を聞く
未入力、誤形式、通信失敗を意図的に起こす
初めて使う人に、説明せず目的を完了してもらう

検査結果は「違反数」だけで管理せず、利用者が完了できない問題を優先します。

改善順位は影響・頻度・代替手段で決める

一度にすべてを直せない場合は、影響の大きさ、起きる頻度、代替手段の有無で並べます。

優先度	例	理由	最初の対応
最優先	予約ボタンを押せない、送信できない	目的を完了できない	操作とフォームを修正し代替窓口を表示
高	料金・対象・受付時間を読めない	利用判断ができない	HTML本文、見出し、コントラストを改善
中	現在地や戻り方が分かりにくい	迷いや離脱が増える	ナビゲーションとリンク文言を整理
継続	画像説明や細かな読み上げ順	情報理解へ影響する	更新時チェックへ組み込む