跳到主要內容

Table

Demo 與 Accessibility Tree

方案比較價格為未稅金額，年繳可另享九折。
方案價格人數上限技術支援
基本免費1 人線上文件
團隊每月 300 元最多 10 人電子郵件
企業另行報價不限專屬客服

Accessibility Tree

觀察對象：表格容器。

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

Accessibility Tree

觀察對象：第一個欄標頭。

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

Accessibility Tree

觀察對象：第一個列標頭。

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

鍵盤操作

按鍵行為
Tab跳過整個表格。靜態表格不接收焦點，表格內沒有互動元件時也不該有停留點 —— 想用方向鍵在儲存格之間移動的是 Grid，那是另一個 pattern。
方向鍵由螢幕閱讀器的表格瀏覽模式提供（例如 NVDA 的 Ctrl + Alt + 方向鍵），逐格移動並報讀對應的標頭。這是輔助科技的功能，不需要頁面自己實作。

ARIA 屬性

屬性值用途
roletable原生 <table> 的隱含角色就是 table，不需要明寫。只有在用 div 排版硬做表格時才需要補上 role=table、row、columnheader、cell —— 那等於重建整棵樹，沒有理由這麼做。
scopecol / row告訴瀏覽器這個 <th> 管的是一整欄還是一整列，計算出的角色分別是 columnheader 與 rowheader。少了它，簡單表格瀏覽器還猜得到，複雜表格就會對錯標頭。
aria-labelledbycaption 內標題的 id表格的無障礙名稱。<caption> 本身就是名稱來源，但這個 caption 裡還放了補充說明；不明寫的話整段都會被當成名稱唸出來。
aria-describedby補充說明的 id名稱之後補充播報的說明。名稱回答「這是什麼表格」，描述回答「讀這張表前要知道什麼」—— 價格未稅這件事屬於後者。

WCAG 對應

  • 等級 A1.3.1 資訊及關聯性

    用原生 <table> 與 <th scope>，每個儲存格與它的欄標頭、列標頭產生程式可判斷的關聯，而不只是視覺上對齊。

  • 等級 AA2.4.6 標題及標籤

    表格有可見標題「方案比較」，並以 aria-labelledby 成為它的無障礙名稱。

  • 等級 AA1.4.10 重新排列

    表格無法再窄時在自己的容器內水平捲動，頁面本身不會出現橫向捲軸。

APG 規則

  • 頁面結構

    表格容器具有 table 角色語意

    表格容器具有 role=table 或原生 HTML table 語意。

  • 元件語意

    表格具有無障礙名稱

    表格以 aria-labelledby 關聯可見標題；沒有可見標題時，以 aria-label 提供名稱。

  • 頁面結構

    表格具有無障礙補充說明，且由標題或補充說明提供

    若表格有標題或補充說明，aria-describedby 指向包含該內容的元素。

  • 頁面結構

    表格維持靜態表格結構

    表格不實作為互動式複合元件；其儲存格不會只為了表格導覽而設為可聚焦或可選取。

  • 焦點管理

    靜態表格內的互動元件維持個別 Tab 停駐點

    靜態表格內的每個互動元件都是頁面 Tab 順序中的獨立停駐點；若因此造成過長且不實用的 Tab 順序，則改用互動式 Grid Pattern。