許多使用者都會使用鍵盤瀏覽應用程式,包括暫時性和永久性動作障礙的使用者,以及使用鍵盤快速鍵提高工作效率的使用者。邏輯分頁順序是提供流暢鍵盤導覽體驗的重要一環。
如何手動測試
如要確認應用程式的分頁順序是否合理,請嘗試在頁面中使用分頁鍵。元素聚焦的順序應以 DOM 順序為目標。一般來說,焦點應按照閱讀順序,從左到右、從頁面頂端到底部移動。
詳情請參閱鍵盤存取權基本概念。
您是否可以使用頁面上的所有互動式控制項?
如果沒有,您可能需要使用 tabindex
來改善這些控制項的焦點功能。一般來說,使用者可與之互動或提供輸入內容的任何控制項,都應可聚焦並顯示聚焦指標。如果鍵盤使用者無法看到焦點所在位置,就無法與網頁互動。
如何修正
如果焦點順序似乎有誤,請重新排列 DOM 中的元素,讓分頁順序更自然。
如果您無法使用頁面上的所有互動控制項,第一個建議修正方式是將自訂控制項替換為標準化的 HTML 替代方案。舉例來說,將 <div>
替換為 <button>
,以便執行按鈕功能。使用內建 HTML 元素可大幅改善網站的無障礙性,並大幅減少工作負載。
如果您要建構自訂互動式元件,但沒有對應的標準化 HTML,請使用 tabindex
屬性,確保這些元件可透過鍵盤存取。例如:
<div tabindex="0">Focus me with the TAB key</div>
如要進一步瞭解,請參閱「使用 tabindex 控制焦點」一文。