日前接到一位網站開發者有點無奈的心聲，故事是這樣的，他公司幫客戶建置完成了一個網站，並且也符合通過無障礙認證標章，但之後在例行的網站無障礙檢查中，發現網站內的表格設計不符合無障礙規範，而這些是客戶網站管理人員使用網站管理後臺系統自行編輯上稿的表格內容，一般的使用者大多直接將已經在文書編輯軟體中製作好的表格複製然後在網站後臺編輯器貼上，目前的編輯器會自動編譯成HTML語法，但不具有行列標題的架構內容，在此情況下，如果沒有再去調整HTML的表格架構，將讓螢幕報讀軟體無法讀出表格內儲存格之間的相對關係。
用以下表格的例子，來比較一下有沒有行列標題，對於螢幕報讀軟體的報讀會造成甚麼樣的差異。
範例1：沒有行列標題
| 公司 |
第一季營收 |
第二季營收 |
第三季營收 |
第四季營收 |
| 綠公司 |
500 |
1000 |
2000 |
5000 |
| 藍公司 |
3000 |
500 |
500 |
1000 |
| 白公司 |
500 |
500 |
800 |
500 |
<table>
<tbody>
<tr>
<td>公司</td>
<td>第1季營收</td>
<td>第2季營收</td>
<td>第3季營收</td>
<td>第4季營收</td>
</tr>
<tr>
<td>綠公司</td>
<td>500</td>
<td>1000</td>
<td>2000</td>
<td>5000</td>
</tr>
<tr>
<td>藍公司</td>
<td>3000</td>
<td>500</td>
<td>500</td>
<td>1000</td>
</tr>
<tr>
<td>白公司</td>
<td>500</td>
<td>500</td>
<td>800</td>
<td>500</td>
</tr>
</tbody>
</table>
螢幕報讀軟體(使用NVDA)的報讀內容如下：
|
表格 有4列5欄
1列 1欄
公司
2欄
第1季營收
3欄
第2季營收
4欄
第3季營收
5欄
第4季營收
2列 1欄
綠公司
2欄
500
3欄
1000
4欄
2000
5欄
5000
3列 1欄
藍公司
2欄
3000
3欄
500
4欄
500
5欄
1000
4列 1欄
白公司
2欄
500
3欄
500
4欄
800
5欄
500
|
以上報讀的內容，使用者可能聽到很多欄與數字，很難將營收數字對應到是哪一季的營收表現。
範例2：在表格中加入表格標題與行列標題
綠藍白三家公司營收表
| 公司 |
第一季營收 |
第二季營收 |
第三季營收 |
第四季營收 |
| 綠公司 |
500 |
1000 |
2000 |
5000 |
| 藍公司 |
3000 |
500 |
500 |
1000 |
| 白公司 |
500 |
500 |
800 |
500 |
<table>
<caption>綠藍白三家公司營收表</caption>
<thead>
<tr>
<th scope="col">公司</th>
<th scope="col">第1季營收</th>
<th scope="col">第2季營收</th>
<th scope="col">第3季營收</th>
<th scope="col">第4季營收</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">綠公司</th>
<td>500</td>
<td>1000</td>
<td>2000</td>
<td>5000</td>
</tr>
<tr>
<th scope="row">藍公司</th>
<td>3000</td>
<td>500</td>
<td>500</td>
<td>1000</td>
</tr>
<tr>
<th scope="row">白公司</th>
<td>500</td>
<td>500</td>
<td>800</td>
<td>500</td>
</tr>
</tbody>
</table>
螢幕報讀軟體(使用NVDA)的報讀內容如下：
|
綠藍白三家公司營收表 表格 有4列5欄
綠藍白三家公司營收表
1列 1欄
公司
2欄
第1季營收
3欄
第2季營收
4欄
第3季營收
5欄
第4季營收
2列 1欄
綠公司
第1季營收 2欄
500
第2季營收 3欄
1000
第3季營收 4欄
2000
第4季營收 5欄
5000
3列 1欄
藍公司
第1季營收 2欄
3000
第2季營收 3欄
500
第3季營收 4欄
500
第4季營收 5欄
1000
4列 1欄
白公司
第1季營收 2欄
500
第2季營收 3欄
500
第3季營收 4欄
800
第4季營收 5欄
500
|
加入表格標題與行列標題之後，列標題的公司名稱可以對應到欄標題的各季營收與數字，以上的報讀內容是不是讓使用者更容易理解了呢！
答案當然是如此，表格應該要加入行列標題，所以這是網站無障礙規範的必要條件。但是一開始提到的網站開發人員的無奈還是沒解決，因為後來網站內容的維護是由客戶自行維護，他不知道甚麼時候會網站再冒出表格的內容，而客戶上稿時可能不會再去調整HTML或者不熟悉如何調整或者調整的不正確，在這種情況下，網站開發人員最好是修改後臺編輯器，讓客戶在上稿有表格的內容時，直接使用編輯器的表格功能，而不是從文書編輯軟體中複製貼上製作好的表格，可參考CKEditor。如果客戶沒有要改後臺編輯器，而目前的編輯器有原始碼介面，可透過此網址：http://adamwills.github.io/csv-accessible-table/，由既有的試算表存成CSV檔來產生表格原始碼，複製起來貼到編輯器的原始碼介面，以解決客戶自行上稿表格的問題，不過此網址不支援中文，因此還是需要再手動調整原始碼中文亂碼的部分。