許多不同的使用者都仰賴鍵盤來瀏覽應用程式,包括有暫時性和永久動作障礙的使用者,以及使用鍵盤快速鍵的使用者來提升效率和工作效率。如要提供流暢的鍵盤瀏覽體驗,邏輯分頁順序是相當重要的一環。
如何手動測試
如要確認應用程式的分頁順序是否合理,請嘗試瀏覽頁面。元素聚焦的順序應符合 DOM 順序。一般來說,焦點應遵循閱讀順序,從左到右從頁面底部移至底部。
詳情請參閱鍵盤存取基礎知識。
您是否能找到網頁中所有的互動控制項?
如果不行,您可能需要使用 tabindex
來改善這些控制項的可聚焦性。基本原則是,使用者可能互動或提供輸入內容的任何控制項,都應聚焦於焦點,並顯示焦點指標。如果鍵盤使用者看不到焦點所在,就無法與網頁互動。
如何修正
如果焦點順序有誤,您應該在 DOM 中重新排列元素,讓分頁順序更加自然。
如果您無法在網頁上取得所有互動控制項,請先解決第一個問題,也就是將自訂控制項替換為標準化的 HTML 替代項目。例如,使用 <button>
取代 <div>
做為按鈕的行為。使用內建 HTML 元素可大幅改善網站的無障礙程度,並大幅減少工作負載。
如果您要建構沒有標準化 HTML 對等項目的自訂互動元件,請使用 tabindex
屬性確保這些元件可透過鍵盤存取。例如:
<div tabindex="0">Focus me with the TAB key</div>
詳情請參閱「使用 Tabindex 控制焦點」一文。