跳到主要內容
:::|

如何讓螢幕報讀軟體正確報讀表格資訊!

  • 點閱:2134
  • 資料來源:
  • 日期:107-03-28

一般的使用者大多直接將已經在文書編輯軟體中製作好的表格複製然後在網站後臺編輯器貼上,目前的編輯器會自動編譯成HTML語法,但不具有行列標題的架構內容,在此情況下,如果沒有再去調整HTML的表格架構,將讓螢幕報讀軟體無法讀出表格內儲存格之間的相對關係。

用以下表格的例子,來比較一下有沒有行列標題,對於螢幕報讀軟體的報讀會造成甚麼樣的差異。

範例1:沒有行列表標題|    範例二:在表格中加入表格標題與行列標題|

範例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

以上報讀的內容,使用者可能聽到很多欄與數字,很難將營收數字對應到是哪一季的營收表現。

範例2:在表格中加入表格標題與行列標題|

綠藍白三家公司營收表
公司 第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|。如果沒有要改後臺編輯器,但編輯器有原始碼介面,可透過此網址:http://adamwills.github.io/csv-accessible-table/|,上傳表格資料CSV檔產生表格原始碼,複製起來貼到編輯器的原始碼介面,以解決自行上稿表格的問題,不過此網址不支援中文,因此還是需要再手動調整原始碼中文亂碼的部分。

上一頁| 回首頁