Response title
This is preview!
datepicker accessibility - want to trigger event when using arrow keys to move through dates
in Using jQuery UI
•
8 years ago
Hi all - first post to the forums.
I've been tasked with finding the best option for an accessible datepicker. The key is to make a screen reader announce the new date as the user presses <ctrl> + arrow keys to move forward/backward through the dates in the datepicker. I'm testing with NVDA.
I've created a test page following the information in this article: http://www.deque.com/blog/accessible-jquery-ui-datepicker/. One of the benefits of the jQuery datepicker, as stated by the author, is that it never receives focus. Unfortunately, that trait also makes it tricky to detect when the user has used keys to move to a new date cell. The author didn't address this issue, so I'm trying to build my own code.
I'm stuck on two issues:
1. When NVDA isn't running, the code below works in modern
versions of FF, IE, and Chrome. It updates the text in
the live region with the value of the cell the user arrowed
into. As soon as I turn NVDA on while viewing in IE or Chrome,
the <ctrl> + arrow key combination just moves the cursor around
in the other elements of the DOM. It does nothing in the datepicker.
2. FF will announce the dates when NVDA is on. However, since the focus never leaves the text field while the datepicker is displayed, pressing <ctrl> + right or left arrow key causes the screen reader to say "blank" before it says the date, every time. Is there a way to stop this?
There are two text inputs on the page, each with its own
datepicker. Here's my JavaScript:
//add listener to
update a live region as arrow keys are pressed to
//move forward and
backward through dates in the datepicker
$(
'#startDate,#endDate' ).keyup( function (e) {
e = e || window.event; //for pre-IE9 browsers, where
the event isn't passed to the handler function
if
(e.keyCode == '37' || e.which ==
'37' || e.keyCode ==
'39' || e.which ==
'39' ) {
var
message = ' '
+ $(
'.ui-state-hover' ).html() + ' ' +
$(
'.ui-datepicker-month' ).html() + ' ' +
$(
'.ui-datepicker-year' ).html();
if
($(
this
).attr(
'id'
) ==
'startDate'
) {
$(
"#startDate"
).val(message);
}
else
{
$(
"#endDate"
).val(message);
}
}
});
1