當沒有焦點區域時,您可以使用「依序焦點導覽起點」功能,指定系統開始搜尋可聚焦元素的起點,以便執行依序焦點導覽 ([Tab] 或 [Shift-Tab])。這項功能特別適合用於「略過連結」等無障礙功能,以及管理文件中的焦點。
HTML 提供許多內建支援功能,可處理鍵盤互動,因此您可以輕鬆編寫可透過鍵盤操作的網頁,無論是因為動作障礙而無法使用滑鼠,或是為了節省寶貴的幾毫秒而將手移開鍵盤,都能輕鬆操作。
鍵盤處理作業會以焦點為主,焦點會決定鍵盤事件在網頁中的位置。在某些情況下,我們需要額外處理才能讓鍵盤使用者順利操作。focus()
方法可讓我們根據使用者動作,選擇要聚焦的元素,藉此管理焦點。不過,這項最佳做法會遇到許多陷阱,而且需要一些棘手的 JavaScript 駭客行為才能提供基本體驗。
雖然這項技巧不會在短期內完全消失,但在 Chrome 50 中,由於有序焦點導覽起點,因此只需在少數情況下使用這項技巧。這項異動後,編寫良好的網頁會自動變得更易於存取,不需要額外手動管理焦點。我們來看看以下範例。
頁面內的連結
文字量多的網站通常會在同一個網頁中建立內部連結,協助使用者快速前往重要部分。
<!-- Table of Contents -->
<a href="#recipes">Recipes</a>
<a href="#ingredients">Ingredients</a>
<!-- Recipes Section -->
<h2 id="recipes">Recipes</h1>
<h3>Vegemite Cheesecake</h3>
<p>
Vegemite cheesecake is delicious. We promise.
<a href="cheesecake.html">Read More</a>
</p>
如果我是鍵盤使用者 (也是澳洲美食愛好者),接下來會執行的一系列操作如下:
- 按兩下
Tab
鍵,將焦點放在「食譜」連結上 - 按下
Enter
鍵即可跳至「食譜」部分 - 再次按下
Tab
鍵,將焦點移至「Read More」連結
我們來看看 Chrome 49 的實際運作情形。
噢,這並未按照計畫進行,對吧?
按下 Tab
後,焦點並未移至「Read More」連結,而是移至目錄中的下一個項目。這是因為開發人員未在標頭上設定 tabindex="-1"
,以便讓標頭可供聚焦。因此,點選名為 #recipes
的錨點不會移動焦點。這是一個微妙的錯誤,如果您是滑鼠使用者,這並不是什麼大問題。但如果您是使用鍵盤或 Switch 裝置,這可能會造成很大的影響。請想想一般維基百科頁面有多少內部連結?不斷在這些錨點之間來回切換分頁,實在令人沮喪!
我們現在來看看使用 Chrome 50 時的相同體驗。
哇,這正是我們想要的結果,而且最棒的是,我們不必變更程式碼。瀏覽器會根據我們在文件中的所在位置,判斷焦點應移至何處。
運作方式
在實作焦點起始點之前,焦點一律會從先前焦點元素或頁面頂端移出。也就是說,選擇下一個焦點時,可能會將焦點移至不應可聚焦的項目,例如容器元素或標題。這會導致各種奇怪的情況,包括在您無意間按下這類元素時,系統會顯示焦點環。
如其名稱所示,焦點起點提供一種機制,可在我們按下 Tab
或 Shift-Tab
時,建議從何處開始尋找下一個可聚焦的元素。
您可以透過多種方式設定焦點:
如果某個項目有焦點,則該項目也是焦點導覽的起點,就像前面所述。同樣地,如果沒有其他項目設定焦點導覽起點,則會是目前的 document
,或目前有效的 dialog
(如果有且支援的話)。如果我們前往上述範例中的網頁片段,現在會設定焦點起始點。此外,如果我們點選頁面上的任何元素 (無論是否可聚焦),現在都會設定焦點導覽起點。最後,如果焦點起始點的元素從 DOM 中移除,其父項就會成為焦點起始點。不再需要聚焦打地鼠遊戲!
其他使用情況
除了上述範例之外,這項功能還適用於許多其他情況。
隱藏元素
有時使用者會將焦點放在需要設為 visibility: hidden
或 display: none
的項目。舉例來說,輪轉介面中的可點選項目就是這類元素。在先前版本的 Chrome 中,以這種方式隱藏目前聚焦的項目會將焦點重設為預設的起始點,讓上述輪轉介面成為手部活動受損使用者的陷阱。但有了序列焦點起點,情況就不同了。如果元素是透過上述任一方法隱藏,按下 Tab
鍵只會移動到下一個可聚焦的項目。
略過連結
跳轉連結是隱藏的錨點,只能透過鍵盤存取。可讓使用者「略過」導覽元素,直接跳至網頁內容,對鍵盤和 Switch 裝置使用者來說非常實用。如WebAIM 網站所述
許多熱門網站都會導入略過連結,但您可能從未注意到。
由於略過連結是命名的錨點,因此運作方式與原始目錄範例相同。
注意事項和支援
目前只有 Chrome 50、Firefox 和 Opera 支援依序焦點導覽起始點。在所有瀏覽器都支援此功能之前,您仍需要在命名錨點目標中新增 tabindex="-1"
(並移除焦點輪廓)。
示範
序列焦點導覽起點是瀏覽器無障礙基本元素的絕佳補充項目。這項功能很容易上手,而且能讓我們從應用程式中移除程式碼,同時改善使用者體驗。雙贏!請參閱示範影片,進一步瞭解這項功能。