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