WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible jQuery UI DatePicker

for

From: Bryan Garaventa
Date: Sep 30, 2013 8:49AM

I understand your frustration when you say "As a keyboard user, the effort
of tabbing around the date-picker (especially with multiple years available)
was a big hassle."

Out of curiosity, did you encounter the same level of difficulty at
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Date%20Pickers/ARIA%20Date%20Picker%20(Basic)/demo.htm
The keystrokes being:
Press the Left and Right arrow keys to navigate the row by week day.
Press the Home and End keys to jump to the beginning or end of the current
row.
Press the Up and Down arrow keys to navigate between weeks on the same week
day.
Press the PageDown and PageUp keys to navigate backwards or forwards by
month.
Press Alt+PageDown and Alt+PageUp to navigate backwards or forwards by year.
Press the Enter key to activate the selected date.
Press Escape to close the calendar without making a selection.

Back to the jQuery UI date picker, if the only way to overcome in-built
accessibility issues is to recommend that people just type the date in
manually, then it defeats the purpose of an accessible date picker.

Often the value of a date picker, is to make it easy to identify which dates
fall on a certain day of the week, which is valuable weeks, months, or years
down the road, such as when making travel plans for instance.

It's not a good accessibility solution to simply state that disabled people
should just figure it out on their own.



----- Original Message -----
From: "Alastair Campbell" < <EMAIL REMOVED> >
To: "WebAIM Discussion List" < <EMAIL REMOVED> >
Sent: Monday, September 30, 2013 2:37 AM
Subject: Re: [WebAIM] Accessible jQuery UI DatePicker


> The article is interesting and I'm sure the techniques presented are
> useful
> in some scenarios. However, given that the focus is never moved into the
> date-picker, I struggling to see how useful it is to announce changes to
> it? If it is, the issue Bryan outlined then become an issue.
>
> When we've used a date-picker (jQuery UI or otherwise) the effort/reward
> ratio of making it keyboard accessible seemed very low.
>
> As a keyboard user, the effort of tabbing around the date-picker
> (especially with multiple years available) was a big hassle. It required
> many key-presses to complete a simple task. It is somewhat easier if you
> have a screen reader and can use table-based navigation, but still a
> hassle
> compared to typing in the date.
>
> Therefore we took the approach of allowing keyboard entry on the input and
> making very clear the format required. I.e. treating it as though there
> were no date-picker, and applying good validation to the input. E.g.
> <label for="date">Date (yyyy-mm-dd)</label><input...
>
> From a general usability point of view the date-picker is useful if you
> are
> using the mouse and the date you want is in the default set shown (e.g.
> this month). Otherwise most people are going to find typing the date in as
> easy as using date-picker, although some people will prefer to use the
> mouse anyway.
>
> But overall, if you treat it as a non-required enhancement, that seems to
> be the most effective approach.
>
> Is that what other people have done for this?
>
> -Alastair
> > >