辅助功能：当用户无法在日期选择器中 select 禁用日期时，是否需要使用 ARIA-DISABLED='TRUE' 标记禁用 date/month

Question

我正在研究 Web 可访问性。我们的客户与网络可访问性专家一起测试该网站，并向我们提供该网站需要修复或修改的手册。

在Date Picker上，专家点评如下

Use ARIA roles and properties to define the date picker. See Appendix A, "Accessible date picker requirements" for detailed information.

NOTE: If a month or date is disabled, user aria-disabled="true" on the active element to indicate the disabled state.

这是代码示例

<lable>
   Date:
  <input id="dp" type="text" />
</lable>

/** JS CODE **/
$(function() {

  $('#dp, #dp1').datepicker({
    defaultDate: new Date(),
    minDate: new Date()
  });

});

我的fiddle：https://jsfiddle.net/q68jyebL/17/

我正在使用 jQuery 日期选择器。键盘用户不能将光标移动到 minDate 之前。例如，如果 minDate 设置为今天键盘用户不能 select 或在今天之前移动光标。现在是否有必要用 aria-disabled = 'true' 标记前一天（已禁用）？

我的理解是，如果不允许用户在 minDate 之前移动，那么用 aria-disabled 标记禁用日期是没有意义的。

感谢任何类型的建议 :)。

Answer 1

简短的回答是 'yes'。 unselectable 日期必须有 aria-disabled='true'。

虽然您说的 unselectable 日期无法使用键盘聚焦是正确的，但屏幕 reader 用户可以使用屏幕导航到这些日期reader 快捷键。由于月份是 <table>，屏幕 reader 用户可以使用 ctrl+alt+箭头键在 table 周围导航，就好像它是一个跨页 sheet。使用屏幕reader快捷键时视觉焦点没有移动，但屏幕reader会读取table单元格中的数据。看起来 jquery 正在使用样式 sheet (class='ui-datepicker-unselectable ui-state-disabled') 在视觉上使 unselectable 日期看起来与常规日期不同，但屏幕 readers 不'知道样式 sheets 的意图。您需要通过 aria-disabled='true'.

告诉屏幕 reader 该单元格已禁用

这是禁用日期生成的 html 的样子：

<td class="ui-datepicker-unselectable ui-state-disabled" aria-disabled="true">
  <span class="ui-state-default">4</span>
</td>

我不知道你对生成的 jquery 日期选择器有多少控制权，是否可以将 aria-diabled='true' 注入其中。如果您确实有一些控制权，那么您也应该进行另一项更改。 table headers 只有 'su'、'mo'、tu' 等代表星期几。屏幕 reader 将按原样阅读该文本。你应该有屏幕 reader 友好文本，例如 'sunday'、'monday'、星期二'等。那里是一个 title 属性在每个 table header 但标题不会被读取。每个 table header 单元格应该有两段文本。一个在屏幕上隐藏的可见标签 readers ('su', 'mo', 'tu') 和一个在屏幕上可见的隐藏标签 readers ( 'sunday'、'monday'、'tuesday'）。

jquery 生成的当前 html 如下所示：

<th>
  <span title="Monday">Mo</span>
</th>

你想要的是：

<th>
  <span aria-hidden='true'>Mo</span>
  <span class='visually-hidden'>Monday</span>
</th>

visually-hidden class 应该在报告的附录 A 中定义，靠近附录的开头（如果我正确识别报告的样式）。对于那些阅读此答案但没有报告的人，您可以查看 WebAIM's guidance on hiding content and the not-yet-approved W3C article 隐藏内容。

辅助功能：当用户无法在日期选择器中 select 禁用日期时，是否需要使用 ARIA-DISABLED='TRUE' 标记禁用 date/month

Accessibility: Is it necessary to mark disabled date/month with ARIA-DISABLED='TRUE' when user can't select disabled date in Date Picker

accessibility

jquery-ui

datetimepicker