鍵盤存取基礎知識

Rob Dodson

許多不同使用者都會使用鍵盤瀏覽應用程式，包括暫時和永久動作障礙的使用者，以及使用鍵盤快速鍵提高效率和生產力的使用者。為應用程式制定完善的鍵盤導覽策略，可為所有使用者提供更優質的體驗。

焦點和分頁順序

在特定時刻，「焦點」是指應用程式中目前正從鍵盤接收輸入內容的元素，例如欄位、核取方塊、按鈕或連結。除了鍵盤事件，焦點元素也會取得從剪貼簿貼上的內容。

如要在頁面上移動焦點，請使用 TAB「向前」瀏覽，並使用 SHIFT + TAB「向後」瀏覽。系統通常會以焦點環標示焦點元素，而不同瀏覽器的焦點環樣式也不盡相同。焦點在互動式元素中向前和向後移動的順序，稱為「Tab 鍵順序」。

文字欄位、按鈕和選取清單等互動式 HTML 元素是隱含可聚焦元素：系統會根據這些元素在 DOM 中的位置，自動將其插入 Tab 鍵順序。這些互動式元素也內建鍵盤事件處理功能。段落和 div 等元素不會隱含可聚焦，因為使用者通常不需要與這些元素互動。

實作邏輯分頁順序是為使用者提供流暢鍵盤導覽體驗的重要環節。評估及調整分頁順序時，請記住以下兩個主要概念：

如要檢查應用程式的索引標籤順序是否合理，請嘗試在頁面中按 Tab 鍵。一般來說，焦點應按照閱讀順序，從網頁左側移至右側，再從頂端移至底部。

如果焦點順序有誤，請重新排列 DOM 中的元素，讓 Tab 鍵順序更自然。如要變更網站上的視覺排列方式，請將元素移至 DOM 中較早的位置，而不是使用 CSS 調整樣式，讓元素顯示在較早的位置。

例如：

錯誤做法

<button style="float: right">Kiwi</button>
<button>Peach</button>
<button>Coconut</button>

奇異果按鈕是浮動的，因此會建立不合邏輯的焦點順序。

正確做法

<button>Peach</button>
<button>Coconut</button>
<button>Kiwi</button>

按照您希望的索引標籤順序排列 HTML。

使用 CSS 變更元素的可視位置時，請務必小心，以免建立不合邏輯的 Tab 鍵順序。為修正不合邏輯的分頁順序，我們將浮動的「Kiwi」按鈕移至 Coconut 之後，並移除了內嵌樣式。

有時 DOM 中需要有螢幕外互動元素，但這些元素不應出現在索引標籤順序中。舉例來說，如果您有回應式導覽，會在點選按鈕時於側欄開啟，使用者就不應在導覽關閉時，將焦點放在導覽上。

如要防止特定互動式元素接收焦點，請為該元素提供下列任一 CSS 屬性：

如要將元素加回索引標籤順序 (例如導覽開啟時)，請分別將這些 CSS 屬性替換為：

如果使用者幾乎完全透過鍵盤或其他輸入裝置操作電腦，邏輯分頁順序對於確保應用程式可存取及可用性至關重要。建議您養成好習慣，每次發布前都先試著在應用程式中按 Tab 鍵，檢查索引標籤順序。