網頁具有邏輯的分頁順序

許多不同的使用者都仰賴鍵盤來瀏覽應用程式,包括有暫時性和永久動作障礙的使用者,以及使用鍵盤快速鍵的使用者來提升效率和工作效率。如要提供流暢的鍵盤瀏覽體驗,邏輯分頁順序是相當重要的一環。

如何手動測試

如要確認應用程式的分頁順序是否合理,請嘗試瀏覽頁面。元素聚焦的順序應符合 DOM 順序。一般來說,焦點應遵循閱讀順序,從左到右從頁面底部移至底部。

詳情請參閱鍵盤存取基礎知識

您是否能找到網頁中所有的互動控制項? 如果不行,您可能需要使用 tabindex 來改善這些控制項的可聚焦性。基本原則是,使用者可能互動或提供輸入內容的任何控制項,都應聚焦於焦點,並顯示焦點指標。如果鍵盤使用者看不到焦點所在,就無法與網頁互動。

如何修正

如果焦點順序有誤,您應該在 DOM 中重新排列元素,讓分頁順序更加自然。

如果您無法在網頁上取得所有互動控制項,請先解決第一個問題,也就是將自訂控制項替換為標準化的 HTML 替代項目。例如,使用 <button> 取代 <div> 做為按鈕的行為。使用內建 HTML 元素可大幅改善網站的無障礙程度,並大幅減少工作負載。

如果您要建構沒有標準化 HTML 對等項目的自訂互動元件,請使用 tabindex 屬性確保這些元件可透過鍵盤存取。例如:

<div tabindex="0">Focus me with the TAB key</div>

詳情請參閱「使用 Tabindex 控制焦點」一文。

資源

網頁具有邏輯分頁順序稽核的原始碼