WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Web Calendar

for

From: Birkir R. Gunnarsson
Date: Oct 6, 2016 10:02AM

A few more
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




On 10/6/16, Mary Heid < <EMAIL REMOVED> > wrote:
> JP-
> We have the same interest here at UNR. When I work with vendors and their
> calendars are not accessible, they often ask, "do you know of an accessible
> calendar we can look to for direction?" Below is what I've given to a few of
> them from a search I did about 6 months ago. I don't know if any of them
> found it helpful, but I share it here with you. I would really appreciate
> some feedback if these are or are not helpful resources and if you find
> anything in your search that I might be able to pass along to my vendors in
> the future.
>
> Thank you,
>
> -Mary
>
> "As promised, here are some resources that may lead you in the right
> direction for an accessible calendar. Not being a developer myself, I would
> appreciate if you can let us know if you find any of these particularly
> helpful or not helpful so I can pass them along or not in the future. Thank
> you."
>
> Looks like Stanford figured it out....
> https://soap.stanford.edu/tips-and-tools/tips/wai-aria/wai-aria-widgets[soap.stanford.edu]
> Follow the second link under Date Pickers to see one that may work.
>
> ARIA information about a date picker
> https://www.w3.org/TR/2009/WD-wai-aria-practices-20091215/#datepicker[w3.org]
>
> Deque University HTML, JavaScript, CSS Source Code
> https://dequeuniversity.com/library/aria/date-pickers/sf-date-picker[dequeuniversity.com]
>
> jQuery UI DatePicker from 2013
> http://www.deque.com/blog/accessible-jquery-ui-datepicker/[deque.com]
>
> HTML code from 2007
> http://www.catea.gatech.edu/scripts/calendar.html[catea.gatech.edu]
>
>
>
> Mary Heid
> System Administrator, Enrollment Services
> Coordinator, Assistive Technology
> University of Nevada, Reno
> (775) 682-8038
> http://www.unr.edu/general-information/accessibility
>
>
>
>
>