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);
}
}
});