WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Datepicker & NVDA Support

for

From: Bryan Garaventa
Date: May 22, 2016 11:50PM

Thanks, I'll look into these suggestions as well.

It is important to note here however that all of the things we have been talking about, as well as the comments from Chaals, are in regard to usability modifications, not accessibility. This datepicker is already accessible, which follows the paradigms of correct focus movement to ensure keyboard accessibility, plus role and labelling for correct textual equivalents, plus the use of ARIA to ensure the correct browse modality for screen reader users when activated.

Specifically there is a dedicated focusable triggering element, when activated focus moves into the datepicker grid, at which point the arrow keys plus Home and End can be pressed to move between dates, the PageUp and PageDown keys can be used to move by month, and Alt+PageUp and Alt+PageDown can be used to navigate by year. Enter can be pressed to save the date, or Escape or Tab can be pressed to close the datepicker, at which point focus is set back to the triggering element.

It is not actually necessary to press and release every keystroke to scroll the datepicker for every increment, so in your example to navigate to 1950, you can simply press Alt+PageDown and hold these keys down to scroll the datepicker to the correct date. I just tried this in Firefox and it took about 5 seconds. The same is true for all of the other keystrokes, for instance you can press and hold the Down or Up arrow keys to scroll by week across many months at a time, or the PageUp or PageDown keys to do the same by month. This occurs because as you hold these keys down, the assigned functions for navigation fire repeatedly.

This too is accessible on touch screen devices by tapping the datepicker button to open the date picker and tapping the desired date to save, or the date picker can be closed by tapping on any static text outside of the datepicker to cancel and close it.

"And is there any "standard" way (other than simply putting the instructions on the page) to inform a user what the keyboard shortcuts are for a particular custom widget like this?"

We are currently working on a way of doing this using ARIA for standard controls via the aria-keyshortcuts attribute
http://www.w3.org/TR/wai-aria-1.1/#aria-kbdshortcuts
(aria-kbdshortcuts will be changed to aria-keyshortcuts for better understandability in the future)

However something like this probably would not be much good for a datepicker, because if all possible shortcuts are set on all focusable dates, they would be announced every time focus is moved in the datepicker, which would be overkill and quite annoying, and they would still not be perceivable by sighted keyboard only users.

The simplest and most effective way to do this is to put a focusable questionmark help icon with a role of link or button plus aria-expanded next to the Datepicker icon, so that a user can tab to one then the other to activate it, which would pop open an overlay that shows all of the possible key conbinations. Here is an example of a popup that works like this:
http://whatsock.com/tsg/Coding%20Arena/Popups/Popup%20(Internal%20Content)/demo.htm


Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
<EMAIL REMOVED>
415.624.2709 (o)
www.SSBBartGroup.com