&nbs p;
一、众所周知的与不为所知的
我们平时涉及点击交互事件的时候，都是使用的 a 元素或者 button 元素，原因是可以相应键盘focus效果以及回车触发点击事件，这是众所周知的。
但是，可能存在一些特殊情况，我们需要使用默认没有键盘可访问性的元素，例如 span 元素，我们可以通过一定的设置支持键盘的可访问性，这是不为所知的，也是本文的重点所在。
二、span元素处理与测试
要让一个普通的 span 元素达到一个含 button 元素的键盘可访问性，我们需要如下处理：
首先，很显然的，绑定点击事件； 给元素设置 tabindex="0" 属性，使得元素在tab键锚点切换的时候，可以获得焦点； 使用 role 属性告诉辅助设备（如屏幕阅读器）这个元素所扮演的角色，属于WAI-ARIA. 例如点击的按钮，就是 role="button" ；会让这个元素可点击； 附加键盘事件，如 keydown , 然后当回车或空格键的时候，触发click事件； 如果你是使用的 a 元素伪造按钮，同时含有链接，比方说 "#" 或 "##" ，需禁用默认的点击行为，通过 event.preventDefault() 或 return false . 测试
您可以狠狠地点击这里：键盘聚焦性性与可点击性测试demo
demo页面有4个按钮，如下图：
相关HTML如下：
<span class="button">按钮1</span> <span class="button" tabindex="0" role="button">按钮2</span> <span class="button" tabindex="0" role="button" data-key="true">按钮3</span> <a href="javascript:" class="button">按钮4</a>
这四个按钮全部绑定了click事件，因此，点击任何按钮，都会有弹出，下面需要测试的就是能否通过键盘操作弹出提示。
测试结果：
首先，按钮1是最最普通的 span 元素，没有设置 tabindex="0" ，因此，其是无法响应tab下的焦点切换的。而按钮2-4都是可以的，例如下图按钮2获得焦点时候的状态，截自FireFox浏览器：但是，按钮2虽然可以响应focus状态，但是，在我们按下回车键的时候，其没有任何弹出，因此，我们可以得出结论， tabindex="0" 可以让元素获得焦点，但是回车等键盘操作不能触发其绑定的click事件。 按钮3的作用就是表明，要想触发click事件，我们需要附加额外的键盘事件，例如 keyup / keydown , 按钮3在回车的时候可以触发click事件，因为JS做了类似下面的处理：
if ($(this).attr("data-key")) { $(this).bind(" keydown ", function(e) { var code = e.which; // 13 = 回车, 32 = 空格 if (code === 13 || code === 32) { $(this).trigger("click"); } }); } 按钮4是正面例子，就是我们一般使用的 a 元素，只要 href 存在，无需其他的设置，就能够被键盘focus，在focus状态时候回车能够触发绑定的点击事件。 三、一句话小结
因此，以后，当你想要使用 span , div 元素模拟按钮啊、选项卡按钮、下拉框控件等的时候，想要有良好的可访问性，就需要遵循上面的5步骤：绑定点击事件→ tabindex="0" → role="button" （示意，完整 role 支持角色参见我之前用心整理的“WAI-ARIA无障碍网页应用属性完全展示”一文）→附加的键盘事件→over~或 return false ~
行文仓促，如果错误，欢迎指正，欢迎交流。
参考文章：
Making elements keyboard focusable and clickable
（本篇完）
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-span与a元素的键盘聚焦性以及键盘点击性研究 全部内容，希望文章能够帮你解决 html5教程-span与a元素的键盘聚焦性以及键盘点击性研究 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-span与a元素的键盘聚焦性以及键盘点击性研究的详细内容...