網頁具有邏輯的分頁順序

許多不同的使用者會使用鍵盤瀏覽應用程式。 鼓勵臨時或永久動作失能的使用者 提升效率和工作效率 分頁邏輯順序是 能帶來流暢的鍵盤瀏覽體驗。

如何手動測試

如要確認應用程式的分頁順序是否合理，請嘗試在頁面中使用分頁鍵。元素聚焦的順序應以 DOM 順序為目標。一般來說，焦點應按照閱讀順序，從左至右、從頁面頂端到底部移動。

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

您是否可以使用頁面上的所有互動式控制項？ 如果沒有，您可能需要使用 tabindex 來改善這些控制項的焦點功能。一般來說，使用者可以互動或提供輸入內容的任何控制項，都應可聚焦並顯示聚焦指標。如果鍵盤使用者看不到焦點所在內容，就無法與網頁互動。

如何修正

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

如果您無法使用網頁上的所有互動控制項，第一個建議修正方式是將自訂控制項替換為標準化的 HTML 替代方案。例如： 將 <div> 手勢取代為按鈕，使用 <button>。 使用內建的 HTML 元素可大幅提升網站的無障礙程度 並大幅減少工作負載

如果您要建立沒有標準化 HTML 對應項目的自訂互動式元件， 請使用 tabindex 屬性確保這些按鈕可透過鍵盤存取。 例如：

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

詳情請參閱使用 Tabindex 控制焦點。

資源

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