Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

焦點簡介

在本節課中,我們將談論焦點以及如何在應用中對其進行管理。 焦點是指當前屏幕上的哪個控件(字段、複選框、按鈕或鏈接等輸入項)接收來自鍵盤的輸入以及在您粘貼內容時接收來自剪貼板的輸入。

非常適合從它入手瞭解無障礙功能的相關信息,因爲我們都知道如何使用鍵盤,便於建立起聯繫和進行測試,並且可令幾乎所有用戶受益。

運動缺陷(可能是永久性癱瘓到腕關節扭傷等不同程度的缺陷)用戶可能依賴鍵盤或開關設備進行頁面導航,因此採用適當的焦點策略對向他們提供良好體驗至關重要。

而對於熟知計算機上每一個鍵盤快捷鍵的高級用戶,只使用鍵盤就能快速進行網站導航無疑可以提升他們的工作效率。

因此,精心實現的焦點策略可以確保每一位使用您的應用的用戶獲得更好的體驗。 我們將在即將開始的幾節課中瞭解到,您在焦點上投入的精力是爲輔助技術用戶(實際上也是爲所有用戶)提供支持的重要基礎。

什麼是焦點?

焦點決定在任何給定時刻頁面中鍵盤事件的去向。例如,如果您在聚焦某個文本輸入字段後開始鍵入內容,該輸入字段將接收鍵盤事件並顯示您鍵入的字符。它獲得焦點期間,還會接收來自剪貼板的粘貼輸入。

文本字段中的鍵盤焦點

當前聚焦項通常使用聚焦環指示,其樣式既取決於瀏覽器,也取決於頁面製作者應用的任何樣式設置。例如,Chrome 通常使用藍色邊框突出顯示聚焦的元素,而 Firefox 則是使用虛線邊框。

註冊按鈕

一些用戶幾乎全靠鍵盤或其他輸入設備來操作計算機。 對這些用戶而言,焦點至關重要,因爲這是他們到達所有屏幕元素的主要途徑。 因此,Web AIM 檢查清單纔會在其第 2.1.1 節中指出,所有頁面功能應該都能使用鍵盤來執行,除非是手繪圖這種無法使用鍵盤執行的操作。

作爲用戶,您可以使用 TabShift+Tab 或箭頭鍵來控制當前聚焦的元素。 在 Mac OSX 上,控制方式略有不同:儘管 Chrome 始終允許您使用 Tab 進行導航,但在 Safari 等其他瀏覽器中更改焦點時,您需要按 Option+Tab。(您可以在 System Preferences 的 Keyboard 部分更改此設置。)

鍵盤首選項對話框

通過按 Tab 鍵讓焦點在交互式元素中正向和反向跳轉的順序叫做 Tab 鍵順序,這並不奇怪。 確保您設計的頁面具有符合邏輯的 Tab 鍵順序是一個重要步驟,我們將在稍後進行介紹。

什麼是可聚焦?

文本字段、按鈕和選擇列表等內置的交互式 HTML 元素是隱式可聚焦元素,這意味着它們是自動插入到 Tab 鍵順序中,並且內置了鍵盤事件處理,無需開發者進行干預。

隱式可聚焦字段

但並非所有元素都是可聚焦元素;在您按 Tab 鍵在頁面上循環跳轉時,段落、div 以及各種其他頁面元素不會獲得焦點,這是設計使然。一般不需要聚焦無法與用戶進行交互的元素。

並非所有元素都是可聚焦元素

體驗焦點

讓我們上手嘗試一些剛討論過的聚焦方法。使用 Chrome 訪問此航空公司網站模型頁面,然後只靠鍵盤輸入查找特定機票。該頁面不接受鼠標輸入,因此您無法篡改練習(可不是我們不信任您喲 ;-))。

航空公司網站模型

您應該指定的機票參數如下:

  • 單程
  • 目的地墨爾本
  • 去程日期 2017 年 10 月 12 日 (10/12/2017)
  • 返程日期 2017 年 10 月 23 日 (10/23/2017)
  • 靠窗座位
  • 不想接收促銷優惠信息

當您沒有任何輸入錯誤地成功完成表單並激活 Search 按鈕時,表單將完全清空並重置。 繼續完成表單,然後返回。

讓我們看看錶單是如何使用您的鍵盤輸入的。從您的前幾次按下 Tab 鍵開始,瀏覽器會突出顯示 Flights、Hotels 和 Rental Cars 導航項。如果您繼續按 Tab 鍵,將會跳轉到單選按鈕組,您可以使用箭頭鍵從 Round Trip、One Way 或 Multi City 中做出選擇。

繼續跳轉到姓名和地址字段,填寫所需信息。 當您到達目的地選擇元素時,可以使用箭頭鍵選擇城市,也可開始鍵入內容以自動填充該字段。同理,在日期字段中,您同樣可以使用箭頭鍵或直接鍵入日期。

選擇座位類型也要依賴箭頭鍵,您也可以鍵入“w”、“a”或“n”跳轉到相應的座位選項。 然後,您可以在促銷優惠信息複選框獲得焦點時按空格鍵禁用接收促銷優惠信息的默認選擇。 最後,聚焦 Search 按鈕,並按 Enter 提交表單。

只使用鍵盤與表單進行交互非常方便,因爲不需要切換到鼠標再切換回鍵盤就能完成任務。 由於表單中使用的所有元素都是具有隱式焦點的原生 HTML 標記,因此表單能夠與鍵盤進行順暢的交互,您不必編寫任何代碼來添加或管理聚焦行爲。