國家通訊傳播委員會無障礙網路空間服務網

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

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

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

範例1：沒有行列標題|

原始碼如下：

  <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)的報讀內容如下：

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

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

原始碼如下：
<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)的報讀內容如下：

加入表格標題與行列標題之後，列標題的公司名稱可以對應到欄標題的各季營收與數字，以上的報讀內容讓使用者更容易理解！

表格應該要加入行列標題，是網站無障礙規範的必要條件。

網站開發人員最好是修改後臺編輯器，讓使用者在上稿有表格的內容時，直接使用編輯器的表格功能，而不是從文書編輯軟體中複製貼上製作好的表格，可參考CKEditor(另開新視窗)|。如果沒有要改後臺編輯器，但編輯器有原始碼介面，可透過此網站：html的表格產生器(另開新視窗)|，上傳表格資料CSV檔產生表格原始碼，複製起來貼到編輯器的原始碼介面，以解決自行上稿表格的問題，不過此網址不支援中文，因此還是需要再手動調整原始碼中文亂碼的部分。