WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Calendar

for

From: JP Jamous
Date: Feb 19, 2017 8:20AM

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