日付ピッカー／カレンダー（アクセシビリティ）

<select>要素および<input type="date">要素の使用を避ける

デジタル庁デザインシステムでは年月日のそれぞれに対応したテキスト入力フィールド（<input type="text">）を3つ並べて日付ピッカーを構成しています。

年月日の入力を避け、選択操作のみで完結できるようにするため、<select>要素を利用するやり方もありますが、相応しい場合は限定的です。入力すべき年月日の値は文脈によって異なるため、たとえば生年月日の場合、年齢によっては50年以上も遡らなければなりません。入力者自身でない人の生年月日ともなれば100年以上にもなることもありえます。このように長いスクロールを要する可能性のある<select>要素は、マウスやキーボードの操作やスクリーンリーダーでの読み上げで負担が大きいといえます。また、このスクロール量は、<input type="date">要素によるブラウザネイティブのカレンダー入力でも同様の問題を引き起こします。このため、<select>要素も<input type="date">要素も、必要となる入力値によってはアクセシビリティ上の問題があるといえます。

年は最大で4桁の数字、月と日は最大で2桁の数字というように、文字数と文字種が極めて限定されており、直接入力で十分にミスなく容易に対応できるといえるでしょう。

デジタル庁デザインシステムの日付ピッカーでは、カレンダー入力もあわせて提供していますが、前後移動や曜日を確認しながら日付を探す場合において有用です。

文脈や必要となる入力値に応じて、直接入力のみを使用するか、もしくは直接入力とカレンダー入力を併用するかを見極めて使用してください。

文脈に応じてautocompleteを使用する

年月日の各フィールドに適切なautocomplete属性を指定することで、ブラウザの自動入力機能に対応できます。日付に関連するautocompleteの値は以下のとおりです。