許多不同的使用者都依賴鍵盤來瀏覽應用程式,例如暫時和永久性動作受損的使用者,以及使用鍵盤快速鍵提高效率和工作效率的使用者。只要為您的應用程式製定完善的鍵盤瀏覽策略,就能讓所有使用者都能享有更優質的體驗。
焦點和分頁順序
在特定時間內,「焦點」是指目前從鍵盤收到輸入的應用程式元素 (例如欄位、核取方塊、按鈕或連結)。除了接收鍵盤事件外,焦點所在的元素也會取得從剪貼簿貼上的內容。
如要將焦點移至頁面,請使用 TAB
向「前進」,並使用 SHIFT + TAB
向「返回」。目前聚焦的元素通常會以「聚焦環」表示,且各種瀏覽器會以不同的樣式設定焦點環。焦點在互動元素上往前或向後繼續的順序稱為「分頁順序」。
文字欄位、按鈕和選取清單等互動式 HTML 元素隱含可聚焦:系統會根據元素在 DOM 中的位置自動插入分頁順序。這些互動元素還具有內建鍵盤事件處理功能。使用者通常不需要與段落和 div 等元素互動,因此無法以隱含的方式聚焦。
實作邏輯分頁順序是為使用者提供順暢的鍵盤瀏覽體驗的重要一環。評估及調整分頁順序時,請留意以下兩大要點:
- 在 DOM 中依邏輯順序排列元素
- 正確設定不應接收焦點的螢幕外內容
在 DOM 中依邏輯順序排列元素
如要檢查應用程式的分頁順序是否合乎邏輯,請嘗試使用 Tab 鍵瀏覽頁面。一般來說,焦點應依循閱讀順序,從左到右移動至頁面底部。
如果聚焦順序有誤,建議您重新排列 DOM 中的元素,讓分頁順序更自然。如果您想讓內容提前在螢幕上呈現,請在 DOM 中提早移動內容。
請嘗試使用 Tab 鍵瀏覽下列兩組按鈕,以體驗邏輯分頁順序與邏輯的分頁順序:
邏輯分頁順序
依邏輯分頁順序
這兩個範例的程式碼比較如下:
邏輯分頁順序
<button>Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
依邏輯分頁順序
<button style="float: right">Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
使用 CSS 變更元素的視覺位置時,請務必小心,以免造成分頁順序錯亂。如要修正上述的邏輯分頁標籤順序,請移動浮動的「Kiwi」按鈕,使其出現在 DOM 的「Coconut」按鈕後方,然後移除內嵌樣式。
正確設定畫面外內容的瀏覽權限
有時候,畫面外的互動元素需要在 DOM 中,但不得依照分頁順序。舉例來說,如果您有會點選按鈕時開啟的回應式側邊導覽列,使用者就無法聚焦於側邊導覽列。
為避免特定互動式元素接收焦點,請提供下列任一 CSS 屬性:
display: none
visibility: hidden
如要將元素加回分頁順序 (例如側邊導覽列開啟時),請分別將上述 CSS 屬性替換成:
display: block
visibility: visible
後續步驟
對於幾乎完全透過鍵盤或其他輸入裝置操作電腦的使用者,應用程式必須依照邏輯管理分頁標籤順序,才能使應用程式易於存取且可供使用。建議您習慣在每次發布前依分頁瀏覽應用程式,以防您檢查分頁順序。