为屏幕阅读器的日期选择器上的单元格添加 aria-label 属性

Question

我有以下日期选择器。问题是，当运行屏幕阅读器（NVDA）时，当使用 keyboard 将日期选择器网格上的选择移动到不同的单元格时，屏幕阅读器只会显示“空白”。 （但是，如果我将鼠标悬停在单元格上，它会读取当天的数字。）

$(document).ready(function () {
    $('#ui-datepicker-div').addClass("month-calendar-widget");
    $(".month-calendar input").datepicker({
        showOtherMonths: true,
        minDate: 0,
        beforeShow: function () {
          $('#ui-datepicker-div').addClass("month-calendar-widget");
        }
    }).datepicker("setDate", convertDateToUTC(new Date()));
});

我希望通过使用

aria-label

将

beforeShowDay

属性添加到网格的每个单元格来解决此问题，如下所示：

  beforeShowDay: function(date) {
    var dateString = $.datepicker.formatDate('MM d, yy', date);
    return [true, '', dateString + "" + 'aria-label="' + dateString + '" role="gridcell" aria-selected="false"'];
  }

但是，这会导致以下错误的 html：

<td class=" " data-event="click" data-handler="selectDay" data-month="1" data-year="2024" title="February 16, 2024aria-label=&quot;February 16, 2024&quot; role=&quot;gridcell&quot; aria-selected=&quot;false&quot;">
    <a class="ui-state-default" href="#">16</a>
</td>

我错过了什么？

Answer 1

由于 beforeShowDay 支持创建

title

属性的值，您可以使用不同的策略来填充

aria-label

属性。

您可以依靠选项

onSelect

而不是顾名思义，在选择新日期时处理事件：

https://api.jqueryui.com/datepicker/#option-onSelect

选择 类型：函数（字符串日期文本，对象实例）

选择日期选择器时调用。该函数接收 所选日期作为文本，日期选择器实例作为参数。这 指关联的输入字段。

$(document).ready(function () {
    $(".month-calendar input").datepicker({
        showOtherMonths: true,
        minDate: 0,
        onSelect: function(dateText, inst) {
          const value =  "Selected date: " + dateText;
          $(this).attr("aria-label", value);
          console.log(
            `aria-label attribute was set for the input element as "${value}"`
          );
        }
    }).datepicker("setDate", new Date());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="month-calendar">
  <input type="text" id="datepicker">
</div>