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
Testing the Accessibility of input type=’date’ with Screen Reader Transcript
In this video, we’re going to see a demo of how the native date picker, which is built with the HTML5 date picker, is accessible to screen reader users. I’m using Firefox with NVDA screen reader, and we’ll experience the demo now.So, I’m on the page HTML input type equals date, date picker demo – Digital A11y – Mozilla Firefox. I’m going to link “Skip Main” landmark HTML input. So, I’m on the heading level one right now. I’m just going to press “Tab.”
Day spin button, month spin button, year spin button, calendar button collapsed. List with seven items, LinkedIn link, click to share on LinkedIn. Calendar button collapsed, year spin button, month spin button, day spin button. Banner landmark, main landmark, article, birthdate date edit, day spin button.
So, I’ve given the label “birthdate.” It read the label “birthdate,” then it read the day spin button focus. Which day is it? So, there’s a spin button I can use with the up and down arrows to control the date.
10 invalid entry, 11, 12, 11, 10, 09, 08, 07, 06, 05, 04, 03, 02, 01. Month spin button: 12, 01. Year spin button: 2024, 2025, 2026, 2025. I thought I could edit it also. Number lock off, number: 2, 0, 0, 2, 0. Calendar year spin button: 2020, 2022, 2022, 2222.
So, I have the ability to edit or use the arrow keys to populate the date here. I also have the calendar widget. Generally, the calendar widget is one of the most inaccessible custom components we see, but by using the input type “date” HTML5 date picker, it becomes easier to build accessible date pickers going forward.
Calendar button collapsed. I’m going to open the calendar. Expanded alert: Chrome/. It reads some alert. Clear button, January 2222, table 11. Clear button: I can clear the input type.
Type equals list with seven items: LinkedIn link, click to share, calendar button expanded. Alert clear button: Previous month button, November 2023, button collapsed. Next month button, November 2023, table 9.
Not selected: Current date 10. Not selected: Friday, column 6. Nine, not selected: Thursday, column 5. Current date: It reads that this is the current date. Ten, not selected: Friday, column 6. Eleven, not selected: Saturday, column 7.
Clear button, previous month button, November 20. Next month: Click on next month, December 2023, button collapsed. Space: Choose a month and a year dialog, December 2023, month spin button deck. Year spin button: 2023, 2024, 2025.
December 2025 button expanded. Month spin button deck, year spin button 2025. December 2025 button expanded. If I press “Escape,” December 2025 table: 11 not selected. Row 3, Thursday, column 5.
Next month button: December 2025, button collapsed. Every aspect of this table seems to be accessible. Next December 18 not selected, row 4. If I press “Enter” here, HTML input type equals date, year spin button: 2025. Month spin button: 12. Day spin button: 18.
So, that’s what I have chosen in the date picker from the calendar. This seems to be a good alternative for custom date pickers, but we have to test it on all platforms like Android, iOS, Mac, and different browser combinations. On Windows, the HTML5 date picker seems to be accessible. I tested it on Chrome and Firefox.
Let’s see the same experience on Chrome quickly. Navigation toolbar: HTTP desktop. Start when C, level one, Google Chrome toolbar. Add accessibility a11y.com Academy. Clickable main landmark: A8.
Main landmark document: Birthdate, date edit, date month, birthdate year, birthdate spin button. Show date picker menu: Thursday, November 9, 2023, row 2, column 4. Friday, November. Thursday, November 9, 2023, row 2, column 4.
If you see here, it did not say that is a current value or today’s date. Show next month button. Show previous month button. Show next month table. Show month selection panel button.
The experience is totally different on Chrome. Table: December 2023, row 3, August 2023. April 2024, row 4, December 2020. January 2024, row 4, column 1. May 2024, row 2, column table. Thursday, May 9, 2024, row 2. Wednesday, May 8, 2024.
Show date picker menu button: Sub menu year, birthdate spin button: 2024. The experience is very different when compared to Firefox, but the modal dialog traps properly.
Show pick: Clear button, today button. Show month, show previous, show next month table. Clear button: The modal dialog traps properly with the “Tab” key, but with arrow keys, it moves out of the dialog box, which needs to get trapped.
Overall, the experience is much better than the custom date pickers that are inaccessible. HTML5.
This is the end of the video. Thank you!Hey, if you like the video, do like and subscribe.
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
