E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 11 (In chronological order)

From: Jennifer Vine
Date: Tue, Apr 21 2015 7:11PM
Subject: Accessible datepicker?
No previous message | Next message →

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

From: Paul J. Adam
Date: Wed, Apr 22 2015 10:13AM
Subject: Re: Accessible datepicker?
← Previous message | Next message →

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 ADDRESS 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
> > > >

From: Jennifer Vine
Date: Wed, Apr 22 2015 12:40PM
Subject: Re: Accessible datepicker?
← Previous message | Next message →

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 ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Accessible datepicker?
> Date: April 22, 2015 9:13:20 AM PDT
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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
>> >> >> >> >
>
>
>
> > > >

From: Paul J. Adam
Date: Wed, Apr 22 2015 1:03PM
Subject: Re: Accessible datepicker?
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED = >
>> Subject: Re: [WebAIM] Accessible datepicker?
>> Date: April 22, 2015 9:13:20 AM PDT
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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
>>> >>> >>> >>> >>
>>
>>
>>
>> >> >> >> >
> > > >

From: Jennifer Sutton
Date: Wed, Apr 22 2015 1:50PM
Subject: Re: Accessible datepicker?
← Previous message | Next message →

Hello, all:

With the caveat that these are bookmarks I happen to have around, but
that I haven't tested them, I'll paste a few links below my name, in
case they may offer ideas.

While I agree with you, Paul, that testing with two or three screen
reader browser combos is ideal, not everybody has the time,
knowledge, or resources to do that.

Unfortunately, support for ARIA varies more than any of us wish it did.

Your advice is spot on, Paul, if we lived in an ideal worldd, or even
better would be that AT and browsers would catch up so that expertise
and so much testing were no longer required.

I would say that the folks in Canada tend to have done pretty
rigorous work on their platform, so it should be a good model.

See links below my name for additional ideas.

Best,
Jennifer


http://www.oaa-accessibility.org/examplep/datepicker1/

http://whatsock.com/tsg/Coding%20Arena/ARIA%20Date%20Pickers/ARIA%20Date%20Picker%20(with%20Disabled%20Date%20Ranges)/demo.htm
in conjunction with:
http://whatsock.com/tsg/

http://assets.cms.gov/resources/framework/2.0/Pages/datepicker.html

From: Jennifer Vine
Date: Wed, Apr 22 2015 6:45PM
Subject: Re: Accessible datepicker?
← Previous message | Next message →

"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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
>>> Subject: Re: [WebAIM] Accessible datepicker?
>>> Date: April 22, 2015 9:13:20 AM PDT
>>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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
>>>> >>>> >>>> >>>> >>>
>>>
>>>
>>>
>>> >>> >>> >>> >>
>> >> >> >> >
> > > >

From: Bryan Garaventa
Date: Wed, Apr 22 2015 8:43PM
Subject: Re: Accessible datepicker?
← Previous message | Next message →

Hi,
Sorry, I'm coming to this thread a bit late, but the TSG GitHub project at
https://github.com/accdc/tsg
Includes programmatically configurable accessible date pickers that include the ability to dynamically configure disabled date ranges using JavaScript JSON syntax.

Example:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Date%20Pickers/ARIA%20Date%20Picker%20(with%20Disabled%20Date%20Ranges)/demo.htm

Navigate to July 4 to see a programmatically disabled date.

Best wishes,
Bryan

From: Lynn Holdsworth
Date: Wed, Apr 22 2015 11:21PM
Subject: Re: Accessible datepicker?
← Previous message | Next message →

Paul, your example works great on the iPhone when it comes to choosing a date, but it doesn't seem possible to check which date has been chosen except by opening up the date picker again.

Best, Lynn



> On 22 Apr 2015, at 17:13, Paul J. Adam < = EMAIL ADDRESS REMOVED = > wrote:
>
> 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 ADDRESS 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
>> >> >> >> >
> > > >

From: Bryan Garaventa
Date: Thu, Apr 23 2015 12:34AM
Subject: Re: Accessible datepicker?
← Previous message | Next message →

Apologies, I forgot to mention in case it's not clear, the date string is fully customizable, such as mm/dd/yyy, dd/mm/yyy, or any other format. This is configurable within the callback function during the setup, where the target control is programmatically set at the same time.

Additionally, the week day column structure can be programmatically adjusted, if you want the left most column to start with a different day of the week as with some European countries, by setting a positive or negative config.wdOffset value.

Also, the date picker can be bound to simulated elements, such as an ARIA Textbox control in the same manner as with a standard Input for customizing displays across devices.

All the best,
Bryan

From: Jennifer Vine
Date: Thu, Apr 23 2015 11:04AM
Subject: Re: Accessible datepicker?
← Previous message | Next message →

Thanks, Bryan, this is great. I had looked at this one (Jennifer S. posted it earlier), but didn't notice/realize the configuration options.

JV

On Apr 22, 2015, at 11:34 PM, "Bryan Garaventa" < = EMAIL ADDRESS REMOVED = > wrote:

> Apologies, I forgot to mention in case it's not clear, the date string is fully customizable, such as mm/dd/yyy, dd/mm/yyy, or any other format. This is configurable within the callback function during the setup, where the target control is programmatically set at the same time.
>
> Additionally, the week day column structure can be programmatically adjusted, if you want the left most column to start with a different day of the week as with some European countries, by setting a positive or negative config.wdOffset value.
>
> Also, the date picker can be bound to simulated elements, such as an ARIA Textbox control in the same manner as with a standard Input for customizing displays across devices.
>
> All the best,
> Bryan
>
>
>

From: Bryan Garaventa
Date: Thu, Apr 23 2015 11:22AM
Subject: Re: Accessible datepicker?
← Previous message | No next message

No worries :)

I should have mentioned this at the start, these configuration options are also documented online at
http://whatsock.com/tsg/#tgl-2-3

It's easy to play with the code in the Coding Arena within the GitHub download to see what is possible too, which usually makes more sense to devs.

One note, I wrote that section at the beginning of 2013, so where it says that an Input element must be used, this goes back to the support levels for ARIA back then. I need to update this soon to reflect more recent support for simulated controls as with ARIA Textboxes. The functionality works regardless though.

The styling is also fully configurable, as with the language for all textual label strings, and so on. It's designed to be scalable.

All the best,
Bryan