span与a元素的键盘聚焦性以及键盘点击性研究

1.众所周知和不为所知的
我们平时涉及到点击交互事件的时候, 都是使用a元素或者button元素(注意a元素要有href链接,然后无需其他设置就能够被键盘focus), 原因是可以相应键盘focus效果以及回车和空格触发点击事件.
但是有些特殊情况比如span元素, 我们可以通过一定的设置让其支持键盘的可访问性.
2.span元素的处理和测试
要让一个普通的span元素达到一个含button元素的键盘可访问性，我们需要如下处理：

• 首先绑定点击事件;
• 给元素设置tabindex="0"属性,使得元素在tab键锚点切换的时候可以获得焦点;
• 使用role属性告诉辅助设备这个元素所扮演的角色,属于wai-aria,比如点击按钮就是role="button", 这会让这个元素可点击;
• 附加键盘事件, 比如keydown,然后当移动或者空格键的时候触发click事件;

如果用a元素伪造按钮, 同时含有链接,可能需要禁止默认的点击行为

event.preventDefault();// 或者return false;

if ($(this).attr("data-key")) {    $(this).bind("keydown", function(e) {        var code = e.which;        // 13 = 回车, 32 = 空格        if (code === 13 || code === 32) {            $(this).trigger("click");        }        });}

3.总结
要想获得良好的可访问性,需要遵循上面5个步骤
绑定点击事件–>tabindex=”0”–>role=”button”–>附件键盘事件–>return false(over)