Unfortunately, several shiny HTML5 features (such as the video element), ended up implemented to different levels by browsers, without good accessibility, and without an interface that satisfied designers (a nearly impossible task). This includes the date input.
And a designer should first ask, is a date picker actually needed?
Recently on Twitter, there was some discussion about accessible date picker widgets. Jason Kiss (@JKiss) did some analysis and gave feedback.
https://twitter.com/jkiss/status/720720467829493760 (Tweet no longer exists.)
I felt compelled to list the examples of accessible date pickers mentioned in the Twitter thread, so here they are. Know any other good ones?
- Date Picker dialog by W3C WAI
- Accessible date picker by Deque Systems
Athena date picker(no longer working)- jQuery UI datepicker by Hans Hillen
Datepicker widgetby Assets.cms.gov(outdated/not maintained)- AccDc date picker by Bryan Garaventa
- Added Jan 2017: Accessible date picker by Adina Halter
- Added Jun 2020: Tommy’s inclusive datepicker by Tommy Feldt
- Added Jan 2021: Duet Date Picker Nice!
- Added 2023: Date picker by U.S. Web Design System (USWDS)
PS: In the tweet thread, props to @handcoding, @pauljadam, and @backflip.
Related articles:
- Can I Use – Date and time input types
- Added Sep. 2017: Accessible Datepickers by Axess Lab
- Added Sep. 2017: Considerations around the accessibility of a calendar control by Microsoft
- Added Jul. 2018: We need to talk about the accessibility of date pickers by Alda Vigdís
- A New Day: Making a Better Calendar by Gerard Cohen via 24 Accessibility (Dec. 5, 2018)
- Highly recommended: Mar. 2019: Collecting dates in an accessible way by Graham Armfield via Hassell Inclusion
- What makes an accessible date picker? Is it even possible? #ID24 2023 with Russ Weakley
Last updated Nov 2023
10 replies on “Accessible Date Pickers”
http://amsul.ca/pickadate.js/ (in the author words) is “ARIA-enabled to be WCAG 2.0 compliant” and “Has touch & keyboard friendliness.”
[…] http://www.webaxe.org/accessible-date-pickers/ […]
Good work, Dennis!
A few that were mentioned in the Twitter thread to add to your list:
-http://examples.simplyaccessible.com/datepicker/ was one of the original six I reviewed
-https://wet-boew.github.io/v4.0-ci/demos/datepicker/datepicker-en.html
Bravo Dennis,
BTW, to see a live example, you may visit elal.com website, and activate the screen reader profile using User1st solution.
[…] I didn’t test the date picker accessibility. WebAxe has a roundup of accessible date pickers. […]
I have tested all of these with JAWS 17. Only two (Deque and Whatsock) are usable at all and there are issues with those.
The showstopper with the Deque one is the inability to increment the year – that’s a serious oversight and not something I would know how to add. This would be my recommended date picker if that was fixed. It’s also way too verbose, although that should be easily fixed.
Instead, I have to recommend the Whatsock date picker despite its issues. JAWS announces the non-standard method for moving to the next and previous months and years, but it is a significant cognitive load for a screen reader user. If there is already a date in the textbox, it is ignored when the date picker opens and the date picker is set to whatever it was set to previously. Instead, it ought to read the contents of the textbox, which the Deque one does. The date is automatically entered in the textbox in the format “Monday January 5, 2015” so some server-side processing would be needed to get this into the dd/mm/yyyy format that most systems expect. It may be possible to do a client-side fix but that’s way beyond my ability.
So the search continues for a truly accessible date picker. Any more suggestions?
Hi, to respond to your issues.
“JAWS announces the non-standard method for moving to the next and previous months and years, but it is a significant cognitive load for a screen reader user.”
I agree this is a bit verbose, though this message can be customized within setup.js to whatever you wish, also you can press Shift+Tab or Tab to locate buttons that do what you wish as well in the nature of a modal dialog. The use of the PageUp/PageDown keys have been recommended for many years as part of the ARIA Authoring Practices guide, so I’m not sure how this is non-standard though. A lot of experimentation went into these keystrokes though, and these were the only ones that worked consistently in JAWS going back to JAWS11 in IE8 on Windows XP going forward as well as within Firefox, plus in NVDA in Firefox in Windows XP through Windows 10. Plus this allows access for voice navigation software such as Dragon by passing such keystrokes through to the date picker by voicing commands like ‘press PageUp’ or ‘press PageDown’, which will also control the date picker.
“If there is already a date in the textbox, it is ignored when the date picker opens and the date picker is set to whatever it was set to previously. Instead, it ought to read the contents of the textbox, which the Deque one does.”
Within these examples the text field itself is not programmed to control the date picker, however support for this is already built in, so if you need help with setting this up I can assist. Just send me a message at bryan.garaventa@levelaccess.com if you wish to do this.
“The date is automatically entered in the textbox in the format “Monday January 5, 2015” so some server-side processing would be needed to get this into the dd/mm/yyyy format that most systems expect.”
No server side processing is needed for this, the setup instructions include examples that show how to implement whatever string format you desire during the datepicker setup declaration, included in the Coding Arena archive at
https://github.com/accdc/tsg
E.G Here is one such that includes this date string format change within setup.js link
There is one issue that may still exist in JAWS, where if you open the date picker on a disabled date such as Saturday or Sunday, JAWS will not automatically activate Applications Mode as expected to allow for arrow key navigation. I raised this as a bug with Freedom Scientific over a year ago, and to my knowledge they don’t see this as a problem worth fixing. Perhaps others will get better traction on this if other reports are filed by different people.
All the best,
Bryan
[…] 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 […]
Hi,
Appreciate this is an old article, but I was just checking out the examples you listed and the link for OpenAjax picker, http://www.oaa-accessibility.org/examplep/datepicker1/, seems to redirect to some sketchy investmenty type site, might be worth removing it.
Done, thank you!