E-mail List Archives

Re: Accessible Calendar


From: Bryan Garaventa
Date: Feb 19, 2017 1:07PM

Just to be clear, the WhatSock datepicker as well as all of the other accessible widgets provided there are designed to be scalable components that can be individually customized and dropped into any web technology, and are equally supported in jQuery, MooTools, and Dojo so they will tie directly into the rendering processes for any of these.

E.G Specific framework download links:
Powered by jQuery: https://github.com/accdc/tsg
Powered by MooTools: https://github.com/accdc/tsg-mootools
Powered by Dojo: https://github.com/accdc/tsg-dojo

If what you mean by "standard library datepickers" is the "most popular library datepickers", then I guess you are out of luck because since when is accessibility ever considered the "most popular"?

Personally I find mixing these terms agrivating, because there is usually a big difference between what people consider a popular idea versus what is actually a good idea.

Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
415.624.2709 (o)

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Birkir R. Gunnarsson
Sent: Sunday, February 19, 2017 7:47 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Accessible Calendar

Unfortunately I don't know of any standard library datepickers that are accessible. I heard rumblings out of JQuery that their datepicker is being updated, but I don't know the current status.

The Whatsock datepicker widget is great. A similar datepicker code can be found at Deque University:
(and you can copy and paste the source code, HTML, JQuery and CSS), but ultimately it is not a replacement for a datepicker plug-in.
Ultimately, we need proper accessibility support in browsers for <input type="date">, that would be the ultimate solution.

On 2/19/17, JP Jamous < <EMAIL REMOVED> > wrote:
> Mike,
> Here's one you will like. Birkir shared this with me in the past and I
> loved it.
> Whatsock datepicker:
> http://whatsock.com/tsg/Coding%20Arena/ARIA%20Date%20Pickers/ARIA%20Da
> te%20Picker%20(Basic)/demo.htm It has good instructions on what it
> means to make a calendar accessible (focus movements and keyboard
> operations).
> For a simple date picker (one that does not have to list availability,
> appointment schedule and such) I prefer the month and day dropdown
> approach and an edit field for the year.
> <fieldset>
> <legend>Please select departure date</legend>
> <label for="month">month</label>
> <select id="month"
> <option>January</option>
> ...
> </select>
> <label for="day">Day</label>
> <select id="day">
> <option>1</option>
> <option>2</option>
> ...
> </select
> <label for="year">year (4 digits)</label> <input type="text"
> id="year"> </fieldset>
> Also, it is always useful to have a date input field as a fallback if
> the calendar is not displaying.
> Keep in mind that an input field is not a replacement for a clendar.
> The calender has info on what day of the week a certain day is (if you
> want to select the third Wednesday in December), and may have other
> info such as unavailable dates, holidays, special promotion days etc.
> That is info the user wouldn't know by interacting with a text field.
> Cheers
> -Birkir
> > > archives at http://webaim.org/discussion/archives
> >

Work hard. Have fun. Make history.