Grid

Demo 與 Accessibility Tree

共用檔案

以方向鍵移動，按空白鍵選取整列。

檔案名稱	擁有者	最後更新
無障礙檢測報告.pdf	設計組	10 月 9 日
元件規格.xlsx	前端組	10 月 6 日
使用者訪談逐字稿.docx	研究組	9 月 30 日

Accessibility Tree

觀察對象：Grid 容器。

元素目前不在無障礙樹中。

Accessibility Tree

觀察對象：目前可聚焦的儲存格。

元素目前不在無障礙樹中。

Accessibility Tree

觀察對象：第一個被選取的列。下列是操作之後會量到的值。

Role: row
Status: aria-selected=true
Name: 無障礙檢測報告.pdf 設計組 10 月 9 日
Description: （無 accessible description）

鍵盤操作

按鍵	行為
`Tab`	移入與移出整個 Grid。不論幾列幾欄，整個表格只佔一個停留點 —— 九格資料若各佔一個停留點，鍵盤使用者光是經過這張表就得按九次。
`← / → / ↑ / ↓`	在儲存格之間逐格移動。標頭列也走得到，使用者才能回頭確認欄位名稱。到邊界就停住，不繞到下一列。
`Home / End`	移到目前這一列的第一格或最後一格。
`Ctrl + Home / Ctrl + End`	移到整個 Grid 的第一格或最後一格。
`Space`	選取或取消選取焦點所在的整列。焦點不會移動 —— 選取與移動是兩件事。

ARIA 屬性

屬性	值	用途
`role`	`grid`	原生 <table> 的隱含角色是 table，必須明寫 grid 才換成互動語意。換過去之後螢幕閱讀器會把方向鍵交還給頁面，它自己的表格瀏覽模式就不再接管 —— 所以方向鍵一定要自己實作，不能只改角色。
`aria-labelledby`	`可見標題的 id`	Grid 的名稱，指向可見標題「共用檔案」。
`aria-describedby`	`操作說明的 id`	名稱之後補充播報的說明。Grid 的操作方式與一般表格不同，這句話讓使用者知道該按方向鍵而不是 Tab。
`role（列與儲存格）`	`row / columnheader / gridcell`	Grid 內的結構角色。用原生 <tr>、<th>、<td> 時瀏覽器會映射成這些角色，這裡明寫是為了讓結構一眼看得出來。
`aria-selected`	`true / false`	選取狀態。這個 Grid 的選取單位是一整列，所以放在 <tr> 上。若選取單位是儲存格就放在儲存格上；選取整欄時，該欄的每一格都要標。
`aria-readonly`	`（不使用）`	這個 Grid 沒有編輯功能，所以不標。標上去反而是錯的訊息 —— 它的意思是「這裡本來可以編輯，但現在不行」，而不是「這張表是唯讀資料」。可編輯的 Grid 才用它，而且只標在禁止編輯的那些儲存格上。
`tabindex`	`0 / -1`	roving tabindex：只有一格是 0，其餘都是 -1。移動焦點時換掉那個 0，Tab 才會只停一次。

WCAG 對應

等級 A1.3.1 資訊及關聯性
用原生表格元素搭配 scope，每個儲存格與它的欄標頭產生程式可判斷的關聯。
等級 A2.1.1 鍵盤
移動與選取都能只用鍵盤完成。
等級 A2.4.3 焦點順序
整個 Grid 只佔一個 Tab 停留點，內部移動交給方向鍵。
等級 AA2.4.7 焦點可見
聚焦的儲存格有橘色內嵌外框，與選取列的淺綠底色分得出來。
等級 A4.1.2 名稱、角色、值
Grid 有名稱與補充說明，列與儲存格各有正確角色，選取狀態以 aria-selected 表達。

APG 規則

頁面結構
Grid 容器具有 grid 角色語意
互動式 Grid 容器具有 role=grid；若以 HTML table 實作 Grid，仍須在 table 元素設定 role=grid。
元件語意
Grid 具有無障礙名稱
Grid 以 aria-labelledby 關聯可見標題；沒有可見標題時，以 aria-label 提供名稱。
頁面結構
Grid 具有無障礙補充說明，且由標題或補充說明提供
若 Grid 有標題或補充說明，aria-describedby 指向包含該內容的元素。
元件語意
Grid 正確呈現選取狀態
選取儲存格、列或欄時，已選取的儲存格或列具有 aria-selected=true；選取整欄時，該欄的每個儲存格都具有 aria-selected=true。
元件語意
Grid 正確省略或呈現唯讀狀態
沒有編輯功能的 Grid 不使用 aria-readonly；可編輯 Grid 若使用此屬性，只在禁止編輯的儲存格設為 true，全部唯讀時才可設在整個 Grid。
焦點管理
Grid 在頁面 Tab 順序中只有一個進入點
使用 Tab 導覽頁面時，整個 Grid 同一時間只有一個內部元素位於頁面 Tab 順序。
鍵盤操作
Grid 儲存格內容可由鍵盤到達
每個資料儲存格本身可聚焦，或包含可聚焦元素；非互動式的列標題與欄標題不必設為可聚焦。
鍵盤操作
Data Grid 支援向左鍵與向右鍵逐格移動
在 Data Grid 內按向左鍵與向右鍵時，焦點逐格水平移動；到達每列最左格或最右格時不再移動。
鍵盤操作
Data Grid 支援向上鍵與向下鍵逐格移動
在 Data Grid 內按向上鍵與向下鍵時，焦點逐格垂直移動；到達每欄最上格或最下格時不再移動。
鍵盤操作
Data Grid 支援 Page Up 與 Page Down 導覽
在 Data Grid 內按 Page Up 與 Page Down 時，焦點依設計跨多列移動；到達第一列或最後一列時不再移動。
鍵盤操作
Data Grid 的 Home 與 End 移到目前列首尾
在 Data Grid 任一儲存格按 Home 與 End 時，焦點分別移至目前列的第一格與最後一格。
鍵盤操作
Data Grid 的 Control+Home 與 Control+End 移到整體首尾
在 Data Grid 任一儲存格按 Control+Home 與 Control+End 時，焦點分別移至第一列第一格與目前已載入範圍的最後一格。
鍵盤操作
Layout Grid 支援向左鍵與向右鍵逐格移動
在 Layout Grid 內按向左鍵與向右鍵時，焦點依對應方向逐格水平移動；若支援換列，移動順序須符合可預期的閱讀順序，否則到達 Grid 邊界時不再移動。
鍵盤操作
Layout Grid 支援向上鍵與向下鍵逐格移動
在 Layout Grid 內按向上鍵與向下鍵時，焦點依對應方向逐格垂直移動；若支援換欄，移動順序須符合可預期的閱讀順序，否則到達 Grid 邊界時不再移動。
鍵盤操作選做
Layout Grid 支援 Page Up 與 Page Down 導覽
在 Layout Grid 內按 Page Up 與 Page Down 時，焦點依設計跨多列移動；到達第一列或最後一列時不再移動。
鍵盤操作
Layout Grid 的 Home 與 End 移到合理的列首尾
在 Layout Grid 內按 Home 與 End 將焦點移至目前列的第一格與最後一格；在支援的單欄或短列版面中，也可移至 Grid 的第一格與最後一格。
鍵盤操作選做
Layout Grid 支援 Control+Home 與 Control+End
在 Layout Grid 內按 Control+Home 與 Control+End 時，焦點分別移至第一格與最後一格。
鍵盤操作選做
Grid 選取快捷鍵會依預期更新選取範圍
若 Grid 提供選取快捷鍵，Control+Space 選取焦點所在欄、Shift+Space 選取焦點所在列、Control+A 選取全部儲存格，Shift 加方向鍵則向該方向延伸一格選取範圍，過程中不會意外失去焦點。
鍵盤操作
Grid 可用 Enter 或 F2 進入儲存格互動模式
儲存格含有可編輯內容或需要 Grid 導覽鍵的元件時，Enter 或 F2 將焦點移入編輯欄位或第一個元件並停用 Grid 導覽；再按 F2 會恢復 Grid 導覽。單行編輯欄位再按 Enter 時，會恢復 Grid 導覽或移到相鄰儲存格的輸入欄位。
鍵盤操作選做
Grid 可由輸入字元開始編輯儲存格
在可編輯儲存格中輸入英數字元時，焦點移至其輸入欄位並輸入該字元。
鍵盤操作
Grid 可用 Escape 回復逐格導覽
Grid 導覽因儲存格互動而停用時，按下 Escape 會恢復 Grid 導覽。
鍵盤操作
Grid 儲存格內的元件可由鍵盤操作
在儲存格互動模式中，若儲存格含多個元件，向右鍵或向下鍵移到下一個元件，向左鍵或向上鍵移到上一個元件，並可選擇循環；否則方向鍵交由目前元件處理。Tab 與 Shift+Tab 移到下一個及上一個元件，並可選擇在儲存格或 Grid 內循環。
焦點管理選做
Grid 導覽直接聚焦不使用方向鍵的單一元件
Grid 儲存格只有一個不以方向鍵操作的可聚焦元件（如連結或按鈕）時，使用方向鍵進入該格會直接聚焦該元件。
焦點管理選做
Grid 導覽聚焦僅含文字或單一圖像的儲存格
Grid 儲存格僅含文字或單一圖像時，gridcell 本身可取得焦點。