WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Accessible Calendar

for

Number of posts in this thread: 11 (In chronological order)

From: Mike Barlow
Date: Sun, Feb 19 2017 8:10AM
Subject: Accessible Calendar
No previous message | Next message →

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 | Next message →

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 | Next message →

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 | Next message →

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

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Birkir R. Gunnarsson
Sent: Sunday, February 19, 2017 7:47 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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:
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%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.

From: Mike Barlow
Date: Mon, Feb 20 2017 7:13AM
Subject: Re: Accessible Calendar
← Previous message | Next message →

Thanks (hadn't seen Birkir's date picker so will definitely check that one
out as well) but what I'm looking more for is a calendar view (think Google
Calendar Month View) that is accessible.

Most of them have really non accessible tables (no scope parameters, and
each week is it's own table rather than the entire month being a single
table).

The jquery calendar (fullcalendar.io) is the one we're currently looking at
but while it may pass some automated tests, trying to navigate it with a
screen reader (I test with NVDA on Chrome and IE mostly, but do load up
JAWS as well on occasion) is an exercise in futility (but then again I'm
not as adept at using a screen reader as some full time screen reader users
are so for them it might not be as difficult as it is for me: ¯_(ツ)_/¯)

*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 =

On Sun, Feb 19, 2017 at 3:07 PM, Bryan Garaventa <
= EMAIL ADDRESS REMOVED = > wrote:

> 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
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Birkir R. Gunnarsson
> Sent: Sunday, February 19, 2017 7:47 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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:
> 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%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.
> > > at http://webaim.org/discussion/archives
> > > > > >

From: JP Jamous
Date: Mon, Feb 20 2017 7:28AM
Subject: Re: Accessible Calendar
← Previous message | Next message →

As stated, A11Y doesn't apply to every widget out there. That's why we have WCAG.

I tested the calendar that Birkir suggested on computers and mobile devices. As a screen reader user, I was quite impressed. Even iOS 10 that has had issues with some ARIA attributes, performed quite well with it. Why recreate the wheels if you have a solution that works right out of the box?

From: Mike Barlow
Date: Mon, Feb 20 2017 7:34AM
Subject: Re: Accessible Calendar
← Previous message | Next message →

Oh I agree as a date picker I really like Bikir's. Problem is, the client
(a Gov't Office) wants a month/week/day view that they can use for
scheduling, but our/their 508 person keeps telling us that the month/week
view isn't compliant because the tables don't have scoping/etc. And if we
can find something that works I'd much prefer that than to go about and try
redoing the fullcalendar.io month/week views.


*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 =

On Mon, Feb 20, 2017 at 9:28 AM, JP Jamous < = EMAIL ADDRESS REMOVED = > wrote:

> As stated, A11Y doesn't apply to every widget out there. That's why we
> have WCAG.
>
> I tested the calendar that Birkir suggested on computers and mobile
> devices. As a screen reader user, I was quite impressed. Even iOS 10 that
> has had issues with some ARIA attributes, performed quite well with it. Why
> recreate the wheels if you have a solution that works right out of the box?
>
> > > > >

From: Jonathan Cohn
Date: Mon, Feb 20 2017 2:13PM
Subject: Re: Accessible Calendar
← Previous message | Next message →

But a month table really does not have any row headers to use unless you want to have week numbers. So I don't know what the complaint about scope would be.


Best wishes,

Jonathan Cohn



> On Feb 20, 2017, at 9:34 AM, Mike Barlow < = EMAIL ADDRESS REMOVED = > wrote:
>
> Oh I agree as a date picker I really like Bikir's. Problem is, the client
> (a Gov't Office) wants a month/week/day view that they can use for
> scheduling, but our/their 508 person keeps telling us that the month/week
> view isn't compliant because the tables don't have scoping/etc. And if we
> can find something that works I'd much prefer that than to go about and try
> redoing the fullcalendar.io month/week views.
>
>
> *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 =
>
> On Mon, Feb 20, 2017 at 9:28 AM, JP Jamous < = EMAIL ADDRESS REMOVED = > wrote:
>
>> As stated, A11Y doesn't apply to every widget out there. That's why we
>> have WCAG.
>>
>> I tested the calendar that Birkir suggested on computers and mobile
>> devices. As a screen reader user, I was quite impressed. Even iOS 10 that
>> has had issues with some ARIA attributes, performed quite well with it. Why
>> recreate the wheels if you have a solution that works right out of the box?
>>
>> >> >> >> >>
> > > >

From: Mike Barlow
Date: Tue, Feb 21 2017 5:36AM
Subject: Re: Accessible Calendar
← Previous message | Next message →

But wouldn't scope indicate day of week at least (unless there was screen
reader markers in each day cell to indicate day of week, and ideally month)
otherwise navigating with a screen reader would simply indicate the day.

On Feb 20, 2017 4:13 PM, "Jonathan Cohn" < = EMAIL ADDRESS REMOVED = > wrote:

> But a month table really does not have any row headers to use unless you
> want to have week numbers. So I don't know what the complaint about scope
> would be.
>
>
> Best wishes,
>
> Jonathan Cohn
>
>
>
> > On Feb 20, 2017, at 9:34 AM, Mike Barlow < = EMAIL ADDRESS REMOVED = > wrote:
> >
> > Oh I agree as a date picker I really like Bikir's. Problem is, the client
> > (a Gov't Office) wants a month/week/day view that they can use for
> > scheduling, but our/their 508 person keeps telling us that the month/week
> > view isn't compliant because the tables don't have scoping/etc. And if we
> > can find something that works I'd much prefer that than to go about and
> try
> > redoing the fullcalendar.io month/week views.
> >
> >
> > *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 =
> >
> > On Mon, Feb 20, 2017 at 9:28 AM, JP Jamous < = EMAIL ADDRESS REMOVED = > wrote:
> >
> >> As stated, A11Y doesn't apply to every widget out there. That's why we
> >> have WCAG.
> >>
> >> I tested the calendar that Birkir suggested on computers and mobile
> >> devices. As a screen reader user, I was quite impressed. Even iOS 10
> that
> >> has had issues with some ARIA attributes, performed quite well with it.
> Why
> >> recreate the wheels if you have a solution that works right out of the
> box?
> >>
> >> > >> > >> > >> > >>
> > > > > > > > >
> > > > >

From: Bryan Garaventa
Date: Tue, Feb 21 2017 9:29AM
Subject: Re: Accessible Calendar
← Previous message | Next message →

It depends on what type of table you are implementing. The following resource provides instructions for doing all of these variations.
http://www.w3.org/WAI/tutorials/tables/

This is asuming that you are making a static data table and not an interactive construct navigable using the arrow keys however.


Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Mike Barlow
Sent: Tuesday, February 21, 2017 4:36 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Accessible Calendar

But wouldn't scope indicate day of week at least (unless there was screen reader markers in each day cell to indicate day of week, and ideally month) otherwise navigating with a screen reader would simply indicate the day.

On Feb 20, 2017 4:13 PM, "Jonathan Cohn" < = EMAIL ADDRESS REMOVED = > wrote:

> But a month table really does not have any row headers to use unless
> you want to have week numbers. So I don't know what the complaint
> about scope would be.
>
>
> Best wishes,
>
> Jonathan Cohn
>
>
>
> > On Feb 20, 2017, at 9:34 AM, Mike Barlow < = EMAIL ADDRESS REMOVED = > wrote:
> >
> > Oh I agree as a date picker I really like Bikir's. Problem is, the
> > client (a Gov't Office) wants a month/week/day view that they can
> > use for scheduling, but our/their 508 person keeps telling us that
> > the month/week view isn't compliant because the tables don't have
> > scoping/etc. And if we can find something that works I'd much prefer
> > that than to go about and
> try
> > redoing the fullcalendar.io month/week views.
> >
> >
> > *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 =
> >
> > On Mon, Feb 20, 2017 at 9:28 AM, JP Jamous < = EMAIL ADDRESS REMOVED = > wrote:
> >
> >> As stated, A11Y doesn't apply to every widget out there. That's why
> >> we have WCAG.
> >>
> >> I tested the calendar that Birkir suggested on computers and mobile
> >> devices. As a screen reader user, I was quite impressed. Even iOS
> >> 10
> that
> >> has had issues with some ARIA attributes, performed quite well with it.
> Why
> >> recreate the wheels if you have a solution that works right out of
> >> the
> box?
> >>
> >> > >> > >> archives at http://webaim.org/discussion/archives
> >> > >>
> > > > > > archives at http://webaim.org/discussion/archives
> > >
> > > archives at http://webaim.org/discussion/archives
> >

From: Bourne, Sarah (MASSIT)
Date: Tue, Feb 21 2017 11:25AM
Subject: Re: Accessible Calendar
← Previous message | No next message

We were looking at Bedework open source event calendar a few years back. It had good accessibility, and options for making tweaks if problems turned up. It's used primarily by colleges and universities, but we found it met our business requirements, too. We didn't end up using it - other work was deemed a higher priority.
URL: https://www.apereo.org/projects/bedework

Sarah E. Bourne
Director of IT Accessibility, MassIT
Commonwealth of Massachusetts
1 Ashburton Pl. rm 811 Boston MA 02108
617-626-4502
= EMAIL ADDRESS REMOVED =
http://www.mass.gov/MassIT