なぜアクセシビリティが重要か？

視覚障がいのある方はスクリーンリーダー（画面読み上げソフト）を利用したり、手の操作が難しい方はキーボードだけでナビゲーションしたりします。フォームが正しく作られていないと、これらの支援技術がうまく機能せず、入力自体が困難になってしまいます。すべてのユーザーに機会を提供することは、企業の社会的責任であり、ビジネスチャンスの損失を防ぐことにも繋がります。

フォームにおけるアクセシビリティの基本

最も重要で基本的な実践は、`` タグを正しく使うことです。

• `` タグで項目名と入力欄を関連付ける：`` の `for` 属性と、`` の `id` 属性を同じ値で結びつけます。これにより、スクリーンリーダーが「『お名前』の入力欄」と正しく読み上げるようになり、項目名をクリックしても入力欄にフォーカスが当たるようになります。

<!-- 正しい例 -->
<label for="user_name">お名前</label>
<input type="text" id="user_name" name="name">

<!-- 悪い例（ただテキストを置いただけ） -->
お名前
<input type="text" name="name">

• プレースホルダーに頼らない：入力欄の中に薄い文字で表示されるプレースホルダー（入力例）は、入力し始めると消えてしまい、スクリーンリーダーに読まれない場合があるため、項目名として使うべきではありません。項目名は必ず``タグで表示しましょう。