從聚焦管理中移除頭痛

當沒有焦點區域時,您可以使用「依序焦點導覽起點」功能,指定系統開始搜尋可聚焦元素的起點,以便執行依序焦點導覽 ([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 時的相同體驗。

哇,這正是我們想要的結果,而且最棒的是,我們不必變更程式碼。瀏覽器會根據我們在文件中的所在位置,判斷焦點應移至何處。

運作方式

在實作焦點起始點之前,焦點一律會從先前焦點元素或頁面頂端移出。也就是說,選擇下一個焦點時,可能會將焦點移至不應可聚焦的項目,例如容器元素或標題。這會導致各種奇怪的情況,包括在您無意間按下這類元素時,系統會顯示焦點環。

如其名稱所示,焦點起點提供一種機制,可在我們按下 TabShift-Tab 時,建議從何處開始尋找下一個可聚焦的元素。

您可以透過多種方式設定焦點: 如果某個項目有焦點,則該項目也是焦點導覽的起點,就像前面所述。同樣地,如果沒有其他項目設定焦點導覽起點,則會是目前的 document,或目前有效的 dialog (如果有且支援的話)。如果我們前往上述範例中的網頁片段,現在會設定焦點起始點。此外,如果我們點選頁面上的任何元素 (無論是否可聚焦),現在都會設定焦點導覽起點。最後,如果焦點起始點的元素從 DOM 中移除,其父項就會成為焦點起始點。不再需要聚焦打地鼠遊戲!

其他使用情況

除了上述範例之外,這項功能還適用於許多其他情況。

隱藏元素

有時使用者會將焦點放在需要設為 visibility: hiddendisplay: none 的項目。舉例來說,輪轉介面中的可點選項目就是這類元素。在先前版本的 Chrome 中,以這種方式隱藏目前聚焦的項目會將焦點重設為預設的起始點,讓上述輪轉介面成為手部活動受損使用者的陷阱。但有了序列焦點起點,情況就不同了。如果元素是透過上述任一方法隱藏,按下 Tab 鍵只會移動到下一個可聚焦的項目。

跳轉連結是隱藏的錨點,只能透過鍵盤存取。可讓使用者「略過」導覽元素,直接跳至網頁內容,對鍵盤和 Switch 裝置使用者來說非常實用。如WebAIM 網站所述

許多熱門網站都會導入略過連結,但您可能從未注意到。

GitHub.com 上的略過連結

由於略過連結是命名的錨點,因此運作方式與原始目錄範例相同。

注意事項和支援

目前只有 Chrome 50、Firefox 和 Opera 支援依序焦點導覽起始點。在所有瀏覽器都支援此功能之前,您仍需要在命名錨點目標中新增 tabindex="-1" (並移除焦點輪廓)。

示範

序列焦點導覽起點是瀏覽器無障礙基本元素的絕佳補充項目。這項功能很容易上手,而且能讓我們從應用程式中移除程式碼,同時改善使用者體驗。雙贏!請參閱示範影片,進一步瞭解這項功能。