jquery UI 日期选择器。 ARIA 集成

Question

我正在开发一个 jquery UI Datepicker，我需要一个 ARIA 集成。 当您尝试使用 JAWS 读取日期选择器时，它不会大声读出，当我输入 aria-label="THE DATE" 时，它会读出日期并且可以正常工作。

我的问题，我如何转换标准的 jquery UI DatePicker 以便它会说 aria-label="然后是日期"

谢谢！！

Answer 1

使用一个基本示例，您可以尝试以下操作：

$(function() {
  $("#datepicker").datepicker({
    onSelect: function(dateText, dateObject) {
      var myDT = $.datepicker.parseDate($(this).datepicker("option", "dateFormat"), dateText);
      var ariaDate = $.datepicker.formatDate("DD, MM d, yy", myDT);
      console.log("Date added to ARIA label: " + ariaDate);
      $(this).attr("aria-label", ariaDate);
    }
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Date: <input type="text" id="datepicker" aria-label="No date selected"></p>

假设您希望 aria-label 采用更人性化的格式，我将字符串从选择转换回 Date 对象。然后我可以将其格式化回字符串。有点来回折腾，但读者就可以理解了。

来自控制台的示例：Date added to ARIA label: Wednesday, February 28, 2018 生成的 HTML 如下所示：

<input id="datepicker" aria-label="Wednesday, February 28, 2018" class="hasDatepicker" type="text">

希望对您有所帮助。

参考资料：

• http://api.jqueryui.com/datepicker/