フォーム
フォームには気をつけなければならない点が多くあります。Web アプリケーションでフォームが使えないことは致命的であるため、特に注意が必要です。
ラベル付け
入力欄には必ず <label> 要素によるラベル付けを行い、何の入力欄であるのかを明確にしてください。
ラベル付けが適切に行われることで、スクリーンリーダーのユーザーが Tab キー等で入力欄に移動した場合に、その前後を確認することなく何の入力欄であるかを認識できます。
<label> 要素によるラベル付けはスクリーンリーダーのほかにも、チェックボックスやラジオボタンの操作をしやすくするためにも有効です。
ラベル付けされたフィールドは、ラベル部分をクリックしてもフィールドをクリックしたときと同じ挙動をするため、チェックボックスやラジオボタンの操作が簡単になる効果があります。
良い例: <label> で囲ってラベル付けをしている
ラベル部分とフィールドの両方を <label> 要素で囲うと、簡単にラベル付けを行うことができます。
良い例: <label> 要素の for 属性（htmlFor）を使ってラベル付けを行う
<label for="field_id"> のようにラベル要素の for 属性に、フィールドの id 属性の値を渡すことで、フィールドとラベルの両方を <label> 要素に含めなくても、ラベル付けを行うことができます。
複雑なレイアウトを行うのに便利ですが、id の重複には注意する必要があります。
良い例: ラベルを表示していない場合に aria-label 属性を使用する
原則としてラベルとなる文字列を表示するべきですが、もし視覚的に画面を捉えている場合は不要と思われるような場合には、 aria-label 属性でスクリーンリーダー等の支援技術に対してのみ、ラベル情報を付与してください
悪い例: ラベル付けがない
関連するチェック
プレースホルダー
入力フィールドの未入力時に表示される プレースホルダー (placeholder) は、なるべく使用を避けましょう。
- 入力を始めるとプレースホルダーが非表示になるため、入力中に参照したい情報を提示するのには不適です
- プレースホルダーは薄い色で表示されていることが多いため、存在に気づけなかったり、読むのが困難だったりする場合があります
- プレースホルダーを表示したフィールドを入力済みと誤認してしまうおそれもあります
良い例: プレースホルダーを使用しない
悪い例: プレースホルダーに記入ルールを記載している
プレースホルダーに「8 文字以上」のような記入ルールを記載していると、入力中にそれを確認することができません。
悪い例: プレースホルダーに記入例を記載している
プレースホルダーに記入例を記載していると、入力中に確認できないほか、入力済みの内容と誤認してしまうおそれがあります。