專注簡介

無障礙功能的螢幕焦點總覽

戴夫加什
Dave Gash
米金凱爾尼
Meggin Kearney

在本課程中,我們會說明焦點,以及如何在應用程式中管理焦點。焦點是指目前畫面上的控制項 (例如欄位、核取方塊、按鈕或連結等輸入項目),目前會從鍵盤接收輸入內容,貼上內容時也會從剪貼簿接收內容。

這正是開始學習無障礙工具的絕佳起點,因為我們都知道鍵盤的使用方式,容易引起共鳴及進行測試,而且幾乎能讓所有使用者受惠。

針對動作失能的使用者 (例如永久癱瘓或指尖的手腕),他們可能需要用鍵盤或切換裝置才能瀏覽網頁,因此如要為他們提供良好的體驗,就必須制定周全的策略。

如果進階使用者知道電腦上所有鍵盤快速鍵,單靠鍵盤就能快速瀏覽網站,有助於提升工作效率。

因此,妥善實施重點策略可確保應用程式的所有使用者都能享有更優質的體驗。在接下來的課程中,我們都指出您付出的努力,是支援輔助技術使用者及所有使用者的重要基礎。

什麼是重點?

焦點會決定鍵盤事件在任何指定時刻在頁面中的位置。舉例來說,如果您聚焦在文字輸入欄位並開始輸入,輸入欄位就會收到鍵盤事件並顯示您輸入的字元。當它聚焦時,還會收到剪貼簿貼上的輸入內容。

鍵盤焦點在文字欄位中。

目前聚焦的項目通常以「聚焦環」表示,其樣式取決於瀏覽器和網頁作者套用的任何樣式。舉例來說,Chrome 通常會使用藍色邊框來醒目顯示焦點元素,而 Firefox 使用虛線邊框。

註冊按鈕。

部分使用者幾乎可以完全透過鍵盤或其他輸入裝置操作電腦。對於這類使用者而言,重心相當重要,這是他們在畫面上看到的所有內容的主要方式。因此,第 2.1.1 節的 Web AIM 檢查清單指出,所有網頁功能都應使用鍵盤使用,除非這是鍵盤無法進行的操作,例如手繪。

使用者可以使用 TabShift+Tab 或方向鍵控制目前聚焦的元素。在 Mac OSX 上,運作方式稍有不同:雖然 Chrome 一律可讓您使用 Tab 進行瀏覽,但您需要按下 Option+Tab 才能變更其他瀏覽器 (例如 Safari) 的焦點。(您可以在「系統偏好設定」的「鍵盤」部分中變更這項設定)。

鍵盤偏好設定對話方塊。

系統會呼叫透過 Tab 互動元素往前或向後的順序,而呼叫分頁標籤順序是不是意外地呼叫。設計網頁時,確保具有邏輯的分頁順序,這是我們稍後會說明的重要步驟。

什麼是可聚焦?

文字欄位、按鈕和選取清單等內建互動式 HTML 元素可隱含焦點,也就是說,這些元素會自動插入分頁標籤順序,並內建鍵盤事件處理功能,開發人員不必介入。

隱性可聚焦的欄位。

但並非所有元素都可供聚焦;段落、div 和其他各種網頁元素不會聚焦在逐頁瀏覽時不會聚焦,這也是設計結果的考量因素。如果使用者無法與其互動,通常就不需要把焦點放在其他東西上。

並非所有元素都可供聚焦

目前專注在

我們來試試剛才討論的幾個重點技巧。使用 Chrome 前往這個航空公司網站模擬頁面,並僅使用鍵盤輸入內容搜尋特定票券。頁面不接受滑鼠輸入,因此您無法對運動做出回應 (這並非我們不信任您;-)。

航空公司網站模擬圖。

您應指定的票券參數如下:

  • 單程
  • 飛往墨爾本
  • 於 2017 年 10 月 12 日離開 (2017 年 10 月 12 日)
  • 回訪日期:2017 年 10 月 23 日 (2017 年 10 月 23 日)
  • 窗台座位
  • 不想收到促銷優惠

當您成功在沒有輸入錯誤的情況下填寫表單,並啟用「搜尋」按鈕時,只會清除並重設表單。直接填寫表單,再回來查看

接下來介紹表單如何使用鍵盤輸入功能。從首次按下 Tab 次開始,瀏覽器會醒目顯示航班、飯店和租車的導覽項目。如要繼續按下 Tab,請前往圓形按鈕群組,您可以使用方向鍵選擇「Round Trip」、「One Way」或「Multi City」。

繼續填寫名稱和地址欄位,然後填寫必要資訊。當您抵達目的地選取元素時,可以使用方向鍵選擇城市,也可以開始輸入,自動完成欄位。同樣地,在日期欄位中,您可以使用方向鍵或直接輸入日期。

選取座位類型時也會使用方向鍵。您也可以輸入「w」、「a」或「n」來跳到座位選項。接著只要在核取方塊聚焦時按下空格鍵,即可預設停用促銷優惠。最後,將焦點移至「Search」(搜尋) 按鈕,然後按下 Enter 即可提交表單。

只使用鍵盤與表單互動,不用切換滑鼠和返回完成工作,非常有用。由於表單中使用的所有元素都是隱含焦點的原生 HTML 標記,因此表單可與鍵盤搭配使用,而且您不必撰寫任何程式碼來新增或管理焦點行為。