goodlayers wordpress选项卡式内容键盘焦点

时间:2017-04-27 13:05:37

标签: jquery wordpress keyboard focus accessibility

我正在开发一个网站并且确保屏幕阅读器能够尽可能地阅读它们我们遇到了一个标签内容元素的问题,因为它创建时不会获得键盘焦点用div。

http://dev-rivervalleypools.pantheonsite.io/pools/vogue-panache/

不幸的是我的javascript并不好,但我发现了这篇文章 - http://www.456bereastreet.com/archive/201302/making_elements_keyboard_focusable_and_clickable/

我试图修改下面的脚本来解决问题。我坚持设置点击功能,我不确定我是否在正确的轨道上。

 $('<span>', {
'class': 'button', // So you can style it
role: 'button', // Tell assistive technology it's a button
tabindex: '0', // Make it keyboard focusable
click: function() { // Make something happen when it is clicked
    alert('You clicked me!');
},
keydown: function(e) { // Trigger the click event from the keyboard
    var code = e.which;
    // 13 = Return, 32 = Space
    if ((code === 13) || (code === 32)) {
        $(this).click();
    }
},
html: 'Click me!'
}).appendTo($('#button-container'));

0 个答案:

没有答案