無障礙網頁檢測培訓課程

第八章 表格

表格

說明

表格用來有架構的呈現資訊,通常用於可歸納的資料上。

針對整個表格,可以有表格的標題與摘要,用來補充表格的資訊。

表格的內容則由表頭與資料欄列所組成。

橫向的表格會有欄標題與資料列,而直向的表格則有列標題與資料欄。

通常直向的表格只會有一筆資料,而多筆資料則採橫向表格設計以避免滑鼠水平移動,進而造成二維滾動的障礙。

我們會說「文不如表」,就表示能夠歸納資料以表格方式來呈現會讓人更快速的理解,對於數據的統計也比較可以用有結構的方式顯示。

以上都是資料表格帶給我們的便利。但有些舊式網站會利用表格整齊的對齊特性來當作網頁畫面的排版工具,這又是一個沒有按照語意標籤來設計網頁的錯誤範例。

這對於導讀軟體瀏覽網站時,產生了不良的影響 。例如朗讀多餘的欄列資訊等。

若想要做網頁排版,應該使用樣式語言,如 css 等,不建議使用表格標籤來進行排版,這就是所謂的排版表格。

表格設計得當,可以幫助使用者有系統的了解資訊,但如果誤用,可能就會帶來閱讀困擾。

操作

  1. 利用 NVDA 的單鍵瀏覽 t 可直接跳至表格
  2. 表格瀏覽

注意:使用表格欄列移動快速鍵時,有時會不小心將畫面旋轉,此時請至桌面空白處按滑鼠右鍵進行畫面調整。 也可以關閉 NVDA 後,使用 control + alt + 方向鍵 進行調整。

態樣

設定

  1. 朗讀表格欄列資訊
  2. 朗讀表格欄列標題對應

原碼範例

編號 1 原始資料表格
原碼
<table> 
    <thead>
        <tr> 
            <th> 姓名 </th> 
            <th> 身高 </th> 
            <th> 體重 </th> 
        </tr> 
    </thead>
    <tbody>
        <tr> 
            <td> 小明 </td>
            <td> 170 </td>
            <td> 60 </td>
        </tr> 
        <tr> 
            <td> 小美 </td> 
            <td> 160 </td> 
            <td> 48 </td> 
        </tr> 
    </tbody>
</table>
範例 1 原始資料表格
補充
  1. 有些表格會把 thead, tbody 與 tfoot 省略,讓瀏覽器自由解讀會比較不保險
  2. 希望 NVDA 對表格欄列標題對應朗讀,需開啟文件格式之相關設定
編號 2 加上標題標籤與摘要屬性
原碼
<table summary="本表格用於呈現本班的身高體重資訊">
    <caption> 身高體重統計表 </caption> 
    <thead>
        <tr> 
            <th> 姓名 </th> 
            <th> 身高 </th> 
            <th> 體重 </th> 
        </tr> 
    </thead>
    <tbody>
        <tr> 
            <td> 小明 </td>
            <td> 170 </td>
            <td> 60 </td>
        </tr> 
        <tr> 
            <td> 小美 </td> 
            <td> 160 </td> 
            <td> 48 </td> 
        </tr> 
    </tbody>
</table>
範例 2 加上標題標籤與摘要屬性
補充

因為 summary 屬性廢棄了,所以使用 chrome 時,當表格有 caption 與 summary 只會朗讀 caption,但若表格只有 summary 屬性而無 caption 時,仍會朗讀 summary 內容

編號 3 加上標題標籤與摘要標籤
原碼
<table>
    <caption> 身高體重統計表 </caption> 
    <summary>本表格用於呈現本班的身高體重資訊</summary>
    <thead>
        <tr> 
            <th> 姓名 </th> 
            <th> 身高 </th> 
            <th> 體重 </th> 
        </tr> 
    </thead>
    <tbody>
        <tr> 
            <td> 小明 </td>
            <td> 170 </td>
            <td> 60 </td>
        </tr> 
        <tr> 
            <td> 小美 </td> 
            <td> 160 </td> 
            <td> 48 </td> 
        </tr> 
    </tbody>
</table>
範例 3 加上標題標籤與摘要標籤
補充
  1. firefox 在摘要處會有一個按鈕屬性
  2. chrome 看起來是有項目符號較為正常
編號 4 欄列標題未使用 th 標籤
原碼
<table> 
    <thead>
        <tr> 
            <td> 姓名 </td> 
            <td> 身高 </td> 
            <td> 體重 </td> 
        </tr> 
    </thead>
    <tbody>
        <tr> 
            <td> 小明 </td>
            <td> 170 </td>
            <td> 60 </td>
        </tr> 
        <tr> 
            <td> 小美 </td> 
            <td> 160 </td> 
            <td> 48 </td> 
        </tr> 
    </tbody>
</table>
範例 4 欄列標題未使用 th 標籤
補充

未使用 th 就表示沒有表格欄列標題,這是不符合規範的語法

編號 5 有 tfoot 的表格
原碼
<table> 
    <thead>
        <tr> 
            <th> 姓名 </th> 
            <th> 身高 </th> 
            <th> 體重 </th> 
        </tr> 
    </thead>
    <tbody>
        <tr> 
            <td> 小明 </td>
            <td> 170 </td>
            <td> 60 </td>
        </tr> 
        <tr> 
            <td> 小美 </td> 
            <td> 160 </td> 
            <td> 48 </td> 
        </tr> 
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">
                共有2筆資料
            </td>
        </tr>
    </tfoot>
</table>
範例 5 有 tfoot 的表格
補充
  1. tfoot 非必要
  2. tfoot 還是會去對應第一欄的標題,這部分與導讀軟體的實作有關,不算是障礙
編號 6 複雜表格的欄列標題對應
原碼
<table> 
    <thead>
        <tr>
            <th rowspan="2"> 姓名 </th>
            <th colspan="2"> 個資 </th>
            <th colspan="2"> 科目 </th>
        </tr>
        <tr> 
            <th> 身高 </th> 
            <th> 體重 </th> 
            <th> 數學 </th> 
            <th> 英文 </th> 
        </tr> 
    </thead>
    <tbody>
        <tr>
            <td> 小明 </td>
            <td> 170 </td>
            <td> 60 </td>
            <td> 90 </td>
            <td> 0 </td>
        </tr> 
        <tr> 
            <td> 小美 </td> 
            <td> 160 </td> 
            <td> 48 </td> 
            <td> 100 </td> 
            <td> 10 </td> 
        </tr> 
    </tbody>
    <tfoot>
        <tr>
            <td colspan="5">
                共有2筆資料
            </td>
        </tr>
    </tfoot>
</table>
範例 6 複雜表格的欄列標題對應
補充

更複雜的表格,可能需要使用 scope 或 headers 屬性來強制對應指定欄位標題

編號 7 用 headers 屬性指定表格對應欄位標題
原碼
<table> 
    <thead>
        <tr> 
            <th id="e1"> name </th> 
            <th id="e2"> hight </th> 
            <th id="e3"> weight </th> 
        </tr> 
        <tr> 
            <th> 姓名 </th> 
            <th> 身高 </th> 
            <th> 體重 </th> 
        </tr> 
    </thead>
    <tbody>
        <tr> 
            <td headers="e1"> David </td>
            <td headers="e2"> 170 </td>
            <td headers="e3"> 60 </td>
        </tr> 
        <tr> 
            <td> 小美 </td> 
            <td> 160 </td> 
            <td> 48 </td> 
        </tr> 
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">
                共有2筆資料
            </td>
        </tr>
    </tfoot>
</table>
範例 7 用 headers 屬性指定表格對應欄位標題
補充
  1. 可惜 NVDA 搭配 chrome 時沒有效果,目前使用 firefox 是可以對應指定欄位標題
  2. 將第3列指定對應第1列的標題
  3. 不指定時,第4列會對應 thead 內的兩列 th 標題
編號 8 直向表格
原碼
<table>
    <tr>
        <th>標題一</th>
        <td>內容一</td>
    </tr>
    <tr>
        <th>標題二</th>
        <td>內容二</td>
    </tr>
    <tr>
        <th>標題三</th>
        <td>內容三</td>
    </tr>
</table>
範例 8 直向表格
補充

直向表格無法使用 thead 與 tbody

編號 9 使用 div 標籤製作表格
原碼
直接看範例效果
範例 9 使用 div 標籤製作表格
補充
  1. 需要搭配大量 aria 相關無障礙屬性才能讓導讀軟體認得表格相關屬性與操作
  2. 因為考慮所有導讀軟體與瀏覽器的支援度,原則上還是會建議表格使用 table 標籤來進行開發,若實在沒辦法才準許使用其他標籤並搭配上述相關設計方式以符合無障礙之需求
編號 10 排版表格
原碼
<table>
    <tr>
        <td> 1. 早睡早起身體好 </td>
        <td> 2. 早起的鳥兒有蟲吃 </td>
    </tr>
</table>
範例 10 排版表格
補充
  1. 不建議使用表格標籤來進行排版,但 2.1 的規範找不到相關條文來抓
  2. 若想要看到排版表格的表格屬性,需要勾選以下設定
編號 11 直向+橫向標題表格
原碼
<table> 
    <thead>
        <tr> 
            <th>  </th> 
            <th> 星期一 </th> 
            <th> 星期二 </th> 
        </tr> 
    </thead>
    <tbody>
        <tr> 
            <th> 1號 </td>
            <td> 上班 </td>
            <td> 放假 </td>
        </tr> 
        <tr> 
            <th> 2號 </td> 
            <td> 出差 </td> 
            <td> 居家 </td> 
        </tr> 
    </tbody>
</table>
範例 11 直向+橫向標題表格
補充
  1. 表格瀏覽左右移動時能夠對應最上面第一行橫排標題
  2. 表格瀏覽上下移動時能夠對應最左邊第一直排標題

規範

  1. HM1130107E 使用表格標記來呈現表格資訊
  2. HM1130108E 以有意義的標記來提供資料表格的概觀
  3. HM1130109E 以有意義的標記來建立表格標題與資料表格的關連
  4. HM1130110E 對於複雜表格,以有意義的標記來建立表格標頭儲存格與資料儲存格之間的關連
  5. GN2141005E 在內容內提供選項以切換到不需要用戶水平滾動以閱讀文字行的佈局

實測

  1. 司法院全球資訊網 表格中的表格
  2. 臺灣企銀 表格瀏覽有問題
  3. 內政部警政署保安警察第一總隊 正規表格瀏覽
  4. 衛武營 用div實做表格
  5. 臺灣銀行 表格標題跨欄列設計
  6. 臺灣銀行 表格內容跨欄列設計
  7. 臺灣證券交易所 表格跨欄列設計
  8. 親子天下 行事曆表格
  9. 華文視障電子圖書網 整個網站使用表格來排版
  10. 高鐵時刻表 查詢時刻表結果