代码之家  ›  专栏  ›  技术社区  ›  user7705439

jquery UI日期选择器。ARIA集成

  •  0
  • user7705439  · 技术社区  · 7 年前

    我正在开发一个jquery UI日期选择器,我需要一个ARIA集成。 当您尝试用JAWS读取数据时,日期选择器不会大声读出数据,当我键入aria label=“日期”时,它会读出数据并正常工作。

    我的问题是,如何转换标准jquery UI日期选择器,使其显示aria label=“然后是日期”

    谢谢

    1 回复  |  直到 7 年前
        1
  •  0
  •   Twisty    7 年前

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

    $(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 added to ARIA label: Wednesday, February 28, 2018 生成的HTML如下所示:

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

    希望这有帮助。

    参考文献: