鍵盤焦點

許多人會使用鍵盤或其他類似鍵盤的功能 (例如切換裝置)，做為主要的瀏覽方式。如果使用者的體能受限 (例如扭傷手腕或車用隧道等精細動作障礙)，以及部分身心障礙者，可能會因為個人偏好、效率或硬體損壞等因素，選擇使用鍵盤瀏覽網頁。

低視能或失明的使用者可以使用鍵盤搭配放大功能或螢幕閱讀器軟體進行瀏覽。但是，他們可能會使用不同的鍵盤快速鍵指令瀏覽畫面，而非當視障使用者。

你必須為上述所有身心障礙者提供鍵盤支援，才能順利使用。鍵盤無障礙功能大部分以焦點為中心。焦點是指螢幕上目前接收到鍵盤輸入的元素。

在本單元中，我們會專注於鍵盤和可聚焦元素的 HTML 結構和 CSS 樣式。JavaScript 模組提供更多互動式元素的焦點管理和按鍵動作相關資訊。

焦點順序

鍵盤使用者可以導覽的元素稱為可聚焦元素。焦點順序也稱為分頁或導覽順序，是元素接收焦點的順序。預設的焦點順序必須是符合邏輯、符合直覺，且與頁面的視覺順序相符。

以大部分語言來說，焦點順序會從頁面頂端到底部，從左到右移動。不過，有些語言是由右至左書寫，因此網頁的主要語言不一定適用於不同的焦點順序。

根據預設，聚焦順序包含自然可聚焦的 HTML 元素，例如連結、核取方塊和文字輸入。可聚焦的 HTML 元素包括內建分頁順序支援和基本的鍵盤事件處理功能。

您可以更新焦點順序，納入一般不接收焦點的元素，例如非互動式 HTML 元素、自訂元件，或是使用 ARIA 覆寫自然焦點語意的元素。

分頁索引

聚焦順序從具有正 tabindex 屬性的元素 (如有) 開始，並從最小的正數移至最大 (例如 1、2、3)。接著，系統會根據元素在 DOM 中的順序，繼續執行 Tab 索引為 0 的元素。所有含有負定位點索引的元素都會從自然聚焦順序中移除。

當 tabindex 為 0 (tabindex="0") 套用至通常無法聚焦的元素時，系統會根據這些元素在 DOM 中的顯示方式，將這些元素加入網頁的自然焦點順序。但是，與可聚焦的 HTML 元素不同，您必須提供額外的鍵盤支援，才能讓這些元素完整存取。

同樣地，如果您有一般可聚焦但處於停用狀態的元素 (例如在輸入欄位填入前處於離線狀態的按鈕)，請為此元素新增負數分頁索引 (tabindex="-1")。為輔助技術和鍵盤新增排除分頁索引信號，該按鈕應從自然聚焦順序中移除。別擔心，您可以視需要使用 JavaScript，將焦點重新加回元素。

在這個範例中，tabindex 屬性已新增至不會自然接收焦點的元素。我們使用 tabindex 操控元素的順序，說明元素可聚焦在焦點順序的能力。這個範例說明瞭應該避免的行為！

略過連結

目前大多數網站的網頁主標頭中會有一長串選單連結，且各網頁有一致。這對於一般導覽非常有用，但僅用鍵盤的使用者可能會難以找到網站的主要內容，而無需多次分頁。

如要跳轉到多餘或不常用的連結群組，其中一種方式就是新增「略過連結」。略過連結是錨點連結，此連結會使用該區段的 ID，跳到同一個頁面的其他部分，而非將使用者帶往網站上的其他頁面或外部資源。系統通常會將略過連結新增為使用者到達網站時會遇到的第一個可聚焦元素。視設計對何種設計而定，略過連結可能會在使用者停留分頁前顯示或視覺隱藏。

當使用者按下 Tab 鍵，且已啟用的跳過連結時，系統就會將鍵盤焦點傳送至略過連結。使用者可以點選略過連結，跳到標題部分和主要導覽項目。如果使用者選擇不點選略過連結並繼續按 Tab 鍵繼續前往 DOM，系統會將他們導向下一個可聚焦元素。

如同所有連結，略過連結一定要包含連結用途的背景資訊。加入「跳至主要內容」一詞，讓使用者知道連結前往的位置。為連結提供其他背景資訊時 (例如 aria-labelledby、aria-label) 或加到 <a> 元素的文字內容時，有許多程式碼選項可以選擇，如範例所示。

焦點指標

如先前所學，聚焦順序是鍵盤無障礙功能的重要層面。決定聚焦的樣式也很重要。因為即使焦點順序很棒，如果樣式未經調整，使用者該如何得知他們在網頁上的位置？

可見的焦點指標是非常重要的工具，可讓使用者掌握他們在整個頁面上的位置。這對視力只有鍵盤的使用者而言特別重要。

瀏覽器預設樣式

如今，每個新式網路瀏覽器都有不同的預設視覺樣式，適用於網站或應用程式的可聚焦元素，有些則比其他瀏覽器更容易顯示。當使用者透過頁面分頁時，元素收到鍵盤焦點時，就會套用這個樣式。

如果您允許瀏覽器處理焦點樣式，請務必查看程式碼，確認主題不會覆寫瀏覽器的預設樣式。覆寫值通常會在樣式表中寫成 "outline: 0" 或 "outline: none"，一小段程式碼可能會移除瀏覽器的預設焦點指標樣式，導致使用者難以瀏覽您的網站或應用程式。

a:focus {
  outline: none; /* don't do this! */
}

a:focus {
  outline: auto 5px Highlight; /* for non-webkit browsers */
  outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */
}

自訂樣式

當然，您可以跳脫預設的瀏覽器樣式，建立自訂焦點指標，與主題相輔相成。建立自訂焦點指標時，您可以自由發揮創意！

焦點指標形狀可以採用多種形式，包括外框、邊框、底線、方塊、背景變更，或其他不依賴顏色來表示鍵盤焦點所在元素的其他明顯風格變更。

您可以變更聚焦指標樣式，確保其不會在背景中遺失。舉例來說，如果網頁使用白色背景，您可以將按鈕焦點指標設為藍色背景。當頁面使用藍色背景時，您可以將相同的按鈕焦點樣式設為白色背景。

您可以根據元素類型變更焦點元素樣式。舉例來說，您可以在內文連結中使用虛線底線，但為按鈕元素選擇圓角邊框。

我們並未規定單一頁面擁有的焦點指標樣式數量，但請務必維持在合理的數值，以免產生不必要的混淆。

總結

為了讓網站或應用程式成為無障礙設計，能夠使用滑鼠存取的所有內容也必須使用鍵盤。此模組著重於鍵盤無障礙功能的視覺層面，特別是焦點順序和焦點指標。

隨堂測驗

測驗您對 ARIA 和 HTML 的相關知識