使用語意 HTML 即可輕鬆操控鍵盤

只要使用正確的語意式 HTML 元素,就能滿足大部分或所有鍵盤存取需求。這樣一來,您不必再花時間調整 tabindex,使用者也會更滿意!

內建了許多互動式元素,可提供適當的語意和鍵盤支援。大多數開發人員使用的有:

此外,有時會使用含有 contenteditable 屬性的元素,輸入自由格式文字。

您很容易忽略這些元素提供的內建鍵盤支援功能。以下列舉一些可供探索的元素範例。請改用鍵盤操作,而非滑鼠。您可以使用 TAB (或 SHIFT + TAB) 在控制項之間移動,並使用方向鍵和 ENTERSPACE 等鍵來操作其值。

如果您手邊有手機,可以看到這些內建元素在行動裝置上有許多獨特的互動方式。嘗試自行重現這些行動裝置互動相當費時!這是另一個盡可能使用內建元素的理由。

button 取代 div

常見的無障礙反模式是將非互動元素 (例如 divspan) 視為按鈕,並為其新增點擊處理常式。

不過,按鈕必須符合下列條件,才能算是無障礙設計:

  • 可透過鍵盤聚焦
  • 支援服務已停用
  • 支援使用 ENTERSPACE 鍵執行動作
  • 可由螢幕閱讀器正確朗讀

div 按鈕則沒有這些功能。也就是說,您需要編寫額外的程式碼,才能複製 button 元素提供的免費功能!

舉例來說,button 元素有個簡單的訣竅,稱為「合成點擊啟用」。如果您將「點按」處理常式新增至 button,系統會在使用者按下 ENTERSPACE 時執行該處理常式。div 按鈕沒有這項功能,因此您必須編寫其他程式碼來監聽 keydown 事件、檢查按鍵碼是否為 ENTERSPACE,然後執行點擊處理常式。好痛!這需要花費大量額外心力!

請比較這個範例中的差異。TAB 到任一控制項,並使用 ENTERSPACE 嘗試點選這些控制項。

如果您現有的網站或應用程式中含有 div 按鈕,建議您將其換成 button 元素。button 易於設定樣式,且提供許多無障礙功能!

另一個常見的反模式是將連結視為按鈕,並附加 JavaScript 行為。

<a href="#" onclick="// perform some action">

按鈕和連結都支援某種形式的合成點擊啟用功能。那麼,你應該選擇哪一個?

  • 如果點選元素會在頁面上執行動作,請使用 <button>
  • 如果點選元素會將使用者導向至新頁面,請使用 <a>。這包括使用 History API 載入新內容並更新網址的單頁面網頁應用程式。

這是因為螢幕閱讀器會以不同的方式朗讀按鈕和連結。使用正確的元素,有助於螢幕閱讀器使用者瞭解預期的結果。

TODO:DevSite - 思考與檢查評估

樣式

某些內建元素 (尤其是 <input>) 可能難以套用樣式。只要使用一些聰明的 CSS,您就能解決部分限制。這個 (名稱有趣的) WTFForms 專案包含一個樣式表範例,其中展示了許多可用於設定某些較難處理的內建元素樣式的技巧。

後續步驟

使用內建 HTML 元素可大幅改善網站的無障礙性,並大幅減少工作負載。請嘗試在網站中按 Tab 鍵,並找出缺少鍵盤支援的任何控制項。盡可能將其改為標準 HTML 替代方案。

有時您可能會發現某個元素在 HTML 中沒有對應項目。沒關係!請繼續閱讀,瞭解如何使用 tabindex 為自訂互動式控制項新增鍵盤支援功能。