0

We are using the jQuery 1.10.4 datepicker with a month and year dropdowns. Unfortunately, these dropdowns do not have HTML labels attached, which we need for screenreader requirements. We have been trying to find a workaround that does not involve editing the jQuery code directly (which would take about 2 minutes) so that we don't forget about it next time we upgrade our jQuery version. The lack of labels is an accessibility (a11y) issue, which is essential to our site.

The HTML field looks like this:

<label for="dateOfBirth">Birth Date (mm/dd/yyyy) </label> 
<input type="text" id="dateOfBirth" name="dateOfBirth" value="" class="datePick form-control form-text required hasDatepicker">

The setup for the datepicker looks like this:

function setupCalendarMonthYearLabels() {
    if ($("select.ui-datepicker-month").attr('id') !=  'ui-datepicker-month-select') {
        $("select.ui-datepicker-month").attr('id', 'ui-datepicker-month-select');
    }
    if ($("select.ui-datepicker-month").attr('id') !=  'ui-datepicker-month-select') {
        $("select.ui-datepicker-month").attr('id', 'ui-datepicker-month-select');
    }
    if ($("#ui-datepicker-month-select-label").length==0) {
        $("<label for='ui-datepicker-month-select' id='ui-datepicker-month-select-label'>Select month</label>").insertBefore("select.ui-datepicker-month");
    }
    if ($("#ui-datepicker-year-select-label").length==0) {
        $("<label for='ui-datepicker-year-select' id='ui-datepicker-year-select-label'>Select year</label>").insertBefore("select.ui-datepicker-year"); 
    }
}

$(function() {
    $( ".datePick" ).datepicker({changeMonth: true, changeYear: true,yearRange : '-80:+10'});
    $( ".datePick" ).focus(setupCalendarMonthYearLabels);
    $( ".datePick" ).click(setupCalendarMonthYearLabels);
    $( "body" ).on("focusin click change", "#ui-datepicker-div select", setupCalendarMonthYearLabels);
});

I can see the labels right now, and they are ugly, but I'm not so much concerned about that as I am about JAWS recognizing them. It reads them the when I first open the datepicker, but then on subsequent opens, it only reads the label for the dateOfBirth field, not for the dropdowns. Additionally, I can see the labels I added in the developer tools, JAWS just isn't reading them.

If you are unfamiliar with JAWS, it might help me to know how to attach an event to datepicker that gets fired right before it gets rendered. I am wondering if someone familiar with the jQuery UI would know. I am more of a back-end developer and jQuery internals are unfamiliar to me.

1
  • What not using ComboBox instead. Apr 21, 2016 at 19:54

1 Answer 1

0

jQuery needs event delegation to attach elements for JAWS to persistently recognise them. That way it doesn't matter if you add more stuff later on or take it away, it knows to take a fresh look each time.

2
  • Isn't that what I'm doing in the $( "body" ).on("focusin click change", "#ui-datepicker-div select", setupCalendarMonthYearLabels); line? #ui-datepicker-div is a child of body.
    – k-den
    Apr 24, 2016 at 18:03
  • Yes, my apologies. For some reason I thought I saw click instead of on.
    – stringy
    Apr 30, 2016 at 4:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.