Date Picker Input

Success Criteria:

Description Label describes the input
Role Identify it as a date picker
Relationships for="input-id" is required in the label
State valid/invalid = selected/unselected
Focus Be visibly focusable with tab key / swipe
Action Enter and spacebar keys / double tap

Keyboard & Screenreader Support

Tab / swipe Moves focus to the date picket input and between parts of the date / the date string
Space / double tap If the date picker is [type="text"] is will replace the text value with a space, if the input is [type="date"] is will open the calendar month widget.
Right arrow When focus is on the input with [type="date"] Moves focus between parts of the date (day/month/year). If the input is [type="text"] moves the cursor inside of the date string
Down arrow When focus is on the input with [type="date"] decrements the current value. If the input is [type="text"] moves the cursor to the end of the string.
Left arrow When focus is on the input with [type="date"] Moves focus between parts of the date (day/month/year). If the input is [type="text"] moves the cursor inside of the date string
Up arrow When focus is on the input with [type="date"] increments the current value. If the input is [type="text"] moves the cursor to the start of the string.

Native Element

Native date inputs have a lot of of keyboard and focus interactions built in for free.

Description

  • Label inner text should describe the date picker input.
  • Label with for="[datepicker-id]" attribute works too.
  • aria-describedby="description-id" for additional descriptions
  • pattern="\d{4}-\d{2}-\d{2}"

Role

  • Is natively a date picker

Relationships

  • aria-labelledby="label-id"
  • The Label can have for="input-id" or aria-owns="input-id"
  • aria-haspopup="date-picker-dialog-id"

State

  • required="true/false"

Focus

  • Is natively focusable
  • Focus must be visible

Actions

  • Tab
  • Space
  • Arrow Keys

Custom Element

Input type="date" has 92% browser support as of April 2020. Use with a fallback.

Description

  • Label inner text should describe the Date picker input.
  • aria-label="Choose Date" can also be used.

Role Requires extra work

  • implicit as <input>

Relationships Requires extra work

  • aria-labelledby="label-id"
  • The Label can have for="input-id" or aria-owns="input-id"
  • aria-haspopup="date-picker-dialog-id"

State Requires extra work

  • aria-selected="true/false"
  • aria-invalid="true/false"

Focus Requires extra work

  • Roving tabindex="-1" and tabindex="0"

Actions Requires extra work

  • Tab
  • Space
  • Arrow Keys