一塊設計 | apo design - 設計共筆部落格
  • 關於我們
    • 團隊花絮
  • UI/UX
    • UI / UX 設計
    • 工具分享
  • 美感養成
  • 設計職涯
  • 設計生活提案
    • 展覽 / 活動分享
    • 設計選書
訂閱我們
一塊設計 | apo design - 設計共筆部落格
  • 關於我們
    • 團隊花絮
  • UI/UX
    • UI / UX 設計
    • 工具分享
  • 美感養成
  • 設計職涯
  • 設計生活提案
    • 展覽 / 活動分享
    • 設計選書
訂閱我們
沒有結果
檢視所有結果
一塊設計 | apo design - 設計共筆部落格
沒有結果
檢視所有結果
Home UI / UX 設計

漫談無障礙網頁設計-5

in UI / UX 設計
by Judy Shyu
10 月 12,2022
9 min read

內容目錄

  • 表格的使用
    • 1. Data Table 資料表格
      • A. 正確使用 <tr> 、 <th> 、 <td>
      • B. 加入<caption> (和摘要 summary)
      • C. 加入 <tbody> 、 <thead> 、 <tfoot>
      • D. 加入屬性
      • E. 優化複雜表格
    • 2. Layout Table 排版表格
    • 3. 模擬表格

上一篇文章最後提到表格使用的 HTML tag <table>,實務上 <table> 可說是應用方式相對複雜一種元件類型,因此這裡會再花一點篇幅來深入說明。

表格的使用

網際網路剛推出,網站內容還沒有這麼多豐富變化,甚至 CSS 還沒推出之前[1],<table> 是用來形塑網站結構的主要工具,有接觸過 Frontpage 、 Dreamweaver 等工具的讀者大概都不陌生,過去網站所有的內容可以用一層一層的 table 架構完畢(現存的經典案例必須要提 阿部寬的官網 XD)。

如果有在處理 EDM (Electronic Direct Mail,也就是電子報),也不可避免需要大量使用 <table> 。這是因為 email 的用戶端非常多── Outlook 就有好幾版,iOS、iPadOS、Apple Mail、Yahoo! Mail、Gmail……族繁不及備載,而這些用戶端對 HTML、CSS 的支援度幾乎都比瀏覽器差,針對 email 甚至有一個獨立的 Can I email… 網站,可見一斑。

語義化 HTML tag 在 email 用戶端的支援度(2022年9月)
語義化 HTML tag 在 email 用戶端的支援度(2022年9月)

從上圖可以看到幾個主流用戶端對語義化 HTML tag 的支援度都未臻完整,更別提右邊畫面外還有超過十個以上的其他用戶端支援度參差不一。

說了這麼多,就是要表達瞭解如何使用 <table> 也是很重要的!關於表格,有三種常見的使用情境:

  1. Data Table 資料表格
    • 使用 <table> 的 HTML 結構來呈現二維資料,即原生的寫法。
  2. Layout Table 排版表格
    • 因為排版需求,用 <table> 來排版,實際內容並非表格資料;如上面提到 EDM、維護更新古早網站或任何用 <table> 切版較快的情形。
  3. 模擬表格
    • 與資料表格接近,有表格的外觀和二維特性,但用 <div> 或 <ul> 、 <li> 搭配 CSS 來呈現表格資料。

下面分別介紹這三種情境的實作方式:

1. Data Table 資料表格

上一篇有提到語義化表格會使用到的 HTML tag:

  • <table>
  • <caption>
  • <tbody> 、 <thead> 、 <tfoot>
  • <tr>
  • <th>
  • <td>

一個完整使用到所有結構的表格大概會像這裡的範例一:

如果已經有一定的 HTML 基礎,應該都對如何使用表格結構不陌生,初學者則可以漸進式地加強你的表格結構:

A. 正確使用 <tr> 、 <th> 、 <td>

<tr> 代表的是 table row,<th> 代表的是 table header,<td> 則是 table data 。表格是二維的資料呈現方式,基本的表格由橫向的 row 和直行的 column 構成,橫向的 row 由 <tr> 來表示,而表格的每格單位則由 <th> 和 <td> 組成。所有的 <th> 、 <td> 都必須被包含在 <tr> 中。

正確使用 <th> 相當重要,因為在沒有其他額外屬性標示的情況下,螢幕閱讀器只能藉由 HTML 結構判斷哪些 table data 屬於哪個 table header。

B. 加入<caption> (和摘要 summary)

無障礙表格可以帶有標題,這裡指的標題並不是 <h1> ~ <h6> ,而是專門用來描述表格標題的 <caption> 。與提供 <figure> 標題的 <figcaption> 用法類似,不同的是 <caption> 必須放在 <table> 內的第一個元件,不能是最後一個(視覺上則可以藉由 CSS 來把標題的位置移到表格下方)。

若表格內容複雜,可以補充摘要(summary)來加強說明表格內容,摘要的寫法比較靈活,可以:

  1. 直接在 <caption> 裡塞一個子元素( <span> …等)來放說明文字;
  2. 在 <table> 鄰近用別的元素撰寫摘要 (要帶 id),並在 <table> 上加入 aria-describedby="{id}" 來關聯兩者;
  3. 把 <table> 包在 <figure> 裡,利用 <figcaption> 來撰寫摘要。

※ 注意不要使用summary 屬性,這個已經不支援了。

C. 加入 <tbody> 、 <thead> 、 <tfoot>

其實就算程式碼裡沒有寫 <tbody> ,瀏覽器在產生 <table> 的 DOM 時也會加上。

如果你的表格結構帶有表頭 row 、匯總 row ,那麼就可以用 <thead> 、 <tfoot> 將 <tr> 包起來,清楚表達結構。不過這幾個 HTML tag 有比較多使用順序上的規範:

  1. 一個 <table> 中, <thead> 、 <tfoot> 只能有一個,<tbody> 則可以有多個,用來區別複雜資料的區段;
  2. 如果自行撰寫 <tbody> , <table> 內就不能有直屬的 <tr> 元素,所有的 <tr> 都必須被放在 <tbody> 、 <thead> 或 <tfoot> 中;
  3. <tbody> 、 <thead> 、 <tfoot> 內都必須有至少一個 <tr> ;
  4. <thead> 必須放在 <table> 內的 <caption> 或 <colgroup> 之後,並在 <tbody> 、 <tfoot> 之前;
  5. 相反地, <tfoot> 必須放在 <caption> 、 <colgroup> 、 <thead> 、 <tbody> 之後。

D. 加入屬性

加入屬性的目的是闡明資料之間的關聯,能讓螢幕閱讀器知道應該用怎樣的順序來閱讀表格,其中最重要也比較容易實作的屬性有[2]:

  • scope:
    • 只能用在 <th> ,用來定義與其相關的資料內容的方向性,scope 可以有的值有:
      • row:表示同一個橫向 row 的 td 與其相關
      • col:表示同一個直排 column 的 td 與其相關
      • rowgroup:表示多個 row 的 td 與其相關,通常會搭配排版使用的 rowspan 屬性使用
      • colgroup:表示多個 column 的 td 與其相關,通常會搭配排版使用的 colspan 屬性使用
  • headers:
    • 可用在 <th> 、 <td> ,表達這個元素屬於哪個 <th> ,其值為所屬 <th> 的 id (只能是 <th> 的 id ,不過可以同時有多個,用空白區隔)

看看實際的應用範例能更快理解(範例二及三):

上面的範例為求清楚,將兩種屬性分開成兩個表格舉例,實際使用時scope 和 headers 可以同時並存[3]。

E. 優化複雜表格

表格內容太多時,經常會有超出螢幕畫面不滾動就閱讀不到的情形,雖然直接把格子間距或文字縮小很直覺,但這樣反而會導致閱讀性不佳,遇到這種情況,複雜表格可以藉由幾種方式處理:

  1. 精簡表格內容
  2. 拆分成多個表格
  3. 根據表格類型,甚至可以直接將表格內容整個設計成互動性的查詢功能頁

其中,要注意表格內容在簡化或拆分後是否還能正確表達原本要呈現的資訊。而第三種方式雖然整體成本較高,但對使用者來說會方便很多,例如下面這個郵資一覽表:

普通資費表:信函
普通資費表:信函

觀察其內容其實是有公式可循的,使用者使用這張表的目的是查詢資費,那麼使用查詢表式就更直覺了:

國內函件資費查詢
國內函件資費查詢

2. Layout Table 排版表格

單純使用表格當作排版工具是非常不建議的,除了前面提到歷史因素和 EDM 的狀況以外都應該盡量避免。若因不可抗力必須要用 <table> 來排版,也應該注意:

  1. <table> 內除了 <td> 以外不要使用任何其他上述的 HTML tag,以免造成更多語義上的混亂;
  2. 在 <table> 加上 role="presentation" ,表明這是裝飾性的內容,不需要被讀出;
  3. 不要把這種表格放在資料表格內,會造成資料表格的閱讀困難。

3. 模擬表格

如非必要,也應避免使用這種方式來撰寫表格。與其使用一大堆 ARIA 標籤,不如盡量使用原生的語義化 HTML tag ,對使用者更友善。role="table" 算是較新的 ARIA 內容,要注意瀏覽器、輔具,尤其是觸控裝置對它的支援度尚未完全普及。

模擬表格有資料表格的外觀和陣列特性,但因為排版需求不使用 <table> 的 HTML 結構,而是採用 <div> 或 <ul> 、 <li> 搭配 CSS 來呈現表格資料,這種情形需要搭配 role 來表明其表格結構;通常用在有特殊排版或 RWD 不同尺寸樣式變化巨大的表格。

模擬表格的整體結構會跟原生 <table> 差不多,藉由利用 role 屬性來標示對應的角色,能使用的 role 屬性和 HTML tag 其實都有對應,觀察下面的撰寫範例,就能發現基本的 role 屬性都是能夠對應 HTML tag 的:


[註1] 講古小知識!HTML 在 1990 問世,當時的樣式表(style sheet)還沒有統一規範,直到 1996 年 CSS 才推出,而且一開始還不怎麼流行。<div> + CSS 的排版方式是 2000 年後才逐漸把 <table> 排版取代的。 

[註2] 參照 MDN Web Docs

[註3] 更多範例可以參考:Tables Tutorial | Web Accessibility Initiative (WAI) | W3C

[註4] HTML spec;這篇的討論也有相當詳細的說明 Valid to use <a> (anchor tag) without href attribute?


系列文章目錄:
漫談無障礙網頁設計-1(無障礙網頁介紹)
漫談無障礙網頁設計-2(在設計上實作無障礙網頁的大方向)
漫談無障礙網頁設計-3(在設計上實作無障礙網頁的元件)
漫談無障礙網頁設計-4(在前端實作無障礙網頁不可不知的 HTML)
漫談無障礙網頁設計-5(表格的使用)← 現在在這裡!

如果這篇文章對您有所幫助的話,歡迎在下面按讚表達支持~
Tags: HTML無障礙網站
ShareShareShare
Judy Shyu

Judy Shyu

前端工程師,興趣廣泛,試圖為自己找到一點規律而寫作。

上一篇文章

漫談無障礙網頁設計-4

下一篇文章

《塑思考》那些執行設計以外的選項

相關文章

無障礙網頁設計

漫談無障礙網頁設計-4

by Judy Shyu
8 月 03,2022

《在前端實作無障礙網頁不可不知的 HTML 》:這個系列的前三篇文章大致描述了無障礙網頁的基本概念,以及設計師們可以注意的大方向和細節,接下來將從前端實作的角度...

無障礙網頁設計

漫談無障礙網頁設計-3

by Judy Shyu
9 月 01,2021

上一篇講了無障礙網頁在設計上的大方向,這一篇將從各種元件的細節來討論,從尺寸、色彩、文案、影音……究竟設計上還有什麼值得注意的地方? 

無障礙網頁設計

漫談無障礙網頁設計-2

by Judy Shyu
7 月 21,2021

即使專案並不需求取得無障礙標章,瞭解這些注意要點也能使你的網頁設計能為更多人所使用。實作無障礙網站,從設計開始就有許多注意要點,這篇文章希望能藉由提供一些範例讓...

Back to List

一塊特別企劃

一塊特別企劃|設計師問與答
連結至一塊設計 facebook 專頁

標籤

Adobe Xd (3) B2B (1) COVID19 (1) designer (2) design tool (3) Figma (4) functional map (1) HTML (2) illustrator (1) UI (26) UX (18) web design (1) Wordpress (2) 字體 (7) 無障礙網站 (5) 產品設計 (2) 筆記 (4) 經驗分享 (26) 網頁設計 (20) 設計師問答 (1) 設計選書 (2) 課程心得 (1) 講座 (2) 購物流程 (1) 週年企劃 (5) 遠端工作 (2) 電子報 (1) 靈感 (4)
一塊設計 a piece of design

聯絡我們

任何合作或問題請洽:
info@apodesign.tw

  • 服務條款
  • 隱私權政策

Follow us

Copyright © 2020 apodesign.tw All Rights Reserved.

沒有結果
檢視所有結果
  • 關於我們
    • 團隊花絮
  • UI/UX
    • UI / UX 設計
    • 工具分享
  • 美感養成
  • 設計職涯
  • 設計生活提案
    • 展覽 / 活動分享
    • 設計選書