WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: jQuery Calendar Control

for

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

From: Greg Gamble
Date: Tue, Apr 30 2013 3:28PM
Subject: jQuery Calendar Control
No previous message | Next message →

Hello All,
I've created a form that has a field for inputting a date of birth. I'm using the jQuery Datepicker, set to open when an icon to the right of the box is clicked. Otherwise a mask is used to restrict the formatting of the date to "mm/DD/yyyy".

Here is a jsFiddle link: http://jsfiddle.net/GregS/YUWMc/embedded/result/

Anyway, my question is .. does the mask or Datepicker inhibit those using a screen reader? Does it help? Is it even viewable?

Greg Gamble
SBCTC - Olympia | Information Services

From: Lucy Greco
Date: Tue, Apr 30 2013 3:33PM
Subject: Re: jQuery Calendar Control
← Previous message | Next message →

When I go to that demo I am only given a edit box that says date it does
not give me any indication of format or that there if is a format I only
get lite frame and date Lucy

Lucia Greco
Web Access Analyst
IST-Campus Technology Services
University of California, Berkeley
(510) 289-6008 skype: lucia1-greco
http://webaccess.berkeley.edu
Follow me on twitter @accessaces

-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Greg Gamble
Sent: Tuesday, April 30, 2013 2:29 PM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] jQuery Calendar Control

Hello All,
I've created a form that has a field for inputting a date of birth. I'm
using the jQuery Datepicker, set to open when an icon to the right of the
box is clicked. Otherwise a mask is used to restrict the formatting of
the date to "mm/DD/yyyy".

Here is a jsFiddle link: http://jsfiddle.net/GregS/YUWMc/embedded/result/

Anyway, my question is .. does the mask or Datepicker inhibit those using
a screen reader? Does it help? Is it even viewable?

Greg Gamble
SBCTC - Olympia | Information Services

From: Patrick Burke
Date: Tue, Apr 30 2013 3:43PM
Subject: Re: jQuery Calendar Control
← Previous message | Next message →

Similar experience to Lucy. However, in Firefox I get a little
__/__/____ indicator on the field (before entering Forms Mode). Is
that the mask? ...

Patrick

At 02:28 PM 4/30/2013, Greg Gamble wrote:
>Hello All,
>I've created a form that has a field for inputting a date of
>birth. I'm using the jQuery Datepicker, set to open when an icon to
>the right of the box is clicked. Otherwise a mask is used to
>restrict the formatting of the date to "mm/DD/yyyy".
>
>Here is a jsFiddle link: http://jsfiddle.net/GregS/YUWMc/embedded/result/
>
>Anyway, my question is .. does the mask or Datepicker inhibit those
>using a screen reader? Does it help? Is it even viewable?
>
>Greg Gamble
>SBCTC - Olympia | Information Services
>
>
>>>--
Patrick J. Burke

Coordinator
UCLA Disabilities &
Computing Program

Phone: 310 206-6004
E-mail: = EMAIL ADDRESS REMOVED =
Location: 4909 Math Science


Department Contact: = EMAIL ADDRESS REMOVED =

From: Don Mauck
Date: Tue, Apr 30 2013 3:48PM
Subject: Re: jQuery Calendar Control
← Previous message | Next message →

While I can enter a date, it really isn't labeled correctly. You certainly can see the date, but we here date but the format is only noted by slashes. I'm glad I can look at it with a Braille display that made it easy. I think you need to have month, day and year clearly defined.
-----Original Message-----
From: Greg Gamble [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Tuesday, April 30, 2013 3:29 PM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] jQuery Calendar Control

Hello All,
I've created a form that has a field for inputting a date of birth. I'm using the jQuery Datepicker, set to open when an icon to the right of the box is clicked. Otherwise a mask is used to restrict the formatting of the date to "mm/DD/yyyy".

Here is a jsFiddle link: http://jsfiddle.net/GregS/YUWMc/embedded/result/

Anyway, my question is .. does the mask or Datepicker inhibit those using a screen reader? Does it help? Is it even viewable?

Greg Gamble
SBCTC - Olympia | Information Services

From: Angela French
Date: Tue, Apr 30 2013 3:53PM
Subject: Re: jQuery Calendar Control
← Previous message | Next message →

Hi All. I work with Greg. I'd like to clarify the question a bit. If, when the user tabs to the birthday field, the datepicker displays automatically, does THAT become burdensome to screenreader users, or is it better to have a datepicker icon outside of the date field, but associated with it? How best to associate the datepicker with the datefield?

Angela French

>-----Original Message-----
>From: = EMAIL ADDRESS REMOVED = [mailto:webaim-forum-
> = EMAIL ADDRESS REMOVED = ] On Behalf Of Greg Gamble
>Sent: Tuesday, April 30, 2013 2:29 PM
>To: = EMAIL ADDRESS REMOVED =
>Subject: [WebAIM] jQuery Calendar Control
>
>Hello All,
>I've created a form that has a field for inputting a date of birth. I'm using the
>jQuery Datepicker, set to open when an icon to the right of the box is clicked.
>Otherwise a mask is used to restrict the formatting of the date to
>"mm/DD/yyyy".
>
>Here is a jsFiddle link: http://jsfiddle.net/GregS/YUWMc/embedded/result/
>
>Anyway, my question is .. does the mask or Datepicker inhibit those using a
>screen reader? Does it help? Is it even viewable?
>
>Greg Gamble
>SBCTC - Olympia | Information Services
>
>
>>>to = EMAIL ADDRESS REMOVED =

From: Bryan Garaventa
Date: Tue, Apr 30 2013 3:53PM
Subject: Re: jQuery Calendar Control
← Previous message | Next message →

The IMG that is used as the triggering element is not keyboard accessible,
and doesn't have a textual equivalent for screen reader users, which is why
it's not being recognized.

If it helps, you can see an example of a keyboard accessible implementation
at
http://whatsock.com/bootstrap
On the Calendar tab.

If you make it an image link, it will work better.

----- Original Message -----
From: "Greg Gamble" < = EMAIL ADDRESS REMOVED = >
To: < = EMAIL ADDRESS REMOVED = >
Sent: Tuesday, April 30, 2013 2:28 PM
Subject: [WebAIM] jQuery Calendar Control


> Hello All,
> I've created a form that has a field for inputting a date of birth. I'm
> using the jQuery Datepicker, set to open when an icon to the right of the
> box is clicked. Otherwise a mask is used to restrict the formatting of
> the date to "mm/DD/yyyy".
>
> Here is a jsFiddle link: http://jsfiddle.net/GregS/YUWMc/embedded/result/
>
> Anyway, my question is .. does the mask or Datepicker inhibit those using
> a screen reader? Does it help? Is it even viewable?
>
> Greg Gamble
> SBCTC - Olympia | Information Services
>
>
> > >

From: Angela French
Date: Tue, Apr 30 2013 3:58PM
Subject: Re: jQuery Calendar Control
← Previous message | Next message →

Bryan, I am sighted and mouse-dependent. I tried to use the keyboard on your calendar and couldn't navigate around it. Perhaps I'm just too clumsy with a keyboard, but it begs the question, would most users just rather type in the date if they are provided the correct format in the <label> tag?

Angela French

>-----Original Message-----
>From: = EMAIL ADDRESS REMOVED = [mailto:webaim-forum-
> = EMAIL ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
>Sent: Tuesday, April 30, 2013 2:54 PM
>To: WebAIM Discussion List
>Subject: Re: [WebAIM] jQuery Calendar Control
>
>The IMG that is used as the triggering element is not keyboard accessible, and
>doesn't have a textual equivalent for screen reader users, which is why it's not
>being recognized.
>
>If it helps, you can see an example of a keyboard accessible implementation at
>http://whatsock.com/bootstrap On the Calendar tab.
>
>If you make it an image link, it will work better.
>
>----- Original Message -----
>From: "Greg Gamble" < = EMAIL ADDRESS REMOVED = >
>To: < = EMAIL ADDRESS REMOVED = >
>Sent: Tuesday, April 30, 2013 2:28 PM
>Subject: [WebAIM] jQuery Calendar Control
>
>
>> Hello All,
>> I've created a form that has a field for inputting a date of birth. I'm
>> using the jQuery Datepicker, set to open when an icon to the right of the
>> box is clicked. Otherwise a mask is used to restrict the formatting of
>> the date to "mm/DD/yyyy".
>>
>> Here is a jsFiddle link: http://jsfiddle.net/GregS/YUWMc/embedded/result/
>>
>> Anyway, my question is .. does the mask or Datepicker inhibit those using
>> a screen reader? Does it help? Is it even viewable?
>>
>> Greg Gamble
>> SBCTC - Olympia | Information Services
>>
>>
>> >> >> >
>>>

From: Bryan Garaventa
Date: Tue, Apr 30 2013 4:00PM
Subject: Re: jQuery Calendar Control
← Previous message | Next message →

If it only appears when the edit field receives focus, then there is no way
for screen reader users to intuitively realize that it is available, and
keyboard only users still need to be able to tab into it to choose a
specific date.


----- Original Message -----
From: "Angela French" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Tuesday, April 30, 2013 2:53 PM
Subject: Re: [WebAIM] jQuery Calendar Control


> Hi All. I work with Greg. I'd like to clarify the question a bit. If,
> when the user tabs to the birthday field, the datepicker displays
> automatically, does THAT become burdensome to screenreader users, or is it
> better to have a datepicker icon outside of the date field, but associated
> with it? How best to associate the datepicker with the datefield?
>
> Angela French
>
>>-----Original Message-----
>>From: = EMAIL ADDRESS REMOVED = [mailto:webaim-forum-
>> = EMAIL ADDRESS REMOVED = ] On Behalf Of Greg Gamble
>>Sent: Tuesday, April 30, 2013 2:29 PM
>>To: = EMAIL ADDRESS REMOVED =
>>Subject: [WebAIM] jQuery Calendar Control
>>
>>Hello All,
>>I've created a form that has a field for inputting a date of birth. I'm
>>using the
>>jQuery Datepicker, set to open when an icon to the right of the box is
>>clicked.
>>Otherwise a mask is used to restrict the formatting of the date to
>>"mm/DD/yyyy".
>>
>>Here is a jsFiddle link: http://jsfiddle.net/GregS/YUWMc/embedded/result/
>>
>>Anyway, my question is .. does the mask or Datepicker inhibit those using
>>a
>>screen reader? Does it help? Is it even viewable?
>>
>>Greg Gamble
>>SBCTC - Olympia | Information Services
>>
>>
>>>>>>messages
>>to = EMAIL ADDRESS REMOVED =
>
>
> > >

From: Greg Gamble
Date: Tue, Apr 30 2013 4:01PM
Subject: Re: jQuery Calendar Control
← Previous message | Next message →

The example is a very plain input field with no labeling or anything else ... it's just a test of the mask and the Datepicker.
Patrick and Don ... yes, what you see is the default mask. Here is an updated example with a label.

http://jsfiddle.net/YUWMc/8/embedded/result/


Greg

-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Patrick Burke
Sent: Tuesday, April 30, 2013 2:44 PM
To: WebAIM Discussion List; = EMAIL ADDRESS REMOVED =
Subject: Re: [WebAIM] jQuery Calendar Control

Similar experience to Lucy. However, in Firefox I get a little
__/__/____ indicator on the field (before entering Forms Mode). Is
that the mask? ...

Patrick

At 02:28 PM 4/30/2013, Greg Gamble wrote:
>Hello All,
>I've created a form that has a field for inputting a date of
>birth. I'm using the jQuery Datepicker, set to open when an icon to
>the right of the box is clicked. Otherwise a mask is used to
>restrict the formatting of the date to "mm/DD/yyyy".
>
>Here is a jsFiddle link: http://jsfiddle.net/GregS/YUWMc/embedded/result/
>
>Anyway, my question is .. does the mask or Datepicker inhibit those
>using a screen reader? Does it help? Is it even viewable?
>
>Greg Gamble
>SBCTC - Olympia | Information Services
>
>
>>>--
Patrick J. Burke

Coordinator
UCLA Disabilities &
Computing Program

Phone: 310 206-6004
E-mail: = EMAIL ADDRESS REMOVED =
Location: 4909 Math Science


Department Contact: = EMAIL ADDRESS REMOVED =

From: Angela French
Date: Tue, Apr 30 2013 4:04PM
Subject: Re: jQuery Calendar Control
← Previous message | Next message →

I don't see the mask or the datepicker in the jsfiddle example in IE9

>-----Original Message-----
>From: = EMAIL ADDRESS REMOVED = [mailto:webaim-forum-
> = EMAIL ADDRESS REMOVED = ] On Behalf Of Greg Gamble
>Sent: Tuesday, April 30, 2013 3:01 PM
>To: WebAIM Discussion List
>Subject: Re: [WebAIM] jQuery Calendar Control
>
>The example is a very plain input field with no labeling or anything else ... it's
>just a test of the mask and the Datepicker.
>Patrick and Don ... yes, what you see is the default mask. Here is an updated
>example with a label.
>
>http://jsfiddle.net/YUWMc/8/embedded/result/
>
>
>Greg
>
>-----Original Message-----
>From: = EMAIL ADDRESS REMOVED = [mailto:webaim-forum-
> = EMAIL ADDRESS REMOVED = ] On Behalf Of Patrick Burke
>Sent: Tuesday, April 30, 2013 2:44 PM
>To: WebAIM Discussion List; = EMAIL ADDRESS REMOVED =
>Subject: Re: [WebAIM] jQuery Calendar Control
>
>Similar experience to Lucy. However, in Firefox I get a little __/__/____
>indicator on the field (before entering Forms Mode). Is that the mask? ...
>
>Patrick
>
>At 02:28 PM 4/30/2013, Greg Gamble wrote:
>>Hello All,
>>I've created a form that has a field for inputting a date of birth.
>>I'm using the jQuery Datepicker, set to open when an icon to the right
>>of the box is clicked. Otherwise a mask is used to restrict the
>>formatting of the date to "mm/DD/yyyy".
>>
>>Here is a jsFiddle link:
>>http://jsfiddle.net/GregS/YUWMc/embedded/result/
>>
>>Anyway, my question is .. does the mask or Datepicker inhibit those
>>using a screen reader? Does it help? Is it even viewable?
>>
>>Greg Gamble
>>SBCTC - Olympia | Information Services
>>
>>
>>>>>>messages to = EMAIL ADDRESS REMOVED =
>
>
>--
>Patrick J. Burke
>
>Coordinator
>UCLA Disabilities &
>Computing Program
>
>Phone: 310 206-6004
>E-mail: = EMAIL ADDRESS REMOVED =
>Location: 4909 Math Science
>
>
>Department Contact: = EMAIL ADDRESS REMOVED =
>
>>>to = EMAIL ADDRESS REMOVED =
>
>
>>>to = EMAIL ADDRESS REMOVED =

From: Lucy Greco
Date: Tue, Apr 30 2013 4:05PM
Subject: Re: jQuery Calendar Control
← Previous message | Next message →

That worked well no problem that time it does not cause any access
problems

Lucia Greco
Web Access Analyst
IST-Campus Technology Services
University of California, Berkeley
(510) 289-6008 skype: lucia1-greco
http://webaccess.berkeley.edu
Follow me on twitter @accessaces


-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Greg Gamble
Sent: Tuesday, April 30, 2013 3:01 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] jQuery Calendar Control

The example is a very plain input field with no labeling or anything else
... it's just a test of the mask and the Datepicker.
Patrick and Don ... yes, what you see is the default mask. Here is an
updated example with a label.

http://jsfiddle.net/YUWMc/8/embedded/result/


Greg

-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Patrick Burke
Sent: Tuesday, April 30, 2013 2:44 PM
To: WebAIM Discussion List; = EMAIL ADDRESS REMOVED =
Subject: Re: [WebAIM] jQuery Calendar Control

Similar experience to Lucy. However, in Firefox I get a little __/__/____
indicator on the field (before entering Forms Mode). Is that the mask? ...

Patrick

At 02:28 PM 4/30/2013, Greg Gamble wrote:
>Hello All,
>I've created a form that has a field for inputting a date of birth.
>I'm using the jQuery Datepicker, set to open when an icon to the right
>of the box is clicked. Otherwise a mask is used to restrict the
>formatting of the date to "mm/DD/yyyy".
>
>Here is a jsFiddle link:
>http://jsfiddle.net/GregS/YUWMc/embedded/result/
>
>Anyway, my question is .. does the mask or Datepicker inhibit those
>using a screen reader? Does it help? Is it even viewable?
>
>Greg Gamble
>SBCTC - Olympia | Information Services
>
>
>>>messages to = EMAIL ADDRESS REMOVED =


--
Patrick J. Burke

Coordinator
UCLA Disabilities &
Computing Program

Phone: 310 206-6004
E-mail: = EMAIL ADDRESS REMOVED =
Location: 4909 Math Science


Department Contact: = EMAIL ADDRESS REMOVED =

messages to = EMAIL ADDRESS REMOVED =


messages to = EMAIL ADDRESS REMOVED =

From: Angela French
Date: Tue, Apr 30 2013 4:09PM
Subject: Re: jQuery Calendar Control
← Previous message | Next message →

Lucy, do you think it would be bothersome to have the datepicker automatically launched upon tabbing into the date field? We are trying to decide which way works best for everybody.

>-----Original Message-----
>From: = EMAIL ADDRESS REMOVED = [mailto:webaim-forum-
> = EMAIL ADDRESS REMOVED = ] On Behalf Of Lucy Greco
>Sent: Tuesday, April 30, 2013 3:05 PM
>To: WebAIM Discussion List
>Subject: Re: [WebAIM] jQuery Calendar Control
>
>That worked well no problem that time it does not cause any access problems
>
>Lucia Greco
>Web Access Analyst
>IST-Campus Technology Services
>University of California, Berkeley
>(510) 289-6008 skype: lucia1-greco
>http://webaccess.berkeley.edu
>Follow me on twitter @accessaces
>
>
>-----Original Message-----
>From: = EMAIL ADDRESS REMOVED =
>[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Greg Gamble
>Sent: Tuesday, April 30, 2013 3:01 PM
>To: WebAIM Discussion List
>Subject: Re: [WebAIM] jQuery Calendar Control
>
>The example is a very plain input field with no labeling or anything else ... it's
>just a test of the mask and the Datepicker.
>Patrick and Don ... yes, what you see is the default mask. Here is an updated
>example with a label.
>
>http://jsfiddle.net/YUWMc/8/embedded/result/
>
>
>Greg
>
>-----Original Message-----
>From: = EMAIL ADDRESS REMOVED =
>[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Patrick Burke
>Sent: Tuesday, April 30, 2013 2:44 PM
>To: WebAIM Discussion List; = EMAIL ADDRESS REMOVED =
>Subject: Re: [WebAIM] jQuery Calendar Control
>
>Similar experience to Lucy. However, in Firefox I get a little __/__/____
>indicator on the field (before entering Forms Mode). Is that the mask? ...
>
>Patrick
>
>At 02:28 PM 4/30/2013, Greg Gamble wrote:
>>Hello All,
>>I've created a form that has a field for inputting a date of birth.
>>I'm using the jQuery Datepicker, set to open when an icon to the right
>>of the box is clicked. Otherwise a mask is used to restrict the
>>formatting of the date to "mm/DD/yyyy".
>>
>>Here is a jsFiddle link:
>>http://jsfiddle.net/GregS/YUWMc/embedded/result/
>>
>>Anyway, my question is .. does the mask or Datepicker inhibit those
>>using a screen reader? Does it help? Is it even viewable?
>>
>>Greg Gamble
>>SBCTC - Olympia | Information Services
>>
>>
>>>>>>messages to = EMAIL ADDRESS REMOVED =
>
>
>--
>Patrick J. Burke
>
>Coordinator
>UCLA Disabilities &
>Computing Program
>
>Phone: 310 206-6004
>E-mail: = EMAIL ADDRESS REMOVED =
>Location: 4909 Math Science
>
>
>Department Contact: = EMAIL ADDRESS REMOVED =
>
>>>to = EMAIL ADDRESS REMOVED =
>
>
>>>to = EMAIL ADDRESS REMOVED =
>>>to = EMAIL ADDRESS REMOVED =

From: Bryan Garaventa
Date: Tue, Apr 30 2013 4:10PM
Subject: Re: jQuery Calendar Control
← Previous message | No next message

If a date picker is provided, it should be equally accessible. The reason
being, that it's not always easy to pick a specific date weeks or months in
the future accurately simply by typing it into an edit field, especially if
you need to know what day of the week is being referenced for instance.

Once I was able to trigger the calendar on your test site, the construct
looks good to me, it's just a matter of making the triggering element
accessible and ensuring that you can invoke everything from the keyboard.

If I may ask, what difficulties did you have on the bootstrap calendar? I
just tried it out, and everything appears to be working correctly. E.G After
activating the calendar icon, the Up/Down/Left/Right keys will switch dates,
PageUp/PageDown will switch months, and Alt+PageUp/Alt+PageDown will switch
years.



----- Original Message -----
From: "Angela French" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Tuesday, April 30, 2013 2:58 PM
Subject: Re: [WebAIM] jQuery Calendar Control


> Bryan, I am sighted and mouse-dependent. I tried to use the keyboard on
> your calendar and couldn't navigate around it. Perhaps I'm just too
> clumsy with a keyboard, but it begs the question, would most users just
> rather type in the date if they are provided the correct format in the
> <label> tag?
>
> Angela French
>
>>-----Original Message-----
>>From: = EMAIL ADDRESS REMOVED = [mailto:webaim-forum-
>> = EMAIL ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
>>Sent: Tuesday, April 30, 2013 2:54 PM
>>To: WebAIM Discussion List
>>Subject: Re: [WebAIM] jQuery Calendar Control
>>
>>The IMG that is used as the triggering element is not keyboard accessible,
>>and
>>doesn't have a textual equivalent for screen reader users, which is why
>>it's not
>>being recognized.
>>
>>If it helps, you can see an example of a keyboard accessible
>>implementation at
>>http://whatsock.com/bootstrap On the Calendar tab.
>>
>>If you make it an image link, it will work better.
>>
>>----- Original Message -----
>>From: "Greg Gamble" < = EMAIL ADDRESS REMOVED = >
>>To: < = EMAIL ADDRESS REMOVED = >
>>Sent: Tuesday, April 30, 2013 2:28 PM
>>Subject: [WebAIM] jQuery Calendar Control
>>
>>
>>> Hello All,
>>> I've created a form that has a field for inputting a date of birth. I'm
>>> using the jQuery Datepicker, set to open when an icon to the right of
>>> the
>>> box is clicked. Otherwise a mask is used to restrict the formatting of
>>> the date to "mm/DD/yyyy".
>>>
>>> Here is a jsFiddle link:
>>> http://jsfiddle.net/GregS/YUWMc/embedded/result/
>>>
>>> Anyway, my question is .. does the mask or Datepicker inhibit those
>>> using
>>> a screen reader? Does it help? Is it even viewable?
>>>
>>> Greg Gamble
>>> SBCTC - Olympia | Information Services
>>>
>>>
>>> >>> >>> >>
>>>>>>>
>
> > >