WebAIM - Web Accessibility In Mind

E-mail List Archives

Accessible Calendar

for

From: Strange, Lainie
Date: Sep 30, 2019 9:39AM

Hello all – I located this two year old conversation on accessible calendars and thought I'd see if there was anything new that has come about since this was posted.

I am trying to come up with an accessible Google Calendar embed (preferably the agenda view) to use in websites. Is there anything open-source or a good accessible alternative way to display google calendar data?

Any insight greatly appreciated!

Lainie Strange
State of Missouri
OA Web Accessibility Coordinator
DESE/DHEWD Web Developer



From: Mike Barlow
Date: Sun, Feb 19 2017 8:10AM
Subject: Accessible Calendar
No previous message | Next message →<https://webaim.org/discussion/mail_thread?thready70#post1>

I've worked on several projects that require calendars (think Google
Calendar), but so far I have yet to find any open source calendar that
meets standard (e.g. WCAG2.0 or Section 508) accessibility guidelines heck,
even Google Calendar isn't accessible from the Month view (their tip to use
Google Calendar with a screen reader is to "set your calendar to Agenda
View").

So does anyone know of any calendar library that can be used that would not
fail accessibility tests (right now my current immediate need is for one
that passes Section 508 though WCAG 2.0 would definitely be preferable).

Thanks
*Mike Barlow*
Web Application Developer
Web Accessibility/Section 508 SME

Lancaster, Pa 17601
Office: 732.835-7557
Cell: 732.682.8226
e-mail: = EMAIL ADDRESS REMOVED
From: JP Jamous
Date: Sun, Feb 19 2017 8:20AM
Subject: Re: Accessible Calendar
← Previous message<https://webaim.org/discussion/mail_thread?thready70#post0> | Next message →<https://webaim.org/discussion/mail_thread?thready70#post2>

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

From: Birkir R. Gunnarsson
Date: Sun, Feb 19 2017 8:47AM
Subject: Re: Accessible Calendar
← Previous message<https://webaim.org/discussion/mail_thread?thready70#post1> | Next message →<https://webaim.org/discussion/mail_thread?thready70#post3>

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 ADDRESS 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.

From: Bryan Garaventa
Date: Sun, Feb 19 2017 1:07PM
Subject: Re: Accessible Calendar
← Previous message<https://webaim.org/discussion/mail_thread?thready70#post2> | Next message →<https://webaim.org/discussion/mail_thread?thready70#post4>

Hi,
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.
= EMAIL ADDRESS REMOVED 415.624.2709 (o)
www.SSBBartGroup.com<;http://www.ssbbartgroup.com/>;