如何添加JAWS兼容的HTML表單標籤到jQuery UI中的月和日下拉菜單1.10.4 datepicker

我們使用帶有月份和年份下拉菜單的jQuery 1.10.4 datepicker。不幸的是，這些下拉菜單沒有附加HTML標籤，這是我們需要屏幕閱讀器的要求。我們一直在試圖找到一種解決方法，而不是涉及直接編輯jQuery代碼（這將需要大約2分鐘），以便我們在下次升級我們的jQuery版本時不會忘記它。缺乏標籤是無障礙（a11y）問題，這對我們的網站是必不可少的。如何添加JAWS兼容的HTML表單標籤到jQuery UI中的月和日下拉菜單1.10.4 datepicker

HTML字段看起來是這樣的：

<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">

的日期選擇器的設置是這樣的：

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

我能看到的標籤，現在，他們是醜陋的，但我我並不十分關心，因爲我是關於JAWS認識他們的。它讀取他們，當我第一次打開日期選擇器，但隨後打開時，它只讀取dateOfBirth字段的標籤，而不是下拉菜單。另外，我可以看到我在開發人員工具中添加的標籤，JAWS只是沒有閱讀它們。

如果您不熟悉JAWS，它可能會幫助我瞭解如何將事件附加到datepicker，然後在呈現之前將其激活。我想知道是否有人熟悉jQuery UI會知道。我更像是後端開發人員，而jQuery內部對我來說並不熟悉。

來源

2016-04-21 k-den

什麼不使用ComboBox代替。 –

jQuery需要event delegation爲JAWS附加元素以持久地識別它們。這樣，如果您稍後添加更多內容或將其拿走，則無關緊要，每次都要重新審視。

來源

2016-04-23 08:15:04 stringy

是不是我在$（「身體」）.on（「focusin點擊更改」，「＃ui-datepicker-div選擇」，setupCalendarMonthYearLabels）;線？＃ui-datepicker-div是身體的小孩。 –

是的，我的歉意。出於某種原因，我認爲我看到了點擊而不是打開。 – stringy

如何添加JAWS兼容的HTML表單標籤到jQuery UI中的月和日下拉菜單1.10.4 datepicker

回答

相關問題