Accessible Date Pickers Roundup
The most frequently discussed topics among developers, designers, and accessibility professionals relate to the accessibility of calendar widgets. While it is not difficult to make a calendar widget accessible, there are still instances where date pickers are inaccessible and cannot be used by assistive technologies. While it is always possible to provide alternative methods of selecting dates, it is crucial that any date picker provided is made accessible, as such pickers provide users with valuable information on the day, week, and year, as opposed to text fields where users must guess and manually 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.
Here is a selection of calendar widgets that are easily accessible and suitable for use in your upcoming project:
- ARIA Date Picker – [Recommended] AccDC Technical Style Guide by Bryan Garaventa
- Accessible Date Picker by Adina Halter
- Datepicker widget by Assets.cms.gov
- Date Picker Dialog Example by WAI-ARIA Authoring Practices 1.1
- 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.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. - ARIA date picker example by Athena
- jQuery UI datepicker by The Paciello Group (TPG)
- Native HTML Date Picker Demo
- reecelucas react-datepicker
- gpbl react-day-picker
- airbnb react-dates
An easily internationalizable, mobile-friendly datepicker library for the web - React-ADA-Keyboard-Accessible-Datepicker
Hello Raghavendra, all the articles are well written.
Regards
mahesh
Hey there!
How would the tags/keyboarding change for a date-range picker over a single-date picker?
Like travel site picker-style, with 2+ month grids shown, and a user needing to select two dates.
Hello Matt,
In a travel site where we need to select 2 dates I would suggest we think hard about the design pattern first before implementation. As a person with visual disability I will find this kind of experience confusing but we need to implement something like this then we need to separate both calendar widgets with proper headings & when user moves to calendar widget using the keyboard using the tab key it should also announce this info to the user… I would like to see an example that you are referring to, so that I can give more inputs.
Missing ExtJS 7.5 date picker also – useful addition for the many using this commercial framework.
** calendar is part of commercial, not GPL3 version.