焦點不該憑空消失
10 月 2 日 · 3 分鐘
按下關閉後，焦點要回到打開它的那顆按鈕。少了這一步，鍵盤使用者會被丟回頁面開頭，得重新按十幾次 Tab 才回到原處。
Feed
Demo 與 Accessibility Tree
最新文章
顏色不是唯一的訊息載體
9 月 28 日 · 4 分鐘
紅色邊框表示欄位有錯，但看不出顏色的人只會看到一個普通的輸入框。錯誤訊息要用文字說出來，並與欄位產生程式可判斷的關聯。
Accessibility Tree
觀察對象：外層的文章串流。
元素目前不在無障礙樹中。
Accessibility Tree
觀察對象：第一篇文章。
元素目前不在無障礙樹中。
鍵盤操作
| 按鍵 | 行為 |
|---|---|
| Tab | 逐篇移入文章。文章本身可聚焦，所以每一篇都是一個停留點 —— Feed 是少數該讓非互動元素接收焦點的場合，使用者要的是「跳到下一篇」。 |
| Page Down | 跳到下一篇文章的開頭，不必一路 Tab 過文章內的連結。 |
| Page Up | 跳到上一篇文章的開頭。 |
| Ctrl + End | 跳出整個串流，落在 feed 之後的第一個可聚焦元素，也就是「載入更多」按鈕。 |
| Ctrl + Home | 跳到 feed 之前的第一個可聚焦元素。這個範例的 feed 上方沒有可聚焦元素，所以焦點留在原處。 |
ARIA 屬性
| 屬性 | 值 | 用途 |
|---|---|---|
role | feed | 持有所有文章的容器。feed 與 list 的差別在於內容會持續長出來；這個角色讓輔助科技知道可以用文章為單位瀏覽，而不是把它當成固定長度的清單。 |
aria-labelledby | 可見標題的 id | 串流的名稱。頁面上可能有好幾個 feed（最新、熱門、已追蹤），名稱是使用者唯一分得出來的依據。 |
aria-busy | true / false | 多步驟新增或移除文章的期間設為 true，完成後改回 false。輔助科技在這段期間先按住不報讀，避免使用者聽到半成品。整段包起來，不是每篇切換一次。上方面板的 Status 列只在載入那一秒出現 aria-busy=true —— 值為 false 時螢幕閱讀器什麼都不唸，所以那一列會回到「（無狀態）」。 |
role（文章） | article | 每個內容單元。feed 裡不該有游離在 article 之外的內容 —— 那些內容在以文章為單位瀏覽時會整個被跳過。 |
aria-labelledby（文章） | 文章標題的 id | 每篇文章要有彼此分得出來的名稱。使用者在文章之間跳時聽到的就是這個名稱；全部都叫「文章」的話，跳與不跳沒有差別。 |
aria-describedby（文章） | 文章內文的 id | 指向文章的主要內容。名稱回答「這是哪一篇」，描述讓使用者不必進入文章就能判斷要不要讀。 |
aria-posinset / aria-setsize | 1 / 2 | 這是第幾篇、總共有幾篇。無限捲動時 DOM 裡只有一部分文章，少了這兩個屬性，使用者沒有任何位置感。總數未知時 aria-setsize 設為 -1。 |
tabindex（文章） | 0 | 讓文章可聚焦，Page Down / Page Up 才有落腳點。沒有它，這個 pattern 的鍵盤操作全部失效。 |
WCAG 對應
- 等級 A1.3.1 資訊及關聯性
每篇文章是一個 article，標題與內文分別以 aria-labelledby、aria-describedby 關聯，文章的邊界程式判斷得出來。
- 等級 A2.1.1 鍵盤
Page Down、Page Up 與 Ctrl + End 即可在文章之間與串流之外移動。
- 等級 A2.4.3 焦點順序
新文章接在既有文章之後，焦點留在原處不被搬走，Tab 順序與視覺順序一致。
- 等級 AA4.1.3 狀態訊息
載入期間以 aria-busy 標示，使用者不必把焦點移過去就知道串流正在更新。
APG 規則
- 元件語意
Feed 具有無障礙名稱
Feed 以 aria-labelledby 關聯可見標題；沒有可見標題時，以 aria-label 提供名稱。
- 頁面結構
Feed 內所有內容均位於 role=article 的元素中
Feed 中每個內容單元具有 role=article，且 Feed 內沒有游離在 role=article 的元素外的內容。
- 元件語意
每篇 Feed 文章具有可區分的無障礙名稱
每個 role=article 元素的 aria-labelledby 指向文章內能提供可區辨標籤的內容。
- 頁面結構選做
Feed 文章具有無障礙補充說明，且由主要內容提供
每篇 Feed 文章使用 aria-describedby，指向包含其主要內容並提供無障礙補充說明的一個或多個元素。
- 狀態訊息
Feed 的 aria-busy 正確反映動態更新狀態
多步驟新增或移除文章期間，Feed 設為 aria-busy=true；更新完成後恢復為 aria-busy=false。
- 焦點管理
Feed 依包含焦點的文章進行捲動與更新
在 Feed 文章間移動 DOM 焦點並觸發動態更新，頁面依焦點所在文章進行適當捲動、載入或移除內容，且更新過程不會造成焦點遺失。
- 鍵盤操作選做
Feed 可用 Page Down 移到下一篇文章
Page Down 會將焦點移到下一篇文章。
- 鍵盤操作選做
Feed 可用 Page Up 移到上一篇文章
Page Up 會將焦點移到上一篇文章。
- 鍵盤操作選做
Feed 可用 Control+End 移到 Feed 之後
Control+End 會將焦點移到 Feed 之後的第一個可聚焦元素。
- 鍵盤操作選做
Feed 可用 Control+Home 移到 Feed 之前
Control+Home 會將焦點移到 Feed 之前的第一個可聚焦元素。
- 元件語意選做
Feed 鍵盤操作說明清楚且容易找到
若 Feed 提供 Page Up、Page Down 等自訂操作，頁面上有容易找到且清楚的鍵盤操作說明。
- 焦點管理選做
巢狀 Feed 提供可行的鍵盤進入與離開方式
Feed 含有巢狀 Feed 時，鍵盤使用者可用 Tab 或實作的快捷鍵進入，並能返回外層 Feed，例如以 Control+End 移到外層下一篇文章。若內含元件使用 Feed 導覽鍵，該按鍵先操作元件，使用者可將焦點移出後繼續導覽 Feed。