Question

我正在尝试在我添加到我的网站的滑块上获得辅助功能效果。基本上我想要做的是，当您在第一张幻灯片上单击（按回车键）时，您将获得第二张幻灯片元素的焦点，以便您可以继续在页面中进行选项卡。我正在使用jquery和循环插件。

问题是：当你点击第一个元素时，第二个元素仍被认为是显示：没有js，因此它无法到达它。知道怎么做这个吗？我认为它应该很简单，但我尝试了几个可能性并没有成功。

这是我的jsfiddle：http://jsfiddle.net/toplefty/nk4bgsfx/ 我尝试了什么：

$('#s1').cycle({ 
    fx:     'slideY', 
    speed:  300, 
    next:   '#s1', 
    timeout: 0 
});


$('#Goto2').on('click', function() {
    $(this).parents('#s1').find('#Goto1').focus();
});

循环选项：http://jquery.malsup.com/cycle/options.html

Answer 1

after属性采用在转换发生后执行的函数。

来自after的文档：

//转换回调（范围设置为显示的元素）： function（currSlideElement，nextSlideElement，options，forwardFlag）

所以你可以在那里设置焦点。 http://jsfiddle.net/gy8p5ewv/1/

Answer 2

仅供参考...不要假设所有焦点更改都将通过键盘和鼠标事件发生，因为屏幕阅读器等辅助技术可以将焦点设置为任何可聚焦元素。因此，考虑通过以下方式增强@ LeeBailey的建议：

$('#s1').cycle({ 
    fx:     'slideY', 
    speed:  300, 
    next:   '#s1', 
    timeout: 0,
    after: function (curr, next) {
        $(next).attr('aria-selected','true');
        $(curr).attr('aria-selected','false');
    }
});

JSFiddle ：http://jsfiddle.net/gy8p5ewv/2/

请注意，默认情况下，我将aria-selected attribute添加到滑块中的每个元素。

希望这会有所帮助。

将焦点设置在延迟后显示的元素上

2 个答案: