Question

我正在使用此日期选择器，其中图标触发器处于活动状态，可呈现图像。可以在此处找到示例http://jqueryui.com/datepicker/#icon-trigger

如果将光标放在INPUT并按下Tab键，它会跳过日历IMG并移动到下一个可用元素。

问题是IMG元素没有将tabindex设置为值＆gt; 0（根本没有属性）。我需要将其设置为0。

是否有人只能通过键盘使用标签来获取图像？

重要原因的背景：

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

我的应用程序在由辅助功能软件审核时失败了。

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

Answer 1

在查看datepicker文档并查看此处记录的错误之后： https://bugs.jqueryui.com/ticket/9625但是没有任何活动。所以，我找到了一个易于实现的解决方法。我只是使用以下jQuery添加tabindex：

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

＆＃34; ui-datepicker-trigger＆＃34; class似乎出现在每个图标触发器图像上，因此这会将tabIndex添加到所有实例。

接下来，由于onclick处理程序在你选择IMG并按Enter键时不起作用，我连接了一个datepicker（＆＃34; show＆＃34;）来调用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
    }
});

JQuery UI datepicker图标触发器IMG无法通过键盘访问

1 个答案: