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


-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Mike Barlow
Sent: Sunday, May 22, 2016 1:41 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Accessible Datepicker & NVDA Support

Bryan, nice looking Date Picker but one thing I would probably do would be to add a couple of other keyboard shortcuts and enhancements:
Alt-Y - Puts you into a "Year" field where the year is displayed and allow you to enter a specific year (for example if I have to "Alt-PageDown" from
2016 to 1950 that's a lot of keystrokes
Alt-M - Same for a "Month" field.

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?

*Mike Barlow*
Web Application Developer
Web Accessibility/Section 508 SME

Lancaster, Pa 17601
Office: 732.835-7557
Cell: 732.682.8226
e-mail: <EMAIL REMOVED>

On Sun, May 22, 2016 at 3:51 PM, Bryan Garaventa < <EMAIL REMOVED> > wrote:

> Thanks, that does help.
>
> I see what you mean about the date format, though this is challenging
> because this is totally customizable in the setup, where a developer
> can literally do whatever they wish, such as "Saturday March 15,
> 2018", "2017-03-15", "03/15/2017", or anything else, and this can be
> tied to individual select elements for Month Day and Year, or to an
> edit field such as this. So writing an algorithm to predict anything a
> developer wants to do is impossible. That being said though, it is
> possible to manually set a date within the datepicker JavaScript
> object, so I can write instructions for doing this with a test page.
> Also putting a placeholder with the date string format would probably help, so I'll change this later this week.
>
> Regarding the keystrokes, it is true there are a lot, yet this
> difficulty will be the same for all date pickers out there. I'll look
> into adding a help icon that can be used to pop these open, which should help.
>
> I'll look into the other observations too, there is likely a way at
> present to control the datepicker from the edit field now, though I
> will need to build this from scratch. Even if I do this though, users
> still will not automatically know what all of the keystrokes are
> accept through trial and error, the same as all such datepickers out there.
>
> FYI, you can scan through the years by holding down Alt+PageUp or
> Alt+PageDown.
>
>
> Bryan Garaventa
> Accessibility Fellow
> SSB BART Group, Inc.
> <EMAIL REMOVED>
> 415.624.2709 (o)
> www.SSBBartGroup.com
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
> Behalf Of Chaals McCathie Nevile
> Sent: Sunday, May 22, 2016 1:43 AM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Accessible Datepicker & NVDA Support
>
> Hi Bryan,
>
> On Sat, 21 May 2016 08:52:36 -0000, Bryan Garaventa <
> <EMAIL REMOVED> > wrote:
>
> > Hi Chaals,
> >
> > " Figuring out what makes an accessible date picker, and finding a
> > *really* good one, gives us insight into quite a lot of complex
> > problems."
> >
> > Please test the following when you have a chance, it would be good
> > to get your opinion on this one.
> > http://whatsock.com/tsg/Coding%20Arena/ARIA%20Date%20Pickers/ARIA%20
> > Da
> > te%20Picker%20(Basic)/demo.htm
>
> There's a lot to like, obviously. But some things are still really
> quite hard.
>
> As an example, I tried to select my birthday - if you want to send me
> a card, please ask…. It seemed likely that I could put in a date, by
> hand, and although there was no clue about the format I had hoped I
> would get something in the right year when I popped up the date picker widget.
> Instead it takes dozens of keystrokes, most with a 3-finger
> combination, and I have to know the keyboard shortcut - which is
> unannounced except in this example page.
>
> The way I first tried to do it, tabbing around and hitting return on
> the arrow that shifts years, which is easier than the dance for me to
> genereate modified pageDn, shifted my focus from the button I was on -
> previous year
> - back to the date. So that path was going to be hundreds of keystrokes.
>
> I tried it because I couldn't remember if the shortcut you had for
> skipping years was one that already did something else in my normal set up.
>
> Some things that could be improved.
>
> 1. Look at the value when you open the picker and see if you can parse
> it 2. Don't jump focus when the picker is open 3. Use a focusable
> dropdown that recognises typing for the year, so if I start typing 156
> it offers me the decade of the 1560s to select from.
> 4. Ditto for month, I guess.
>
> I'd be interested to hear others' thoughts about this. It's really not
> a simple topic about a couple of bugs in a piece of code. There are
> some really hard issues in here.
>
> cheers
>
> > Best wishes,
> > Bryan
> >
> >
> > Bryan Garaventa
> > Accessibility Fellow
> > SSB BART Group, Inc.
> > <EMAIL REMOVED>
> > 415.624.2709 (o)
> > www.SSBBartGroup.com
> >
> > -----Original Message-----
> > From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
> > Behalf Of Chaals McCathie Nevile
> > Sent: Saturday, May 21, 2016 3:41 AM
> > To: WebAIM Discussion List < <EMAIL REMOVED> >
> > Subject: Re: [WebAIM] Accessible Datepicker & NVDA Support
> >
> > On Thu, 19 May 2016 17:08:20 -0000, Meacham, Steve - FSA, Kansas
> > City, MO < <EMAIL REMOVED> > wrote:
> >
> >> In my organization, I consider date pickers to be a "progressive
> >> enhancement" and don't even assess them for accessibility, so long
> >> as the user has the option to use them or ignore them and still
> >> specify a date.
> >
> > For precisely the reasons Jonathan suggested, such as knowing what
> > day of the week some date three months in the future will be, or
> > more generally being able to annotate dates with more information, I
> > suggest that it is very helpful to consider the accessibility of
> > date
> pickers.
> >
> > I also recognise that they are a very common thing that it is very
> > difficult to make very accessible.
> >
> > And since I am offline, I can't look at the specific example for
> > another day or so, but I'd be interested to see.
> >
> > I'm really hoping that Web Components will help us fix the problem
> > that input typeÚte failed to solve in HTML5. Figuring out what
> > makes an accessible date picker, and finding a *really* good one,
> > gives us insight into quite a lot of complex problems.
> >
> > Challenges for the truly geeky - but which become really important
> > when talking about how to deal with dates.
> >
> > 1. I was at the world finals of ICPC, a programming competition, for
> > the last week. There was a big poster outside with a mascot-type
> > figure, and text that amounted, for me who doesn't read the local
> > language's alphabet, to
> >
> > 17-20 *something* 2559
> >
> > What does it mean, and how is it relevant to the current discussion?
> >
> > 2. We have fairly reliable information - Shakespeare ;) - that
> > Julius Caesar was killed on the Ides of March, in 44 BC.
> >
> > When was that exactly?
> >
> > 3. Why was the anniversary of the October Revolution celebreated in
> > November?
> >
> > 4. When does the month of Ramadan start and end this year?
> >
> > cheers
> >
> > Chaals
> >
> >> -----Original Message-----
> >> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
> >> Behalf Of Jonathan Avila
> >> Sent: Thursday, May 19, 2016 11:15 AM
> >> To: WebAIM Discussion List < <EMAIL REMOVED> >
> >> Subject: Re: [WebAIM] Accessible Datepicker & NVDA Support
> >>
> >>> (Not sure why they exist). Just type MM/DD/YYY in the label.
> >>
> >> Date pickers are sometimes necessary because they can indicate
> >> dates that are unavailable/available/holiday and they provide
> >> additional information in tabular form such as the week a date
> >> falls on or for example whether a date is the first, two, third,
> >> etc. Thursday in the month.
> >>
> >> Jonathan
> >>
> >> Jonathan Avila
> >> Chief Accessibility Officer
> >> SSB BART Group
> >> <EMAIL REMOVED>
> >> 703.637.8957 (Office)
> >> Visit us online: Website | Twitter | Facebook | Linkedin | Blog
> >> Check out our Digital Accessibility Webinars!
> >>
> >>
> >> -----Original Message-----
> >> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
> >> Behalf Of Brandon Keith Biggs
> >> Sent: Thursday, May 19, 2016 12:11 PM
> >> To: WebAIM Discussion List
> >> Subject: Re: [WebAIM] Accessible Datepicker & NVDA Support
> >>
> >> Hello,
> >> NVDA users would be crazy if they used a date picker! (Not sure why
> >> they exist). Just type MM/DD/YYY in the label. But that date picker
> >> is fine on my end (although I would never use it because I have to
> >> go through every day in every year!) Thanks,
> >>
> >>
> >> Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
> >>
> >> On Thu, May 19, 2016 at 6:52 AM, Nisar A
> >> < <EMAIL REMOVED> >
> >> wrote:
> >>
> >>> Hello experts,
> >>>
> >>> I built up a datepicker using bits and pieces from other datepickers.
> >>> Is there a way I can verify if that datepicker is compliant with
> >>> USDOT-508 / meets the WCAG 2.1.1 guidelines?
> >>>
> >>> Here is the working example for reference:
> >>> https://jsfiddle.net/j49gz3g3/4/
> >>>
> >>> Some people in the testing team say that it is not compliant since
> >>> NVDA screen reader reads out the date along with the column/row
> >>> number. They claim it should read only the date and not extra
> >>> information.
> >>>
> >>> Is that true?
> >>>
> >>> Thanks,
> >>> Nisar
> >>> > >>> > >>> archives at http://webaim.org/discussion/archives
> >>> > >>>
> >> > >> > >> archives at http://webaim.org/discussion/archives
> >> > >> > >> > >> archives at http://webaim.org/discussion/archives
> >> > >>
> >>
> >>
> >>
> >> This electronic message contains information generated by the USDA
> >> solely for the intended recipients. Any unauthorized interception
> >> of this message or the use or disclosure of the information it
> >> contains may violate the law and subject the violator to civil or
> >> criminal penalties.
> >> If you believe you have received this message in error, please
> >> notify the sender and delete the email immediately.
> >> > >> > >> archives at http://webaim.org/discussion/archives
> >> > >
> >
> > --
> > Charles McCathie Nevile - web standards - CTO Office, Yandex
> > <EMAIL REMOVED> - - - Find more at http://yandex.com
> > > > > > archives at http://webaim.org/discussion/archives
> > > > > > > > archives at http://webaim.org/discussion/archives
> > >
>
> --
> Charles McCathie Nevile - web standards - CTO Office, Yandex
> <EMAIL REMOVED> - - - Find more at http://yandex.com
> > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> >