Datepicker and screen readers

[Rich Caloggero]

Testing this for a client...

Datepicker has the same problem as do the dialogs generated by jquery-ui:
1. the widgit adds content to the end of the dom
2. the new content is never focused automatically
3. no live regions are used to alert the user that new content has appeared

Unlike accordion or tabs, the events provided do not get control early
enough to make modifications to the dom that "stick". For instance, I want
to:
1. add role="alert" to .ui-datepicker-title (i.e. elements with class
ui-datepicker-title)
2. add tabindex="0" to .ui-datepicker-title (i.e. elements with class
ui-datepicker-title)
3. set focus to the associated datepicker's div with class
ui-datepicker-title

When I make these modifications from beforeShow's event callback, and then
look at the generated source in Firefox using the web developer toolbar, the
modifications I made did not show up.
Here's the code (I set this as part of the options object when datepicker is
initialized:
$("input").datepicker ({
beforeShow: function (input, inst) {
$(".ui-datepicker-title").attr ("tabindex", "0", "role", "alert");
setTimeout (function () {
alert ($("#ui-datepicker-div").html());
}, 1000);
}, // beforeShow
...
}); // datepicker

The other issue is that if focus is moved, the datepicker closes. This could
be confusing for screen reader users, and perhaps even prevent them from
making a choice. For instance, if focus is not shifted automatically to the
datepicker instance, then in an attempt to find the calendar and select a
date, the focus might get moved somewhere outside the datepick and it will
close, preventing the user from interacting with it to make a choice.

I'd suggest the following modifications:
1. close only on select or well-defined keyboard or mouse action (not
onblurr)
2. add an event which fires after all dom objects have been created and
before the datepicker opens

Comments please...
-- Rich

[Smilyan Pavlov]

Hi, I have the same problem. I found the following solution to edit the datepicker html before it's shown:

                // Create calendar

jQuery(el).datepicker({

beforeShow: function () {

makeAccessible();

}

});

function makeAccessible () {

clearTimeout(makeAccessible.timer);

if (jQuery('.ui-datepicker.ui-widget .ui-datepicker-calendar').is(':visible')) {

// Vars

var cal = jQuery('.ui-datepicker.ui-widget'),

cal_grid = cal.find('table'),

grid_thead = cal_grid.find('thead'),

grid_thead_tr = grid_thead.find('tr'),

grid_thead_th = grid_thead.find('th'),

grid_tbody = cal_grid.find('tbody'),

grid_tbody_tr = grid_tbody.find('tr'),

grid_tbody_td = grid_tbody.find('td')

// Calendar

cal.attr('role','region');

//aria-labelledby="ui-datepicker-1-title"

// Grid

cal_grid

.attr('role', 'grid')

.attr('aria-readonly', true)

.attr('tabindex', 0);

//aria-labelledby="ui-datepicker-1-month-lbl"

//aria-activedescendant="ui-datepicker-1-15"

// THead

grid_thead.attr('role', 'presentation');

grid_thead_tr.attr('role', 'row');

grid_thead_th.each(function () {

var span_title = jQuery(this).find('span').attr('title');

jQuery(this)

.attr('role', 'columnheader')

.attr('arial-label', span_title)

.attr('abbr', span_title);

});

// TBody

grid_tbody.attr('role', 'presentation');

grid_tbody_tr.each(function () {

jQuery(this).attr('role', 'row');

});

grid_tbody_td.each(function () {

var self = jQuery(this),

self_link = self.find('a');

self

.attr('role', 'gridcell')

.attr('aria-selected', false);

self_link.attr('tabindex', '-1');

});

}

else {

makeAccessible.timer = setTimeout(makeAccessible, 10);

}

}

What this does is it looks if the calendar's grid (the table) is visible, and if not it waits 10 miliseconds and tries again, once it sees that the grid is there, it adds all the javascript in makeAccessible(); function.

The attributes i apply still don't make this datepicker accessible, since as you said it's at the bottom of the dom and other problems. However, it will give you a good start. I might post my solution if completed.

[Deafninja]

Why don't you just add a <hx> header element with the date picker calendar div then set focus on there? If a new header element is added to the DOM the screen reader lets the user know etc. 

Screen readers can already read the table data so I'm just confused as to why you are adding all of that unnecessary code. 

Just my opinion and curious about why this route. 

Michael

Sent from my iPhone

--
You received this message because you are subscribed to the Google Groups "jQuery Accessibility" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jquery-a11y...@googlegroups.com.
To post to this group, send email to jquer...@googlegroups.com.
Visit this group at http://groups.google.com/group/jquery-a11y?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.