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

1、众所周知的与不为所知的

咱们平时涉及点击交互事件的时候，都是使用的a元素或者button元素，缘由是能够相应键盘focus效果以及回车触发点击事件，这是众所周知的。

可是，可能存在一些特殊状况，咱们须要使用默认没有键盘可访问性的元素，例如span元素，咱们能够经过必定的设置支持键盘的可访问性，这是不为所知的，也是本文的重点所在。

2、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状态时候回车可以触发绑定的点击事件。

3、一句话小结

所以，之后，当你想要使用span, div元素模拟按钮啊、选项卡按钮、下拉框控件等的时候，想要有良好的可访问性，就须要遵循上面的5步骤：绑定点击事件→tabindex="0"→role="button"（示意，完整role支持角色参见我以前用心整理的“WAI-ARIA无障碍网页应用属性彻底展现”一文）→附加的键盘事件→over~或return false~

行文仓促，若是错误，欢迎指正，欢迎交流。

参考文章：
Making elements keyboard focusable and clickable

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=3026