フォームが使いにくいと、内容を理解していても、入力や修正の途中で手続きを進められなくなることがあります。
Webアクセシビリティにおける入力支援とは、利用者が項目の意味を理解し、間違いに気づき、修正して送信まで進めるようにフォームを設計することです。
対象は、障害のある人だけではありません。
小さな画面を使う人、けがなどで細かな操作が難しい人、複雑な手続きに不慣れな人にとっても、入力しやすい設計は負担を減らします。
入力支援で解決したい問題
利用者が入力でつまずく原因は、操作方法だけではありません。
項目の意味が伝わらないこと、エラーの場所や直し方がわからないこと、操作中の位置を見失うことも手続きを止める原因になります。
- スクリーンリーダーを利用すると、入力欄のラベルが読み上げられず、何を入力する欄なのかわからない。
- マウスを使わずに操作すると、次にどこへ移動したのか判断しにくい。
- スマートフォンでは、入力欄やボタンが小さく、目的の場所を選びにくい。
- 手順や説明が複雑で、入力の順序や必要な情報を把握しにくい。
- エラーが色だけで示され、どの項目を直せばよいのかわからない。
したがって、入力支援は「入力欄を置くこと」ではなく、理解、操作、確認、修正を一続きで設計する作業です。
フォームを整える六つのポイント
1．ラベルと説明を入力欄に関連付ける
入力欄には、何を入力する場所なのかを示すラベルを表示します。
テキスト入力など、<label>要素を使える項目では、for属性と入力欄のidを一致させます。
プレースホルダーは入力例を示す補助情報にとどめ、項目名の代わりにしません。
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email"
autocomplete="email" placeholder="example@example.com">この例では、「メールアドレス」が項目名であり、プレースホルダーは入力形式を補う役割を担います。
2．エラーの場所と直し方を文章で伝える
エラーは、色やアイコンだけに頼らず、どの項目に何の問題があるのかを文章で示します。
たとえば「入力に誤りがあります」だけでは、利用者は修正箇所を特定できません。
「メールアドレスに『@』を含めて入力してください」のように、対象と修正方法がわかる表現にします。
入力中にエラーを知らせる場合も、通知が繰り返されて操作を妨げないようにし、利用者が内容を確認できるタイミングで伝えます。
画面上の文章に加えて支援技術にも状態の変化を伝える方法として、aria-liveを利用できます。
3．キーボードだけで手続きを完了できるようにする
入力、項目間の移動、選択、送信までをキーボードで操作できるようにします。
Tabキーなどで移動したときは、現在選ばれている要素が見た目でもわかるようにフォーカスを表示します。
実装と確認の要点は、キーボード操作とフォーカス表示の実務ガイドでも確認できます。
4．入力補完を適切に設定する
autocomplete属性を設定すると、ブラウザの入力補完を利用しやすくなります。
メールアドレスの項目にはautocomplete="email"を指定するなど、入力内容に合う値を選びます。
入力の手間を減らす仕組みは、繰り返しの操作や細かな文字入力が難しい利用者を支えます。
5．補助機能を使っても利用者が確認できるようにする
郵便番号からの住所入力やフリガナ入力などの補助機能は、入力の手間を減らします。
ただし、補助された内容を利用者が確認し、必要なら修正できる状態を保ちます。
音声入力などの代替手段を使う場合も、ラベルやボタン名から操作の目的が伝わる設計が必要です。
6．入力欄とボタンを選びやすくする
入力欄やボタンは、タッチ操作や細かなポインター操作でも選びやすい大きさにし、隣り合う操作対象との間隔を確保します。
数値だけで判断せず、実際の画面で誤操作が起きにくいかを確認します。
よくある問題と改善方法
| 問題 | 改善方法 |
|---|---|
| ラベルが表示されていない | 項目名を画面に表示し、入力欄と関連付ける |
| プレースホルダーだけで項目を説明している | ラベルを表示し、プレースホルダーは入力例に使う |
| エラーが色だけで示される | エラーの対象と内容を文章でも伝える |
| キーボードで送信まで進めない | 入力、移動、選択、送信をキーボードで確認する |
| 入力欄やボタンが小さく密集している | 操作対象の大きさと周囲の間隔を見直す |
実際の操作で確認する
HTMLの属性を設定しただけでは、利用者が最後まで操作できるかは判断できません。
公開前には、少なくとも次の流れを実際に試します。
- 各入力欄の目的と入力形式が、ラベルや説明から理解できるか確認する。
- マウスを使わず、入力から送信まで進めるか確認する。
- フォーカスの位置を見失わないか確認する。
- 誤った内容を入力し、エラーの場所と直し方がわかるか確認する。
- スマートフォンなどの小さな画面で、入力欄やボタンを選びやすいか確認する。
問題が見つかったときは、見た目だけではなく、利用者がどの段階で止まったのかを基準に修正します。
WCAGの達成基準を確認軸にする
WCAG（Web Content Accessibility Guidelines）は、Webコンテンツのアクセシビリティを検討するための指針です。
入力支援では、元の記事で挙げられていた次の達成基準が確認の手掛かりになります。
- 1.3.1 情報と関係性
- 2.1.1 キーボード操作
- 3.3.1 エラーメッセージの特定
- 3.3.2 ラベルまたは説明
- 3.3.3 エラー提案
ただし、個別の対策を一つ実装しただけで、サイト全体が特定の適合レベルを満たすと判断できるわけではありません。
対象とするページや機能を定め、入力から修正、送信までの流れを通して確認します。
入力しやすさを改善する順序
フォームを見直すときは、まずラベルと説明を整え、次にエラー表示とキーボード操作を確認します。
そのうえで、入力補完、補助機能、操作対象の大きさと間隔を調整すると、問題の原因を切り分けながら改善できます。
入力支援は、項目を埋める作業だけを助けるものではありません。
利用者が内容を理解し、間違いを直し、手続きを完了できるところまでを設計の範囲に含めます。