感謝觀看 Google I/O 大會！立即觀賞隨選內容。

鍵盤焦點

可操作性以鍵盤表示，但使用者可透過多種介面和軟體互動。

許多人會使用鍵盤 (或模擬鍵盤功能的軟硬體，例如切換工具) 做為主要瀏覽方式。這可能是因為個人偏好、效率或硬體故障。

如果使用者有暫時性的肢體限制，例如扭傷手腕或精細動作障礙 (如腕隧道症候群)，可能會選擇使用鍵盤操作。低視能或失明使用者可以搭配放大或螢幕閱讀器軟體，使用鍵盤瀏覽畫面。不過，他們可能會使用與一般使用者不同的鍵盤快速鍵指令來瀏覽畫面。

部分非身心障礙者也可能會選擇使用鍵盤瀏覽。

因此，鍵盤支援所有這些障礙和情況至關重要。鍵盤無障礙功能的大部分內容都與焦點有關。焦點是指畫面上主動接收鍵盤輸入內容的元素。

在本單元中，我們將著重於鍵盤和可聚焦元素的 HTML 結構和 CSS 樣式。JavaScript 模組包含互動式元素的焦點管理和按鍵輸入相關資訊。

焦點順序

鍵盤使用者可前往的元素稱為可聚焦元素。焦點順序 (也稱為 Tab 鍵或導覽順序) 是指元素接收焦點的順序。預設焦點順序必須符合邏輯、直覺，且與網頁的視覺順序一致。

以大多數語言來說，焦點順序會從網頁頂端開始，並在底部結束，移動方向為從左到右。不過，有些語言的閱讀方向是由右至左，因此網頁的主要語言可能需要不同的焦點順序。

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

您可以更新焦點順序，納入通常不會收到焦點的任何元素，例如非互動式 HTML 元素、自訂元件或具有 ARIA 的元素，並覆寫自然焦點語意。

Tabindex

焦點順序會先從具有正數 tabindex 屬性的元素開始 (如有)，然後從最小的正數移至最大的正數 (例如 1、2、3)。然後，系統會根據元素在 DOM 中的順序，逐一處理 tabindex 為零的元素。系統會從自然焦點順序中移除任何 tabindex 為負值的元素。

如果將 tabindex 設為零 (tabindex="0")，通常無法成為焦點的元素就會加入網頁的自然焦點順序，順序依據是元素在 DOM 中的顯示方式。不過，與自然可聚焦的 HTML 元素不同，您必須提供額外的鍵盤支援，才能讓這些元素完全無障礙。

同樣地，如果某個元素通常可成為焦點，但目前處於非使用中狀態 (例如按鈕必須等到輸入欄位填寫完畢才能運作)，您應為該元素新增負的 tabindex (tabindex="-1")。新增負的 tabindex 會向輔助技術和鍵盤發出信號，表示應從自然焦點順序中移除這個按鈕。但別擔心，您可以使用 JavaScript，在需要時將焦點加回元素。

在本範例中，系統已將 tabindex 屬性新增至不會自然接收焦點的元素。元素順序是使用 tabindex 操控，用來說明它對焦點順序的影響。以下舉例說明其中一種違規情況：

新的焦點順序會反映 HTML。 — 以鍵盤使用者身分，透過 Tab 鍵瀏覽 CodePen HTML。

略過連結

現今大多數網站的網頁主要標題中，都有長長的選單連結清單，且各個網頁都一致。這很適合一般導覽，但只使用鍵盤的使用者可能需要多次按下 Tab 鍵，才能輕鬆前往網站的主要內容。

如要略過多餘或無用的連結群組，其中一種方法是新增略過連結。略過連結是錨點連結，會使用同一網頁不同部分的 ID 跳轉至該部分，而不是將使用者傳送至網站上的其他網頁或外部資源。通常會將略過連結新增為使用者抵達網站時遇到的第一個可聚焦元素，並視設計需求而定，可顯示或隱藏，直到使用者按下 Tab 鍵為止。

使用者按下 Tab 鍵時，如果畫面上有有效的略過連結，鍵盤焦點就會移至該連結。使用者可以點選跳轉連結，略過標題部分和主要導覽，如果使用者選擇不點選略過連結，並繼續向下切換 DOM，系統會將他們帶往下一個可聚焦的元素。

與所有連結一樣，略過連結必須包含連結用途的相關背景資訊。加入「跳至主要內容」這類片語，可讓使用者瞭解連結會將他們帶往何處。為連結提供額外脈絡時，您可以選擇許多程式碼選項，例如 aria-labelledby、aria-label，或將其新增至 <a> 元素的文字內容，如範例所示。

預覽鍵盤焦點所在的 CodePen。 — 觀看鍵盤使用者在有和沒有略過連結的情況下瀏覽網頁。

焦點指標

如您剛才所學，焦點順序是鍵盤無障礙功能的重要環節。此外，也請務必決定焦點的樣式。因為即使焦點順序良好，如果沒有適當的樣式，使用者怎麼知道自己在頁面上的位置？

醒目的焦點指標可隨時告知使用者在網頁上的位置，因此非常重要。這對僅使用鍵盤的視力正常使用者而言尤其重要。焦點未遭遮蔽 (最低) 確保焦點指標不會隱藏在其他元件下方。

瀏覽器預設樣式

目前，每個新式網頁瀏覽器都有不同的預設視覺樣式，會套用至網站或應用程式中可聚焦的元素，有些樣式比其他樣式更顯眼。使用者在頁面中按 Tab 鍵時，系統會將這個樣式套用至取得鍵盤焦點的元素。

如果允許瀏覽器處理焦點樣式，請務必檢查程式碼，確認主題不會覆寫瀏覽器的預設樣式。覆寫通常會在 CSS 樣式表中寫成 "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 */
}

自訂樣式

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

焦點指標形狀可以採用多種形式，例如外框、邊框、底線、方塊、背景變更，或其他明顯的樣式變更，不單單只靠顏色來指出鍵盤焦點已在該元素上啟用。

您可以變更焦點指標樣式，確保指標可見。舉例來說，如果頁面是白色背景，您可以將按鈕焦點指標設為藍色背景。如果網頁的背景是藍色，您可以將按鈕焦點樣式設為白色背景。

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

CSS 中所示的焦點樣式。 — 使用鍵盤的使用者透過 Tab 鍵瀏覽各個樣式焦點元素時，請觀察會發生什麼情況。

一個頁面可以有多少焦點指標樣式沒有規定，但請務必將數量控制在合理範圍內，以免造成不必要的混淆。

文件

JavaScript