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

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

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

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

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

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

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

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

フォームの入力操作は、操作そのものの煩雑さだけでなく入力内容の検討もあり、ユーザーに一定の負担がかかるものとなります。ブラウザの自動入力機能（オートフィル）を用いることで負担の軽減が期待できるため、対応するautocomplete属性を指定するようにしましょう。日付ピッカーに関連するautocompleteの値は以下のとおりです。

参考情報

• HTML 属性: autocomplete - HTML: ハイパーテキストマークアップ言語 | MDN