WebAIM - Web Accessibility In Mind

E-mail List Archives

ARIA calendar module updated to support disabled dates and editable comments with 800 char max

for

From: Bryan Garaventa
Date: Dec 22, 2011 11:42PM

Understood; thank you again for your feedback, I really do appreciate it. :)

I've updated the calendar module so that disabled dates are now
automatically supported. When a date is disabled, focus is still set to the
date so that the status is conveyed and the continuity of navigation isn't
broken. Disabled dates can be added programmatically using a day range array
within a given month. Since this is added separately after the calendar is
initialized, any number of individualized calendars can be configured on the
same page without conflict.

Additionally, comments can now be added to any date range, specifically
based on a given year or globally for the same date every year. These too
are programmatically configured for singular dates or globally for all years
on the given date. When a date has a comment, setting focus to the given
date will display a scrollable popup window above the calendar that displays
the comment text. Additionally for screen readers that support ARIA, the
comment text is announced automatically when the date receives focus.
Comments up to 800 characters in length are supported.

Currently these functionality examples are commented out within the source
code, but they can be enabled for testing by removing the double slashes at
the end of the file 'jssetup.js' in the source code download at
http://whatsock.com/modules/aria_calendar_module.zip
which will add comments to and/or disable December 24 and 25. When a date is
disabled, clicking or pressing Enter on that date will do nothing.

This is the syntax for initializing a calendar control:
setCalendar( ID , TriggeringElement , TargetEditField , EnableComments )

When true is passed as the parameter 'EnableComments', users can edit
comments directly by pressing Spacebar on the date that has focus, or by
activating the Edit button.
Type the comment, then press Enter or activate the Save button to save the
comment.
If comments are configured programmatically, they will appear within the
calendar regardless whether EnableComments is set to true or false. The
EnableComments parameter simply controls whether comments can be directly
edited.

Dynamic localization is also supported, so you can change the verbiage for
any of the textual values such as the tooltips and month/weekday names on
the fly to any language by modifying the calendar object properties. This is
done using the ID passed in the first parameter.
E.G. (where 'AdvancedCalendar' is passed as the ID)
$A.reg.AdvancedCalendar.tooltipTxt = 'Press Escape to cancel';
$A.reg.AdvancedCalendar.disabledTxt = 'Disabled';
$A.reg.AdvancedCalendar.commentedTxt = 'Has Comment';
// Or modify the month name for January like so
$A.reg.AdvancedCalendar.range[0].name = 'Gnarly';
// Or change the short and long weekday names for Sunday like so
var sunday = $A.reg.AdvancedCalendar.range.wDays[0];
sunday.short = 'R';
sunday.long = 'Ralph';
// The change will take effect when the calendar is next opened

The demo is strictly client side, so edited comments are not saved. However
it would be simple to do so using the 'runAfterClose' method to do so within
the file 'jssetup.js' by adding an AJAX request combined with user
authentication to create a personalized calendar. This could be done by
serializing each month in the dc.range object and send it to be stored as a
JSON string, which could then be retrieved in the same manner by reverting
the JSON into month objects to repopulate dc.range after the page loads. A
db query could do the same, it doesn't matter which.

All of the styling, coloration, sizing, and so on is contained in the CSS
file, so the look and feel can easily be changed. The only exception is
zIndex within the JS file, which is set to 1 by default. This can be changed
to any positive value however.
The size of the calendar module JS file is 17kb; unminified.

As you pointed out, there are some screen reader limitations, so this
functionality works best using JAWS12-13 in IE and FF, and using NVDA with
FF. Currently NVDA doesn't support ARIA well enough in IE to function
properly. As screen reader development improves cross-browser ARIA support
in the future though, the implementation will work better in time without
requiring any changes in the calendar code structure.

It took me a while to get the ARIA feedback right, since there are important
behavioral differences even using screen readers that support ARIA. For
example, role=dialog has to be set on the table tag itself; otherwise, if
set on the container element, the word 'table' will be announced by JAWS in
front of the label for every date link, which is annoying. Also, this
appears to disrupt JAWS' ability to track keyboard focus, announcing 'blank'
when attempting to arrow between dates. At any rate, it should be good to go
now.

If I've overlooked anything, please let me know.

The demo is at
http://whatsock.com/modules/aria_calendar_module/demo.htm

Thanks again,
Bryan

----- Original Message -----
From: "Sailesh Panchang" < <EMAIL REMOVED> >
To: "WebAIM Discussion List" < <EMAIL REMOVED> >
Sent: Monday, December 19, 2011 10:37 AM
Subject: Re: [WebAIM] Regarding an ARIA calendar picker control that
supports automatic accessibility for SR and keyboard users


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