Accessible Datepickers Roundup

Accessible date pickers or accessible calendar widgets as they are commonly referred to, are one of the most discussed topics between developers, designers and accessibility professional. It is not hard to make a calendar widget accessible but still we find inaccessible date pickers in the wild that are not usable by any assistive technology. We can always provide alternative ways of providing the date but when a date picker is provided it must be made accessible as the date pickers give information about the day, week & year details when compared to a text field where we are forced to guess & enter the date.

Recently, a friend approached asking me to share any examples of accessible calendar widgets  and sure enough my friend Denis from Webaxe has a good collection here which I also listed below… all of these date pickers seem to work well with JAWS and Chrome browser and you might want to customize them further according to your needs.

• Duet Date Picker
  Duet Date Picker is an open source version of Duet Design System’s accessible date picker. Duet Date Picker can be implemented and used across any JavaScript framework or no framework at all. We accomplish this by using standardized web platform APIs and Web Components.

  Why yet another date picker?

  Our team working on Duet Design System couldn’t find an existing date picker that would’ve ticked all the requirements we had for accessibility (supporting WCAG 2.1 as well as we can), so we decided to build one and open source it so that others could benefit from this work as well.

• fymmot/inclusive-dates: A human-friendly datepicker. Supports natural language manual input through Chrono.js. Fully accessible with keyboard and screen
  reader.
• Date Picker Dialog Example by WAI-ARIA Authoring Practices 1.1
• ARIA Date Picker (Basic) – AccDC Technical Style Guide by Bryan Garaventa
• Accessible Datepicker by Deque University
• ARIA date picker example by Athena
• jQuery UI datepicker by The Paciello Group (TPG)
• Accessible Date Picker by Adina Halter
• Datepicker widget by Assets.cms.gov
• reecelucas react-datepicker
• gpbl react-day-picker
• airbnb react-dates
  An easily internationalizable, mobile-friendly datepicker library for the web
• rossoj85 react-ada-keyboard-accessible-datepicker

Related Articles

• We need to talk about the accessibility of date pickers by Alda Vigdís
• Accessible Datepickers by webaxe.org
• Accessible datepickers by Axess Lab
• Collecting dates in an accessible way by Hassell Inclusion
• Maybe You Don’t Need a Date Picker by Adrian Roselli