required 属性
論理属性の required 属性は、存在する場合、所有するフォームを送信する前にユーザーが入力欄に値を指定しなければならないことを示します。
required 属性は text, search, url, tel, email, password, date, month, week, time, datetime-local, number, checkbox, radio, file の <input> 型と <select> および <textarea> のフォームコントロール要素で対応しています。これらの入力型や要素の何れかに設定された場合、 :required 擬似クラスが一致します。属性が設定されていない場合は :optional 擬似クラスが一致します。
この属性は、どちらもデフォルト値を持つ range と color の入力型には対応しておらず、適用する意味もありません。color 型のデフォルト値は #000000 です。range 型のデフォルト値は min と max の中間点です。これらの属性が指定されていない場合、ほとんどのブラウザーでは min と max のデフォルト値はそれぞれ 0 と 100 です。required は hidden 入力型にも対応していません。ユーザーが非表示のフォームフィールドに入力することは期待できないためです。また、image を含むボタン入力型も、いずれも対応していません。
同じ名前の radio ボタンのグループでは、グループ内のいずれか 1 つに required 属性が設定されている場合、そのボタンでなくても、グループ内のいずれかのラジオボタンをチェックする必要があります。コードの保守性を高めるため、グループ内の同じ名前のラジオボタンすべてに required 属性を設定するか、どれにも設定しないことをお勧めします。
同じ名前の checkbox 入力型のグループでは、required 属性が設定されたチェックボックスだけが必須になります。
メモ:
aria-required="true" を設定すると、ある要素（任意の要素）が必須であることをスクリーンリーダーに伝えますが、その要素が任意であるかどうかには関係ありません。
解説
属性の相互作用
読み取り専用フィールドは値を変更することができないので、 required は readonly 属性が指定されている入力欄には影響を与えません。
ユーザビリティ
required 属性を設定する場合は、その <input>、<select>、<textarea> が必須であることをユーザーに知らせるため、コントロールの近くに視覚的な表示を設けてください。さらに、必須フォームコントロールを :required 擬似クラスで指定し、必須であることが分かるようにスタイルを設定してください。これにより、視覚で情報を得るユーザーの使いやすさが向上します。支援技術は required 属性に基づいてフォームコントロールが必須であることをユーザーに伝えるはずですが、ブラウザーとスクリーンリーダーの組み合わせがまだ required に対応していない場合に備えて、aria-required="true" を追加しても問題ありません。
制約検証
要素が必須で、その値が空文字列の場合、その要素では valueMissing 制約違反が発生し、:invalid 擬似クラスに一致します。
アクセシビリティの注意事項
ユーザーにフォームコントロールが必須であることを知らせてください。色覚の違いや認知機能の違いがあるユーザー、スクリーンリーダーを使用するユーザーを含むすべてのユーザーが要件を理解できるよう、テキスト、色、マーク、属性など複数の方法で伝えてください。
例
HTML
<form>
<div class="group">
<input type="text" />
<label>通常</label>
</div>
<div class="group">
<input type="text" required />
<label>必須</label>
</div>
<input type="submit" />
</form>
結果
仕様書
| 仕様書 |
|---|
| HTML # attr-input-required |
| HTML # attr-select-required |
| HTML # attr-textarea-required |