鍵盤可訪問

為了完全可訪問,網頁必須能夠僅透過鍵盤進行訪問和控制。這包括螢幕閱讀器使用者,但也可能包括那些難以操作滑鼠或軌跡球等指標裝置的使用者,或者他們的滑鼠目前無法工作,或者那些在可能的情況下更喜歡使用鍵盤進行輸入的使用者。

可聚焦元素應具有互動式語義

如果一個元素可以使用鍵盤聚焦,那麼它應該是可互動的;也就是說,使用者應該能夠對其進行操作併產生某種變化(例如,啟用連結或更改選項)。

注意: 此規則的一個重要例外是,如果元素應用了 role="document" 屬性,並且位於互動式上下文(如 role="application")的內部。在這種情況下,聚焦巢狀文件是使輔助技術返回非互動式狀態(通常稱為“瀏覽模式”)的唯一方法。

大多數互動式元素預設是可聚焦的;您可以透過為其新增 tabindex=0 屬性值來使其可聚焦。但是,您應該僅在已使元素可互動(例如,透過定義適當的鍵盤事件事件處理程式)的情況下才新增 tabindex

另見

避免使用大於零的 tabindex 屬性

tabindex 屬性表示一個元素可以使用鍵盤聚焦。值為零表示該元素是預設焦點順序的一部分,該順序基於 HTML 文件中元素的順序。正值會將元素置於預設順序的前面;具有正值的元素按其 tabindex 值(1、2、3 等)的順序聚焦。

當焦點順序與頁面的邏輯順序不同時,這會給僅使用鍵盤的使用者帶來混淆。更好的策略是構建 HTML 文件,使可聚焦元素按邏輯順序排列,而無需使用正 tabindex 值重新排序它們。

另見

可點選元素必須可聚焦,並應具有互動式語義

如果一個元素可以使用滑鼠等指標裝置點選,那麼它也應該能夠使用鍵盤聚焦,並且使用者應該能夠透過與其互動來執行某些操作。

如果元素定義了 onclick 事件處理程式,則它是可點選的。您可以透過為其新增 tabindex=0 屬性值來使其可聚焦。透過定義 onkeydown 事件處理程式,您可以使其可以透過鍵盤操作;在大多數情況下,事件處理程式執行的操作應與兩種事件型別相同。

另見

互動式元素必須能夠使用鍵盤進行啟用

如果使用者可以透過觸控或指標裝置與元素進行互動,那麼該元素也應該支援透過鍵盤進行互動。也就是說,如果您為觸控或單擊事件定義了事件處理程式,那麼您也應該為鍵盤事件定義它們。鍵盤事件處理程式應實現與觸控或單擊處理程式基本相同的互動。

另見

互動式元素必須可聚焦

如果使用者可以與元素進行互動(例如,透過觸控或指標裝置),那麼它應該能夠使用鍵盤聚焦。您可以透過為其新增 tabindex=0 屬性值來使其可聚焦。這將把該元素新增到可以透過按 Tab 鍵聚焦的元素列表中,按 HTML 文件中定義的此類元素的順序排列。

另見

可聚焦元素必須具有焦點樣式

任何可以接收鍵盤焦點的元素都應該具有可見的樣式,以指示元素何時獲得焦點。您可以使用 :focus:focus-visible CSS 偽類來實現這一點。

連結和輸入欄位等標準可聚焦元素預設由瀏覽器提供特殊的樣式,因此您可能不需要為這些元素指定焦點樣式,除非您希望焦點樣式更具辨識度。

如果您建立了自己的可聚焦元件,請確保也為它們定義了焦點樣式。

另見