WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Date Picker feedback now works equally across IE FF andSafari for desktop and mobile screen readers


From: Bryan Garaventa
Date: Jun 23, 2014 12:25PM

I don't have either of these personally to test this, but there is no reason why it shouldn't.

Basically, when the Calendar icon is activated, focus is automatically set within the date picker upon the current date, allowing
the date picker to handle all standard keyboard interactions.

So using the Mac, if ARIA support is handled in the same manner as within iOS using VoiceOver, using the assigned keystrokes should
convey the same feedback.

Similarly, using Dragon, once the date picker is opened, it should then be possible to voice the desired commands like so:
'press up' or 'press down' to navigate by week.
'press left' or 'press right' to navigate by day.
'press home' or 'press end' to navigate to the beginning or end of a week.
'press pageDown' or 'press pageUp' to navigate by month.
'press enter' to save a date and close the date picker.
'press escape' or 'press tab' to cancel and close the date picker without saving.

It would be great to get feedback from those who can verify this functionality personally though.

-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Morin, Gary (NIH/OD) [E]
Sent: Monday, June 23, 2014 7:16 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Date Picker feedback now works equally across IE FF and Safari for desktop and mobile screen readers

How well does the date picker work with Dragon Naturally Speaking (or the Mac version)?

From: Bryan Garaventa [ <EMAIL REMOVED> ]
Sent: Saturday, June 21, 2014 09:49 PM
To: 'WebAIM Discussion List'
Subject: [WebAIM] Date Picker feedback now works equally across IE FF and Safari for desktop and mobile screen readers

Since there have been quite a few important updates regarding ARIA support in the last year, I've updated the ARIA Date Picker to
take advantage of these. I also wanted to see how well it scaled between desktop browsers and iOS devices.

So, it now works equally across IE, FF, and Safari using JAWS, NVDA, and VoiceOver on both iPhone and iPad iOS devices. (Tested
using the latest versions of each.)

It also handles the use of aria-disabled for disabled date ranges, which is correctly conveyed across all of the above browser/AT

This can be tested at


(The 4th of July is disabled)

The module code has been pushed to all relevant GitHub projects for download if desired.

E.G https://github.com/accdc/tsg

Only the calendar module file has been changed, so if the date picker is being used, dropping this updated file into any
pre-existing implementation will automatically start working without causing any errors or conflicts; it will just be more
accessible automatically.

Files changed: calendar_generator.js and calendar_generator.min.js

Please let me know if you encounter any issues.

Best wishes,