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

for

From: Sailesh Panchang
Date: Dec 19, 2011 10:09AM

Non selectable dates: Well in your examples, one can select any date
in the month. But I am referring to a scenario where certain dates are
not available. e.g. one cannot schedule a bank transaction on a date
the bank is closed. Or maybe one cannot get an appointment at the
doctor's office, say on a Sunday ... so these dates would be
unavailable. No I am not referring to blank spaces in the table before
/after first / last day of month.
UA/AT issue: Well as I said up/down arrow key seemed to work as
expected when using JAWS13 with IE (and not JAWS with Firefox 8) and
with NVDA and Firefox (and not NVDA and IE). So down arrow from Dec 19
does not go to Dec 26 as one may expect when using IE with NVDA.
That's my experience.
Tab order: Right, I understand. But when dates are exposed as links,
one is tempted to tab as one does on a page usually.
Sailesh

On 12/19/11, Bryan Garaventa < <EMAIL REMOVED> > wrote:
> Thanks :)
>
> The reason why I chose not to include all date links in the tab order is
> that it would take approximately 30 keypresses to navigate passed the
> control if so, which could get annoying very quickly.
> Since the arrow keys can be used to quickly jump to a date, one at a time,
> or by column in 7 day increments, it's more efficient to jump to a date in
> this manner.
> Pressing tab is designed to close the control in the same fashion as an ARIA
> menu for convenience, focusing back on the triggering element.
>
> When you say 'non-selectable dates should be navigable to but not
> selectable', I asume you are refering to the blank cells at the
> beginning/end of the calendar month. These actually aren't links, but empty
> TD elements that have no link markup or label associations. Is there a
> benefit to providing keyboared focus to non-actionable elements such as
> these when they have no functionality?
>
> I don't understand what you mean by
> '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 NVDA in FF.'
> The keyboard functionality for the calendar widget is programmed in the JS
> file at
> http://whatsock.com/modules/aria_calendar_module/js/setup.js
> and is cross-browser compatible, so it will work regardless whether a screen
> reader is running, on IE, FF, Opera, Safari, and Chrome.
>
> The only limitation based on screen reader type and version is whether or
> not ARIA support is included within the AT/browser combination being used,
> and this is unfortunately impossible to predict using scripting alone.
>
> ----- Original Message -----
> From: "Sailesh Panchang" < <EMAIL REMOVED> >
> To: "WebAIM Discussion List" < <EMAIL REMOVED> >
> Sent: Monday, December 19, 2011 7:44 AM
> Subject: Re: [WebAIM] Regarding an ARIA calendar picker control that
> supports automatic accessibility for SR and keyboard users
>
>
>> Bryan,
>> 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
>> NVDA in FF.
>> Sailesh
>> 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
>>>