如何讓螢幕報讀軟體正確報讀表格資訊!
- 點閱:11948
- 資料來源:
- 日期:107-03-28
一般的使用者大多直接將已經在文書編輯軟體中製作好的表格複製然後在網站後臺編輯器貼上,目前的編輯器會自動編譯成HTML語法,但不具有行列標題的架構內容,在此情況下,如果沒有再去調整HTML的表格架構,將讓螢幕報讀軟體無法讀出表格內儲存格之間的相對關係。
用以下表格的例子,來比較一下有沒有行列標題,對於螢幕報讀軟體的報讀會造成甚麼樣的差異。
範例1:沒有行列表標題| 範例二:在表格中加入表格標題與行列標題|
公司 | 第1季營收 | 第2季營收 | 第3季營收 | 第4季營收 |
綠公司 | 500 | 1000 | 2000 | 5000 |
藍公司 | 3000 | 500 | 500 | 1000 |
白公司 | 500 | 500 | 800 | 500 |
原始碼如下:
<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 |
以上報讀的內容,使用者可能聽到很多欄與數字,很難將營收數字對應到是哪一季的營收表現。
公司 | 第1季營收 | 第2季營收 | 第3季營收 | 第4季營收 |
---|---|---|---|---|
綠公司 | 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 |
加入表格標題與行列標題之後,列標題的公司名稱可以對應到欄標題的各季營收與數字,以上的報讀內容讓使用者更容易理解!
表格應該要加入行列標題,是網站無障礙規範的必要條件。
網站開發人員最好是修改後臺編輯器,讓使用者在上稿有表格的內容時,直接使用編輯器的表格功能,而不是從文書編輯軟體中複製貼上製作好的表格,可參考CKEditor(另開新視窗)|。如果沒有要改後臺編輯器,但編輯器有原始碼介面,可透過此網站:html的表格產生器(另開新視窗)|,上傳表格資料CSV檔產生表格原始碼,複製起來貼到編輯器的原始碼介面,以解決自行上稿表格的問題,不過此網址不支援中文,因此還是需要再手動調整原始碼中文亂碼的部分。