Input Type ‘date’: The Accessibility of HTML Date Picker
As a screen reader user, I always dread finding a date picker that is not accessible on the website where I need to fill out forms. Whether it is used to collect a birth date or when booking a ticket on air travel or hotel booking sites, often these date pickers are not accessible and pose significant barriers for people with disabilities when trying to proceed with their form submissions.
In my career as an accessibility consultant, I have realized that developers tend to use custom date pickers built using JavaScript. These date pickers vary in functionality and user experience depending on the content management system or JavaScript framework being used.
The inspiration for this article came while I was performing an accessibility audit on a website and found that the form was using a broken date picker that blocked my progress. While recording the accessibility failures and recommendations in the report, I referred to checking the ARIA date picker from the ARIA Authoring Practice Guide.
But I couldn’t help thinking, why use a custom date picker when we can solve the problem with the native HTML input type=’date’? I quickly created a demo and tested it with a screen reader. The results were astounding. A few years ago, the native HTML date picker was not accessible, but this is very different. Check out the video below for more details.
HTML Date Picker Video
The HTML date picker behaves differently on Firefox and Chrome browsers. However, its overall experience surpasses any other custom date picker I’ve encountered on various booking platforms. Perhaps, in a few more years, this will receive full support across all browsers and assistive technologies. Feel free to share your thoughts in the comments below!
Related Reads
- Native HTML Date Picker Demo by DigitalA11Y
- Is input type=”date” ready for use in accessible websites? by Hassel Inclusion
- input[type=”date”] element (html) by A11Y Support
- Maybe You Don’t Need a Date Picker by Adrian Roselli