住宅会社のウェブサイトで見直したいアクセシビリティのポイント
見学会の申込フォームで、入力欄に薄く表示された「お名前」。入力を始めると消えるため、途中で手を止めると何の欄だったか分からなくなることがある。画面読み上げ機能にも欄の名前が伝わらなければ、申込はさらに難しい。住宅会社のサイトでは、こうした設計の小さなつまずきが、資料請求や修理相談を妨げる。
アクセシビリティは、障害のある人だけのための特別な機能ではない。日差しの強い屋外でスマートフォンを見るときや、片手で操作するとき、小さな文字が読みづらいときにも関わる。ただ、「誰にでも使いやすそう」という印象で判断せず、キーボードやスクリーンリーダーでも用事を済ませられるか確かめたい。
まず、利用者が止まりやすいページを特定する
全ページを一度に改修するより、見学予約、資料請求、施工事例、問い合わせ、入居後の修理受付など、利用者が用事を済ませるページから確認する。ページを開けても、間取り図の説明が読めない、送信ボタンにたどり着けない、入力エラーを直せないのでは、用事は完了しない。閲覧数だけでなく、最後の操作まで進めるかを見る。
自動検査と手動操作を組み合わせると、見落としを減らせる。自動検査は代替テキストの欠落やフォームのラベル不足を見つける助けになるが、説明文が画像の内容を正しく伝えているかまでは判断しきれない。パソコンではマウスを使わずTabキーで進み、スマートフォンでは文字を拡大して、主要な用事を試す。
よくある問題と、修正時の判断基準
写真や図面の内容が伝わらない
施工事例の写真に「image01」、設備の図に「図」とだけ付けても、画像を見られない人には判断材料が届かない。代替テキストには、そのページで画像が果たす役割を書く。断熱窓の説明に添えた写真なら、窓の位置や構成など、本文の理解に必要な点を簡潔に記す。一方、本文の説明を繰り返すだけの装飾画像には、読み上げの邪魔にならないよう空の代替テキストを使う。
間取り図は、一文の代替テキストだけでは部屋のつながりを伝えにくい。部屋の配置や動線が選択の根拠になるなら、図の近くに文章で補足する。画像に書き込まれた寸法や注意書きも、必要な情報は本文などで読めるようにしておく。
文字が薄い、小さい、拡大すると崩れる
白い背景に淡いグレーの説明文を置くと、屋外や明るい室内では読みにくい。文字と背景のコントラストを測り、WCAGの一般的な基準では通常の文字は4.5対1以上、大きな文字は3対1以上を目安にする。数値を満たすだけで終わらせず、ボタン内の文字、フォームの補足、エラー表示も実際の画面で確認したい。
ブラウザーで文字を拡大すると、メニューが重なる、本文を読むのに横スクロールが必要になる、送信ボタンが画面外に隠れる、といった問題が起きる。文字を固定した高さに押し込まず、内容に合わせて領域が広がるようにする。スマートフォンの表示倍率を上げた状態でも、見学日時の選択から送信まで試す。
色だけで状態を知らせている
「赤い項目は必須」「緑の枠が選択済み」では、色を区別しづらい人や白黒印刷した人に伝わらない。必須項目には「必須」と書き、選択中の項目にはチェック印や明確な文言を添える。住宅設備の管理画面でも、警告を色だけに頼らず、どの設備で何が起きているかを文章で示す。
キーボードでメニューやボタンを操作できない
マウスを乗せたときだけ開くメニューや、クリックしか受け付けない見た目上のボタンは、キーボードでは使えない。Tabキーで操作対象を順に移動できるか、現在位置が枠などで見えるか、EnterキーやSpaceキーで操作できるかを確かめる。閉じられないポップアップや、開いた画面の裏側へフォーカスが移ってしまう状態も修正が必要だ。
独自の部品を作る前に、移動先を示すものにはリンク、操作を実行するものにはボタンというHTML本来の要素を使う。そのほうが名前や役割を支援技術にも伝えやすい。予約画面のカレンダーも、日付をキーボードで選べるか、選べない日が分かるかを確認する。
フォームの説明とエラーが不足している
入力欄の名前をプレースホルダーだけに任せず、常に見えるラベルを付ける。「電話番号はハイフンなし」といった条件は入力前に示す。送信時に誤りが見つかったら、ページ上部に「入力内容を確認してください」と出すだけでなく、該当欄の近くに「郵便番号は7桁で入力してください」のように直し方を書く。エラーが起きても、入力済みの内容は消さないようにしたい。
修理受付では、症状の写真を添付できると便利だが、必須にすると送信できない人が出る。文章だけでも状況を伝えられる欄を用意し、添付できる形式や容量制限はファイルを選ぶ前に表示する。送信後は、受付が完了したことと、次にどの方法で連絡が来るかを文字で示す。
見出し、リンク、動画が内容を探しにくくする
文字を大きく見せただけでは、支援技術には見出しと伝わらない。ページの主題を見出しにし、内容のまとまりに合わせて階層を組めば、施工事例の「費用」「工期」「設備」などへ移動しやすくなる。リンクも「詳しくはこちら」より、「見学会の開催日時を確認する」のように、リンクの文言だけで行き先が分かるものにする。
説明動画には、話している内容や重要な効果音を伝える字幕を付ける。音声だけで説明している手順は、動画の近くに文章でも載せる。自動再生する動画や動き続ける表示は読む妨げになり得るため、停止できるようにする。点滅や急な動きも避けたい。
改修は「一つの用事」を通して検証する
小規模な運用チームなら、まず見学予約を一件完了する流れに絞ると、修正点を管理しやすい。入口のボタン、日時選択、個人情報の説明、入力、エラー、完了表示まで続けて確認する。画面ごとには読めても、途中でフォーカスが飛ぶ、戻ると入力内容が消えるといったことがあれば、まだ用事を済ませられる状態ではない。
- 操作が止まった箇所を、ページ名と操作手順とともに記録する。
- 送信できないなど、用事を完了できない問題から優先して直す。
- 修正後、キーボード、画面拡大、読み上げ操作で同じ流れを再確認する。
- 新しいページでも迷わないよう、画像、見出し、フォームの作成ルールに反映する。
たとえば予約フォームの「ご希望日時」を直したら、ラベルが読み上げられるか、選んだ日付が文字でも分かるか、選べない日を誤って送信できないかを試す。そこで止めず、予約完了の通知が表示されるところまで進める。次の修正箇所も、その一連の操作の中で見つけられる。
