Datepicker and screen readers

Skip to first unread message

Rich Caloggero

Oct 13, 2010, 2:20:43 PM10/13/10
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
1. add role="alert" to .ui-datepicker-title (i.e. elements with class
2. add tabindex="0" to .ui-datepicker-title (i.e. elements with class
3. set focus to the associated datepicker's div with class

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
$("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
2. add an event which fires after all dom objects have been created and
before the datepicker opens

Comments please...
-- Rich

Smilyan Pavlov

May 15, 2013, 5:24:03 AM5/15/13
Hi, I have the same problem. I found the following solution to edit the datepicker html before it's shown:

                // Create calendar
beforeShow: function () {
function makeAccessible () {
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
// Grid
.attr('role', 'grid')
.attr('aria-readonly', true)
.attr('tabindex', 0);
// 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');
.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');
.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.


May 15, 2013, 9:20:03 AM5/15/13
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. 


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
To post to this group, send email to
Visit this group at
For more options, visit
Reply all
Reply to author
0 new messages