Webフォームの入力欄を作成する際、アクセシビリティの観点から必ず意識したいのが「label要素の使い方」です。見た目だけでなく、スクリーンリーダーなど支援技術でも正しく読み上げられるように設計することで、より多くのユーザーが安心して利用できるフォームになります。
label要素の基本的な使い方
label要素は入力欄に対応する説明を関連付けるために使用します。関連付けには「for属性」を使い、input要素のidと一致させます。これにより、ラベルをクリックすると対応する入力欄にフォーカスが移動するため、操作性が向上します。
<label for="username">ユーザー名</label>
<input type="text" id="username" name="username">
input要素とラベルをネストする方法
for属性を使わず、inputをlabel内に入れる方法もあります。この場合はfor属性やidを省略できます。ラベルと入力欄をひとまとまりにしたい場合に便利です。
<label>
<input type="checkbox" name="agreement"> 利用規約に同意する
</label>
視覚的に非表示にするラベル
デザインの都合で画面に直接表示したくない場合でも、labelを省略してはいけません。代わりに「視覚的に隠す」CSSを使い、スクリーンリーダーには読み上げさせる方法を採用します。
<label for="email" class="visually-hidden">メールアドレス</label>
<input type="email" id="email" name="email" placeholder="メールアドレス">
/* 視覚的に非表示にするCSS例 */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
aria-labelやaria-labelledbyの利用
どうしてもlabel要素を使えないケースでは、aria-labelやaria-labelledby属性で代替できます。ただしこれは例外的な対応で、通常はlabel要素を使う方が推奨されます。
<input type="search" aria-label="サイト内検索">
エラーや必須入力の伝え方
アクセシビリティを高めるためには「必須項目」や「エラー内容」を明確に伝える必要があります。aria-describedbyを使えば、入力欄に補足説明やエラーメッセージを関連付けることができます。
<label for="password">パスワード</label>
<input type="password" id="password" aria-describedby="pw-note">
<small id="pw-note">8文字以上で入力してください</small>
まとめ
フォームのアクセシビリティを確保するには、label要素を正しく関連付けることが基本です。for属性でidと結びつける、ネスト構造を活用する、視覚的に非表示にしてもスクリーンリーダーに届ける、必要に応じてaria属性を補助的に使う、といった工夫でユーザーに優しいフォームを実現できます。見た目だけでなく、誰にとっても操作しやすい設計を心がけることが重要です。
