從聚焦管理中移除頭痛

「依序聚焦導覽起點」功能會定義在沒有聚焦區域時,系統會開始搜尋可聚焦元素的位置,用於依序聚焦導覽 ([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,即可將焦點移至「閱讀完整內容」連結

讓我們看看使用 Chrome 49 的實際運作情形。

喔,和計畫一樣,那不是真的嗎?

按下 Tab 鍵即可將焦點移到目錄中的下一個項目,而非按下「閱讀更多」連結。這是因為開發人員並未將標頭的 tabindex="-1" 設為可聚焦。因此,點選 #recipes 具名錨點並不會移動焦點。這對滑鼠使用者來說是相當細微的錯誤,但對滑鼠使用者來說,這也不是件大事。不過,如果你是鍵盤或切換裝置的使用者,可能十分重要。想想一般維基百科網頁上的連結數量有多少?必須不斷來回切換所有錨點,會讓人感到沮喪!

接著來看看 Chrome 50 的相同體驗。

哇,這正是我們的目標。最棒的是,我們不必修改程式碼。瀏覽器只是根據在文件中的所在位置推測出焦點所在位置。

運作方式

導入聚焦起點之前,焦點一律會從上一個聚焦元素或頁面頂端移動。這表示選擇接下來要聚焦的項目可能會將焦點移至不應有焦點的項目,例如容器元素或標題。這會造成各種奇怪的感覺,包括在不小心按到那個元素時顯示對焦環。

顧名思義,系統會提供一個機制,指出按下 TabShift-Tab 時,可從何處開始尋找下一個可聚焦元素。

您可以用多種方式設定:如果項目有焦點,也會是焦點導覽的起點,就像先前一樣。此外,和先前一樣,如果沒有其他設定聚焦導覽起點,那就會是目前的 document,或者目前使用中的 dialog (如有支援)。 如果前往網頁片段 (如上例所示),系統就會設定焦點的起始點。 此外,如果我們點選網頁上的任何元素,無論該元素是否可聚焦,都會設定焦點導覽的起點。 最後,如果焦點所在元素已從 DOM 中移除,其父項就會成為焦點的起點。不必大費周章!

其他使用情況

除了上述範例之外,在許多其他情況下,這項功能都能派上用場。

隱藏元素

有時候,使用者的焦點可能會放在需要設為 visibility: hiddendisplay: none 的項目上。例如輪轉介面中的可點選項目就屬於這種行為。在舊版 Chrome 中,如果以這種方式隱藏目前聚焦的項目,系統就會將焦點重設為預設起點,並將上述輪轉介面轉換成流動者專用的廁所陷阱。但若以依序聚焦的起點為出發點,現在已非如此。如果透過上述任一方法隱藏元素,按下 Tab 鍵只會移至下一個可聚焦的項目。

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

許多熱門網站都採用略過連結,但或許您不曾注意到這類連結。

GitHub.com 上的略過連結

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

注意事項和支援

目前只有 Chrome 50、Firefox 和 Opera 支援依序焦點瀏覽的起點。在所有瀏覽器中都支援這項功能前,您仍須在已命名的錨定目標中加入 tabindex="-1" (並移除焦點外框)。

示範

依序聚焦導覽的起點,能夠取代瀏覽器的無障礙功能原始設計。我們可以輕易相信,我們可以從應用程式中移除程式碼,同時改善使用者體驗。雙倍獲勝!歡迎觀看示範影片,深入探索這項功能。