許多不同的使用者依賴鍵盤瀏覽應用程式, 鍵盤上暫時或永久的馬達功能故障 有助於提高效率和工作效率完善的鍵盤瀏覽功能 可為大家打造更優質的體驗
焦點和分頁順序
在特定時刻,焦點是指應用程式中的元素 (例如 欄位、核取方塊、按鈕或連結) 目前會接收來自鍵盤的輸入內容。 除了接收鍵盤事件外,聚焦的元素也會取得內容 貼上從剪貼簿貼上的內容
如要將焦點移至頁面,請使用 TAB
前往「下一頁」和SHIFT + TAB
即可「向後」瀏覽目前聚焦的元素通常是由
對焦環,則各種瀏覽器都有不同的焦點環樣式。
瀏覽互動式元素前後的焦點
稱為分頁順序
文字欄位、按鈕和選取清單等互動式 HTML 元素 隱含可聚焦:會自動插入分頁標籤順序 達成計算依據 DOM。 這些互動式元素也內建鍵盤事件處理功能。Elements 例如段落和 div 等,使用者通常不會明確聚焦 不需要與其互動
實作邏輯分頁順序是為使用者提供服務的重要環節 提供順暢的鍵盤瀏覽體驗。有兩種主要概念 因此,在評估及調整分頁順序時,請特別留意:
- 依照邏輯順序排列 DOM 中的元素
- 正確設定畫面外不應接收內容的顯示設定 專注
依照邏輯順序排列 DOM 中的元素
如要檢查應用程式分頁順序是否合理,請嘗試使用 Tab 鍵瀏覽 頁面。一般來說,焦點應依循閱讀順序,由左至右移動 從頁面頂端到底部
如果焦點順序有誤,您應該重新排列 DOM 中的元素 讓分頁的順序更自然如果您想讓圖片 將物件移到較早的 DOM 中
嘗試瀏覽下方兩組按鈕,體驗邏輯分頁。 順序和不邏輯的定位點順序:
邏輯分頁順序
邏輯分頁順序
以下比較這兩個範例的程式碼:
邏輯分頁順序
<button>Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
邏輯分頁順序
<button style="float: right">Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
使用 CSS 變更元素的視覺位置時,請務必小心,以免 建立不邏輯的分頁順序如要修正上述錯誤的分頁順序,請將 漂浮的「Kiwi」(位於「椰子」後方)DOM 中的按鈕,以及 移除內嵌樣式
正確設定畫面外內容的瀏覽權限
有時螢幕外的互動元素必須存在於 DOM 中,但不應 分別是舉例來說,如果您開啟了回應式側邊導覽列 當您點選按鈕時,使用者不應聚焦在側邊導覽列 設為關閉的時間點
如要防止特定互動式元素接收焦點,請 該元素會提供下列其中一項 CSS 屬性:
display: none
visibility: hidden
如要將元素加回分頁順序,例如在側邊導覽列 開啟後,請將上述 CSS 屬性分別替換成:
display: block
visibility: visible
後續步驟
適合完全使用鍵盤或 和其他輸入裝置一樣,請務必依邏輯分頁順序, 可用性高建議你查看分頁順序 試著在每次發布前,透過分頁切換應用程式。