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