WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Regarding an ARIA calendar picker control that supports automatic accessibility for SR and keyboard users


From: Sailesh Panchang
Date: Dec 19, 2011 8:42AM

Yes this works alright but a couple of observations
- all dates are exposed as links but one cannot tab from one date to
the next as one does between links
- non-selectable dates should be navigable to but not selectable
- admittedly, there are UA / At limitations like up/down key allows
one to navigate a column (day of week) only with JAWS in IE and with
On 12/16/11, Bryan Garaventa < <EMAIL REMOVED> > wrote:
> Hi,
> I started working on this one mainly to see if I could get the ARIA grid
> type roles working using a practical implementation, such as a calendar
> picker control that supports full accessibility. Unfortunately though, it
> appears that role=grid and all associated roles have no impact on tabular
> navigation structures. So I switched to plan B and used role=dialog,
> role=button, role=link, aria-selected, aria-label, and tabindex to do it
> anyway.
> This is what it does, in the standard fashion of calendar pickers, you just
> click the Calendar link to open the Calendar picker control.
> Then you can use the arrow keys to navigate each cell of the grid in tabular
> fashion using the structure of the underlying table.
> Press Home or End to jump to the beginning or end of a row,
> or PageDown or PageUp to jump to the next calendar month.
> The buttons for moving forward and backward can also be accessed using
> ShiftTab, since focus is automatically set on the current day of the month
> by default.
> Press enter on a date to make a selection, or press Escape or Tab to cancel
> and close the calendar.
> You can also just click on a date to select it. (Boring and very sad...)
> If you'd like to give it a spin, the demo is at
> http://whatsock.com/modules/aria_calendar_module/demo.htm
> This functionality works best with JAWS12/13 with IE8/9 and FF, and NVDA
> with FF.
> Best wishes,
> Bryan
> http://www.linkedin.com/in/bgaraventa