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

Question

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

问题是：当你点击第一个元素时，第二个元素仍然被js认为是在display:none中，所以无法到达。知道我该怎么做吗？我认为它应该足够简单，但我尝试了几种可能性并没有成功。

这是我的 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 的文档：

// transition callback (scope set to element that was shown): 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 添加到滑块中的每个元素。

希望这对您有所帮助。

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

Setting focus on an element that is displayed after a delay

html

javascript

css

jquery

accessibility