WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible datepicker?

for

From: Jennifer Vine
Date: Apr 22, 2015 6:45PM

"letting go of the desire to control"… hah, that's the tricky part. Certainly, the iOS experience is dramatically better with native controls. The remaining appeal of the javascript solutions is that we can prevent the user from selecting a date when a location is closed. But it looks like our best approach is to use the WET date picker and capture errors after the fact.

Many thanks,
JV


On Apr 22, 2015, at 12:03 PM, Paul J. Adam < <EMAIL REMOVED> > wrote:

> No problem, it's even worse on iOS, date picker wont open, nothing useful is spoken to VoiceOver when swiping through dates other than "12", "13", etc.
>
> They didn't implement aria-describedby correctly to make it work for VoiceOver, the element has no role other than TD and a tabindex=0.
> You should test a UI widget like this on at least 3 different Browser/Screen reader combinations like iOS VoiceOver, NVDA/Firefox, JAWS/IE. Making that work in all 3 is not easy but there is no way you can assume accessibility by reading the code without testing it in many screen readers. I see that problem with ARIA all the time, no one has actually tested it or they'd know it didn't work.
>
> For the WET date picker, part of accessibility is letting go of the desire to control how user interface controls appear on many different platforms like desktop Mac/PC & mobile iOS/Android. All the HTML5 input types are going to look and behave differently. The nice part is that you don't have to waste time trying to achieve a pixel perfect design with all the a11y requirements and keyboard scripting for desktop & mobile. With HTML5 you let Apple, Google, Mozilla, etc. take the responsibility to make an accessible form control. I much prefer the native HTML5 inputs for mobile and they're mostly accessible on iOS other than the bugs you always find.
>
>
> Paul J. Adam
> Accessibility Evangelist
> www.deque.com <http://www.deque.com/>;
>> On Apr 22, 2015, at 1:40 PM, Jennifer Vine < <EMAIL REMOVED> > wrote:
>>
>> Thanks for testing the freqdec demo, Paul. It is using aria-describedby to connect the day of the week to the date, so I would have expected it to pass on that specific issue. Is aria-describedby something that is configured differently by individual users?
>>
>> The Web Experience Toolkit widget is interesting, but it defaults to the basic HTML5 input type="date" when that is supported by the browser. That means a different experience for different users and/or contexts, which is not ideal.
>>
>> JV
>>
>> Jennifer Vine
>> UX Designer
>> Stanford University Libraries
>>
>>> From: "Paul J. Adam" < <EMAIL REMOVED> >
>>> Subject: Re: [WebAIM] Accessible datepicker?
>>> Date: April 22, 2015 9:13:20 AM PDT
>>> To: WebAIM Discussion List < <EMAIL REMOVED> >
>>>
>>>
>>> I tried out your linked date picker demo in VoiceOver OS X Safari and it does not speak out the name of the day of the week like "monday, tue. etc." so it's not useful if they still have to guess what day April 26 is or pull out their calendar.
>>>
>>> I've frequently recommended the Web Experience Toolkit's Date Picker widget as it's always accessible when I've tested it, http://wet-boew.github.io/wet-boew/demos/datepicker/datepicker-en.html <http://wet-boew.github.io/wet-boew/demos/datepicker/datepicker-en.html>; It speaks the name of the day of the week for each date cell.
>>>
>>> Would love to see other accessible examples too!
>>>
>>> Paul J. Adam
>>> Accessibility Evangelist
>>> www.deque.com <http://www.deque.com/>;
>>>> On Apr 21, 2015, at 8:11 PM, Jennifer Vine < <EMAIL REMOVED> > wrote:
>>>>
>>>> This feels like it might be a frequently-asked question here, but I've not found anything recent; only some discussion about jQuery UI a couple of years ago. Forgive me if I missed something.
>>>>
>>>> We're working on a form where the user will be required to select a date. Allowable dates will be constrained by a range (e.g. earliest is day after tomorrow; latest is 6 months from today) and closed days (which will vary according to a previous selection on the form - some locations are open weekends, some aren't). The form gets a fairly high number of international users and one-time users.
>>>>
>>>> I'm wondering if anyone is familiar with this one:
>>>> http://freqdec.github.io/datePicker/demo/
>>>>
>>>> (I like that it does some clever stuff like convert typed input "April 23" into the correct date format.)
>>>>
>>>> Please share any other options you think are good.
>>>>
>>>> Many thanks,
>>>>
>>>> Jennifer Vine
>>>> UX Designer
>>>> Stanford University Libraries
>>>> >>>> >>>> >>>> >>>
>>>
>>>
>>>
>>> >>> >>> >>> >>
>> >> >> >> >
> > > >