WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Datepicker & NVDA Support

for

From: Mike Barlow
Date: May 22, 2016 2:41PM

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%20Da
> > 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
> > > at http://webaim.org/discussion/archives
> > > > > >