摘要：鍵盤訪問的升級提供快捷方式不過，在訪問網(wǎng)格時，通過鍵盤進行兩個方向的移動會不會更好呢使用一點做漸進增強，我們做到了，可以使用鼠標或方向鍵訪問網(wǎng)格。在本例總共，查找表名字是。

厚著臉做推廣，個人網(wǎng)站 http://www.wemlion.com/。

本文轉載自：眾成翻譯
譯者：文藺
鏈接：http://www.zcfy.cc/article/1179
原文：https://www.christianheilmann.com/2016/08/15/better-keyboard-navigation-with-progressive-enhancement/

創(chuàng)建界面時很重要的一點是，要考慮到那些只依賴鍵盤來使用產品的用戶。這對可訪問性來說是基本要求，在多數(shù)情況下，通過鍵盤操作訪問也并非難事。這意味著首先，也是最重要的，是使用鍵盤可訪問元素進行交互。

如果希望用戶跳轉到其他地方，使用帶有有效的 href 屬性的錨點連接

如果希望用戶執(zhí)行你自己的代碼，并在當前文檔中停留，使用按鈕

通過流動 tabIndex 技術幾乎可以使所有內容都能通過鍵盤訪問，不過，既然已經(jīng)有 HTML 元素可以做同樣的事情，又何必再麻煩呢。

不過，使用恰當?shù)脑夭⒉荒敲春唵危挥脩翩I盤在元素集合中所處的位置，也要顯眼一些。給激活的元素加上輪廓（outline），瀏覽器解決了這個問題。這雖然超有用，但卻是一些人的眼中釘，他們希望由自己控制所有交互的視覺展現(xiàn)。在 CSS 中將 outline 屬性設置為 none，就能移除這個視覺輔助功能；不過這會帶來不小的可訪問性問題，除非你提供一個別的替代。

使用最顯眼的 HTML 元素；加上一些 CSS，確保除 hover 之外 focus 狀態(tài)同樣也被定義。這樣就可以使用戶在列表中的一個個項目間，輕松地通過 tab 來切換了。Shift + Tab 允許回退。可以看下 demo，HTML 挺簡單粗暴的。

  
1
  
2
  
3
  …
  
20
 

使用列表，為我們的元素賦予了層次結構，以及普通瀏覽器所沒有的可訪問性技術的導航方式。它還帶來很多 HTML 元素，我們可以自己添加樣式。通過一點樣式，我們可以將其轉換為網(wǎng)格，占用更少的垂直空間，容納更多內容。

ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}
button {
  border: none;
  display: block;
  background: goldenrod;
  color: white;
  width: 90%;
  height: 30px;  
  margin: 5%;
  transform: scale(0.8);
  transition: 300ms;
}
button:hover, button:focus {
  transform: scale(1);
  outline: none;
  background: powderblue;
  color: #333;
}

li {
  float: left;
}

/* 
  grid magic by @heydonworks 
  https://codepen.io/heydon/pen/bcdrl
*/

li {
  width: calc(100% / 4);
}
li:nth-child(4n+1):nth-last-child(1) {
  width: 100%;
}
li:nth-child(4n+1):nth-last-child(1) ~ li {
  width: 100%;
}
li:nth-child(4n+1):nth-last-child(2) {
  width: 50%;
}
li:nth-child(4n+1):nth-last-child(2) ~ li {
  width: 50%;
}
li:nth-child(4n+1):nth-last-child(3) {
  width: calc(100% / 4);
}
li:nth-child(4n+1):nth-last-child(3) ~ li {
  width: calc(100% / 4);
}

結果看起來非常棒，在查看列表的過程中，我們能清楚地看到自己所處的位置。

不過，在訪問網(wǎng)格時，通過鍵盤進行兩個方向的移動會不會更好呢？

使用一點 JavaScript 做漸進增強，我們做到了，可以使用鼠標或方向鍵訪問網(wǎng)格。

不過記著，這僅僅只是一個增強。假設 JavaScript 因為各種可能的原因執(zhí)行失敗，依然可以通過 tab 來訪問列表，我們失去的只是便利，但至少還有可用的界面。

我將這個打包成了一個小巧、無依賴的開源 JavaScript 項目 gridnav，可以在 GitHub 上獲取代碼。你要做的就是調用腳本，傳給它一個選擇器以獲取元素列表。

  
1
  
2
  …
  
25



 

通過列表元素的 data- 屬性，可以自己定義每行元素的數(shù)量以及鍵盤可訪問的元素。這些是可選的，但設置之后會讓代碼更快，出錯可能性更小。README 文件更詳細地解釋了如何使用。

開始考慮如何做的時候，像任何開發(fā)者一樣，抓到了最復雜的方式。我以為，需要對父節(jié)點、兄弟節(jié)點的大量定位比較，使用上 getBoundingClientRect，進行大量的 DOM 訪問。

之后我往回走了一步，意識到如何展示列表并不重要。最終不過是一個列表，我們要訪問它而已。甚至不需要訪問 DOM，因為我們所做的不過是從一堆按鈕或錨點連接中的一個切換到另一個。我們要做的就是：

找到當前所在元素（event.target）。

獲取按下的鍵。

根據(jù)鍵向前向后移動，或跳過一些元素到下一行。

就像這樣（點擊這里試試看）：

我們需要跳過的元素數(shù)量是由每行的元素數(shù)量決定的。向上等同于向前 n 個元素，向下相當于向后 n 個元素。

使用一些小技巧，完整代碼非常簡短：

(function(){
  var list = document.querySelector("ul");
  var items = list.querySelectorAll("button");
  var amount = Math.floor(
        list.offsetWidth / list.firstElementChild.offsetWidth
      );
  var codes = {
    38: -amount,
    40: amount,
    39: 1,
    37: -1
  };
  for (var i = 0; i < items.length; i++) {
    items[i].index = i;
  }
  function handlekeys(ev) {
    var keycode = ev.keyCode;
    if (codes[keycode]) {
      var t = ev.target;
      if (t.index !== undefined) {
        if (items[t.index + codes[keycode]]) {
          items[t.index + codes[keycode]].focus();
        }
      }
    }
  }
  list.addEventListener("keyup", handlekeys);
})();

這里發(fā)生了什么？

首先我們獲取到了列表元素，并緩存所有可通過鍵盤訪問的元素：

  var list = document.querySelector("ul");
  var items = list.querySelectorAll("button");

計算每次上下移動需要跳過的元素數(shù)量，將列表的寬度除以列表第一個子元素（本例中是 LI）的寬度即可：

  var amount = Math.floor(
        list.offsetWidth / list.firstElementChild.offsetWidth
      );

相較于 switch 語句或者大量的 if 判斷，我更樂意使用查找表。在本例總共，查找表名字是 codes。向上鍵值為 38，向下 40，向左 37，向右 39。假如我們拿到了 codes[37]，值為 -1，也就是我們要在列表中移動的數(shù)量：

  var codes = {
    38: -amount,
    40: amount,
    39: 1,
    37: -1
  };

可以使用 event.target 獲取按下鍵盤時列表中的選中元素，但我們不知道它在列表中的位置。為避免重復遍歷列表，一次性遍歷所有按鈕，將它們在列表中的索引存儲在按鈕自身的 index 屬性中。

  for (var i = 0; i < items.length; i++) {
    items[i].index = i;
  }

handlekeys() 完成剩余工作。讀取所按按鍵的鍵值，然后到 codes 中查找。所以，我們只針對方向鍵做出響應。接著獲取當前的元素，檢查其是否有 index 屬性。如果有，則檢查我們將要移到的位置是否有元素存在。如果元素存在，則獲得焦點。

  function handlekeys(ev) {
    var keycode = ev.keyCode;
    if (codes[keycode]) {
      var t = ev.target;
      if (t.index !== undefined) {
        if (items[t.index + codes[keycode]]) {
          items[t.index + codes[keycode]].focus();
        }
      }
    }
  }

給列表綁定一個 keyup 事件監(jiān)聽器，搞定 :)

  list.addEventListener("keyup", handlekeys);

如果你想看真實效果，這有一個講述各個細節(jié)的快速視頻教程。

視頻在最后的代碼部分有點 bug，因為我沒將 count 屬性和 undefined 對比，所以在第一個元素上，鍵盤功能沒法正常工作（0 是 falsy）。