この記事の要点
- アクセシビリティとは、年齢や障がい、環境にかかわらず使えること
- 入力欄にはラベルを正しく結び付け、読み上げソフトでも項目が分かるようにする
- キーボードだけで操作でき、エラーが色以外でも伝わるようにする
- 画像選択型CAPTCHAは障壁になりうるため、代替の手段を考える
フォームのアクセシビリティとは、高齢の方、視覚や運動に障がいのある方、スマートフォンや明るい屋外など様々な環境の方でも、迷わず入力・送信できるようにする設計の考え方です。結論から言うと、特別なことをしなくても、ラベルの正しい付与、キーボード操作、分かりやすいエラー表示という基本を守るだけで、使いやすさは大きく向上し、問い合わせの取りこぼしも減ります。なお、完全な適合の確認には、支援技術での実機確認と専門家の評価が必要です。
入力欄のラベルはどう付ければよいですか?
入力欄ごとに、項目名を示すラベルを正しく結び付けます。
ラベルとは、入力欄の名前を表す文字です。コード上で欄と結び付いていると、画面読み上げソフトが「お名前、入力欄」と読み上げ、ラベルをタップしても入力欄に移動できます。欄の中の薄い文字(プレースホルダー)だけをラベル代わりにすると、入力を始めると消えてしまい、読み上げにも使えないことがあります。
確認すべき基本項目は何ですか?
| 項目 | 確認内容 |
|---|---|
| ラベル | 全入力欄に結び付いている |
| 必須の表示 | 「必須」と文字で示し、色だけに頼らない |
| キーボード操作 | Tabキーで順に移動でき、送信まで完了できる |
| フォーカス表示 | いまどの欄かが見える |
| 文字の大きさと色 | 読みやすい大きさと、背景との差がある |
エラー表示はどう工夫しますか?
エラーは、色だけでなく文字で、原因と直し方を伝えます。
- 赤色だけでなく、「メールアドレスの形式が正しくありません」と文章で示す
- エラーが出た欄を、はっきり分かるようにする
- 送信ボタンを押した後、エラーの場所に気づけるよう、画面の最初にまとめて示す
- 入力済みの内容を消さない
タッチ操作への配慮
スマートフォンでは、ボタンや選択肢が小さいと押し間違いが増えます。十分な大きさと間隔を取り、メール欄や電話欄には適したキーボードが出るよう設定してください。
CAPTCHAとアクセシビリティは両立できますか?
画像選択型は、視覚に障がいのある方にとって大きな障壁になりえます。
歪んだ文字や写真の選択は、読み上げでは解けず、問い合わせ自体を諦めさせる可能性があります。操作を求めないALTCHAのような方式や、ハニーポット、時間チェック、送信数の上限といった、利用者に作業を求めない対策を中心に組み立てると、安全性と使いやすさを両立しやすくなります。
どう確かめればよいですか?
- マウスを使わず、キーボードだけで最後まで入力・送信する
- 画面を拡大した状態でも崩れないか見る
- スマートフォンで実際に入力する
- 可能なら、画面読み上げの機能で項目が分かるか試す
スタイルチューンができること
スタイルチューンは、ウェブサイトの制作・改善の中で、共通フォームの導入と、迷惑送信対策を含むフォームの運用を行ってきました。画像選択のいらないALTCHAの導入など、利用者に負担をかけずに守る設計を重視しています。ラベルやエラー表示の見直しを含む、フォームの改善をご相談いただけます。
入力画面の使いやすさに課題をお感じの方は、お問い合わせフォームからご相談ください。