< Back to Guides | Learn more at PaulJAdam.com >

Datepickers - Accessibility Quick Guide

Custom JavaScript Datepicker controls are almost always inaccessible to keyboard and screen reader users. HTML5 input type="date" will give you an accessible date picker in most browsers, but not all like Safari macOS where native datepickers are not supported yet.

Guidance

  1. Datepicker calendar control must be keyboard operable.
  2. Calendar controls must have meaningful accessible names and correct role/state for each button.
  3. Monday, Tuesday, Wednesday, etc. day of the week must be spoken to the screen reader user.
  4. States like Today's Date, Selected date, disabled dates, etc must be conveyed to the screen reader user.
  5. Datepicker must be operable and accessible to desktop and mobile screen readers
  6. Page Up/Page Down keys should move between months.
  7. Home and End keys should move focus to the first and last date of the month.

Bad Example


Good Example

HTML5 input type="date" Datepicker


JavaScript & ARIA Datepicker