WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Calendar

for

From: Birkir R. Gunnarsson
Date: Feb 19, 2017 8:47AM

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:
https://dequeuniversity.com/library/aria/date-pickers/sf-date-picker
(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%20Date%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
>
> > > > >


--
Work hard. Have fun. Make history.