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 11:36AM

>Regarding the focus issue in NVDA with IE and JAWS with FF, this problem
>doesn't actually have anything to do with the scripting within the calendar
>module, but rather is a result of NVDA's lack of full ARIA support in IE,
>and JAWS' lack of full ARIA support in FF. NVDA is geared to work more
>comprehensively with FF, and JAWS is geared to work more comprehensively
>with IE. This is a design choice of the screen reader developers, and can't
>be controled by any web UI developer.
Certainly and I fully understand that... that's why in my first
comment I said: admittedly there are UA/At limitations.
Sailesh




On 12/19/11, Bryan Garaventa < <EMAIL REMOVED> > wrote:
> I see what you mean about the unavailable dates, the addition of custom
> dates would have to be programmed separetly within the module on a
> case-by-case basis however, since everyone's implementation would differ.
> This could easily be done by any developer wishing to modify the script for
> their purposes.
>
> Regarding the focus issue in NVDA with IE and JAWS with FF, this problem
> doesn't actually have anything to do with the scripting within the calendar
> module, but rather is a result of NVDA's lack of full ARIA support in IE,
> and JAWS' lack of full ARIA support in FF. NVDA is geared to work more
> comprehensively with FF, and JAWS is geared to work more comprehensively
> with IE. This is a design choice of the screen reader developers, and can't
> be controled by any web UI developer.
>
>
> ----- Original Message -----
> From: "Sailesh Panchang" < <EMAIL REMOVED> >
> To: "WebAIM Discussion List" < <EMAIL REMOVED> >
> Sent: Monday, December 19, 2011 9:08 AM
> Subject: Re: [WebAIM] Regarding an ARIA calendar picker control that
> supports automatic accessibility for SR and keyboard users
>
>
>> 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
>>>>>