互動式資料表格親和力

[muan]

1. 常見表單中的修改、刪除動作的 actions column 並不該始 tabular data 的一部分？WCAG 有 guideline 嗎？

url	actions
https://pdis.nat.gov.tw	edit delete

2. 互動式表單在篩選之後有需要用 aria-live 通知使用者嗎？table 本身即有行數宣告。我們可以用什麼樣的 ARIA relationship 去連結他們嗎？若要做出 aria-live 的話可能會必須做分開的元件畢竟我記得 aria-live elements 是在頁面讀取時被註冊的，dynamically added 元件在某些輔助科技中不會被報讀。

[JediLin]

1. 關於資料表格的操作動作（修改、刪除）放在列中，我想了幾遍後覺得其實沒有不好，WCAG 中也沒有哪一條 SC 可以用來反對這個做法。反而是怎麼做得好會有挑戰，因為雖然多數人可以從表格內容判斷出來這些操作動作是對同列或同欄的資料操作，但是缺少程式可判斷的關聯性。

對於 screen reader，我的想像是可以用 aria-describedby，如下：

<table>
  <tr><th scope="col" id="id">短網址 ID</th><th scope="col">原始網址</th><th scope="col">管理操作</th></tr>
  <tr><th scope="row" id="a1b2">a1b2</th><td>https://pdis.nat.gov.tw</td><td><a href="#" aria-describedby="id a1b2">編輯</a> / <a href="#" aria-describedby="id a1b2">刪除</a></td></tr>
  <tr><th scope="row" id="c3d4">c3d4</th><td>https://test.pdis.run</td><td><a href="#" aria-describedby="id c3d4">編輯</a> / <a href="#" aria-describedby="id c3d4">刪除</a></td></tr>
</table>

不過如果要顧慮到語音操控，也很難處理。我覺得使用者看到這一欄都是編輯跟刪除，會直接用「顯示號碼」的方式來操作吧，尤其當表格很寬、導致一個畫面內無法容納列標頭跟列末的操作功能時，很難知道要念什麼。

2. 我的想像是在表格的 <caption> 裡面塞 aria-live="polite"。例如未篩選的表格是：

<table>
  <caption aria-live="polite">您建立的短網址<span id="filter"></span></caption>
</table>

而篩選後變成：

<table>
  <caption aria-live="polite">您建立的短網址<span id="filter">（只顯示符合指定條件的項目）</span></caption>
</table>

也就是只要讓使用者知道表格內容已經按照篩選條件更新，不是要把「表格更新後的內容」變成 live-region。

[muan]

GovUK 只有 dl 有編輯刪除在 dd 內 https://design-system.service.gov.uk/components/summary-list/
table 沒有提供這樣的範例 https://design-system.service.gov.uk/components/table/