我正在开发Web辅助功能。我们的客户使用Web辅助功能专家测试该站点,并向我们提供该站点需要修复或修改的手册。
在日期选择器上,专家评论如下
使用ARIA角色和属性来定义日期选择器。 参见附录A,"可访问日期选择器要求"有关详细信息。
注意:如果禁用月份或日期,则用户aria-disabled =" true"在活动元素上指示禁用状态。
以下是代码示例
minDate
我的小提琴:the rule
我正在使用jQuery Date Picker。键盘用户无法在minDate
之前移动光标。例如,如果aria-disabled = 'true'
设置为今天,键盘用户无法在今天之前选择或移动光标。现在是否有必要使用minDate
标记前一天(已禁用)?
我的理解是,如果用户不允许在aria-disabled
之前移动,则使用{{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。