JQuery UI datepicker 图标触发器 IMG 不能从键盘访问答案

【问题标题】：JQuery UI datepicker icon trigger IMG is not Accessible from keyboardJQuery UI datepicker 图标触发器 IMG 不能从键盘访问
【发布时间】：2018-02-10 05:06:12
【问题描述】：

我正在使用此日期选择器，并激活图标触发器来呈现图像。示例可以在这里找到http://jqueryui.com/datepicker/#icon-trigger

如果您将光标放在 INPUT 并点击选项卡，它会跳过日历 IMG 并移动到下一个可用元素。

问题在于 IMG 元素没有将 tabindex 设置为 > 0 的值（根本没有属性）。我需要将其设置为 0。

有没有人通过只用键盘敲击来访问图像？

为什么这很重要的背景：

从辅助功能的角度来看**这很糟糕，因为如果您只能使用键盘（而不是鼠标），由于残疾或您更喜欢键盘输入，您将无法访问日历。

我的应用程序在被辅助功能软件审核时在这一点上失败了。

**图标触发器：由于触发元素由 IMG 标签组成，因此它不能通过键盘访问，也不包括文本等价物和相关的 ARIA 角色，以便屏幕阅读器用户传达这是一个活动元素。参考。 https://www.levelaccess.com/jquery-ui-accessibility-analysis/

【问题讨论】：

标签： jquery jquery-ui datepicker accessibility

【解决方案1】：

查看日期选择器文档并看到此处记录了错误后： https://bugs.jqueryui.com/ticket/9625 但没有任何活动。所以，我找到了一个应该很容易实现的解决方法。我将使用以下 jQuery 添加 tabindex：

$(".ui-datepicker-trigger").attr("tabIndex", "0");

“ui-datepicker-trigger”类似乎出现在每个图标触发图像上，因此这会将 tabIndex 添加到所有实例。

接下来，由于当您切换到 IMG 并按 Enter 键时 onclick 处理程序不起作用，我连接了一个 datepicker("show") 以在 onkeypress 上调用 show：

$(".ui-datepicker-trigger").attr("onkeypress", $(this).prev().datepicker('show');');

prev() 在这里起作用，因为 img 在运行时会立即附加在调用 datepicker 的 INPUT 之后。

完整代码：

$(document).ready(function () {
    var img = $(".ui-datepicker-trigger"); 
    if (img.length !== 0) {
        img.attr("tabIndex", "0"); // set tabIndex=0 so that you can tab to the image using keyboard only
        var js = "$(this).prev().datepicker('show');";
        img.attr("onkeypress", js); // invoke the datepicker show method onkeypress
    }
});

【讨论】：