辅助功能:是否有必要使用ARIA-DISABLED =' TRUE'来标记禁用的日期/月份。当用户无法在日期选择器中选择禁用日期时

时间:2018-03-29 18:44:24

标签: jquery-ui accessibility datetimepicker

我正在开发Web辅助功能。我们的客户使用Web辅助功能专家测试该站点,并向我们提供该站点需要修复或修改的手册。

在日期选择器上,专家评论如下

  

使用ARIA角色和属性来定义日期选择器。   参见附录A,"可访问日期选择器要求"有关详细信息。

     

注意:如果禁用月份或日期,则用户aria-disabled =" true"在活动元素上指示禁用状态。

以下是代码示例

minDate

我的小提琴:the rule

我正在使用jQuery Date Picker。键盘用户无法在minDate之前移动光标。例如,如果aria-disabled = 'true'设置为今天,键盘用户无法在今天之前选择或移动光标。现在是否有必要使用minDate标记前一天(已禁用)?

我的理解是,如果用户不允许在aria-disabled之前移动,则使用{{1}}标记禁用日期是没有意义的。

任何建议都赞赏:)。

1 个答案:

答案 0 :(得分:1)

简短的回答是“是”'。不可选择的日期必须为aria-disabled='true'

如果您确定使用键盘无法关注无法选择的日期,则屏幕阅读器用户可以使用屏幕阅读器快捷键导航到这些日期。由于月份为<table>,因此屏幕阅读器用户可以使用ctrl + alt + arrowkey在表格中导航,就好像它是电子表格一样。使用屏幕阅读器快捷键时,视觉焦点不会移动,但屏幕阅读器将读取表格单元格中的数据。看起来jquery使用样式表(class='ui-datepicker-unselectable ui-state-disabled')来直观地使不可选择的日期看起来与常规日期不同,但是屏幕阅读器并不知道样式表的意图。您需要通过aria-disabled='true'告诉屏幕阅读器该单元格已被禁用。

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

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

我不知道您对生成的jquery日期选择器有多少控制权以及是否可以将aria-diabled='true'注入其中。如果你确实有一些控制权,那么你应该做出另一个改变。表格标题只包含一周中的日期和时间,以及其他日期。屏幕阅读器只是按原样读取该文本。您应该有屏幕阅读器友好的文字,例如星期日&#39;星期一&#39;星期二&#39;等等。 title属性在每个表标题上,但标题不会被读取。每个表头单元格应该有两段文本。屏幕阅读器隐藏的可见标签(&#39; su&#39;,&#39; mo&#39; tu&#39;)和屏幕阅读器可用的视觉隐藏标签(& #39;星期日&#39;,&#39;星期一&#39;星期二&#39;)。

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类应该在附录的开头附近的报告附录A中定义(如果我正确识别报告的样式)。对于那些阅读没有报告的答案的人,您可以看到隐藏内容的WebAIM's guidance和隐藏内容的not-yet-approved W3C article