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