這系列無障礙的鐵人賽文章，實踐的內容主要是根據 W3C：WAI-ARIA 的實踐，從設計模式及組件（Design Patterns and Widgets）裡面挑選最想嘗試的，如果有朋友想瞭解全部 Widget 該怎麼實作及其規範，歡迎自行爬規範內容，也許我們可以討論一下；若以下文章內容理解有任何錯誤，請多指教～

（美國 18 世紀的表格，圖片來源：MDN）

表格 Table（打開文件）

3.21 Table
Like an HTML table element, a WAI-ARIA table is a static tabular structure containing one or more rows that each contain one or more cells; it is not an interactive widget. Thus, its cells are not focusable or selectable.

今天要介紹的是 Table，如果你對原生表格的概念不夠熟悉，那麼看一下 MDN 的內容吧！

主要是由欄（column）與列（row）構成，讓我們的資料更可視化，這裡的欄與列請再注意一下英文的部分，因為有些國家的中文翻譯是相反的。

（一張最簡單的表格由直向的 column 與橫向的 row 組成，圖片來源：MDN）

表格在網頁中，早期它還是網站排版的主要方法呢！因為自適應網站（Responsive Web Design，簡稱為 RWD）需求激增，在目前的網路世界，RWD 已是基本標配，然而 Table 在自適應網頁不容易調整，不過依舊非常適合拿來呈現大量的數據或清單。

那麼後來我們常也會有使用 <div> 來排出表格感的網頁內容，今天就是要來講這塊的無障礙要加上哪些 ARIA 屬性！

重要註記：
其實如果能使用原生的 <table> 元素，就盡量的使用吧！而本篇文章要介紹的 table 是屬於 WAI-ARIA 1.1 中的新角色（Role），建議挑選目標的輔助科技，直接進行測試與實作，避免輔助裝置不支援。

鍵盤的可訪問性

• 本篇文章的 Table 並不是可與使用者互動的內容，所以不需要支援鍵盤的可訪問性。

Roles、States、Properties

• 表格容器：
  • 角色是 table，也就是 role="table"。
• 列：
  • 表格容器包覆著的列，也可以用群組容器包覆，比如說標頭與內容，如果被群組容器包覆，那麼需要定義群組容器的角色為 rowgroup，每一列本身的角色必須指定為 row。
    • table > row 或
    • table > rowgroup > row
• 欄位：
  • 列標題：該欄位的角色要指定為 rowheader。
  • 欄標題：該欄位的角色要指定為 columnheader。
  • 純資料：不是任何欄或列的標頭，該欄位的角色要指定為 cell。
• 為表格容器透過 aria-label 指定一個標籤，就是標題的意思，或是說 UI 畫面中有放置該表格的標題，就使用 aria-labelledby 為它指定那個元素的 id。
• 如果 UI 畫面中有呈現對於表格的敘述，使用 aria-describedby 指定該元素的 id，為表格補充語義。
• 更多屬性的使用請看這裡，主要是在陳述：如果我們想要輔助科技了解我們的客製化表格，還有以下幾點要特別注意。
  • 資料是否排序呢？ 使用 ⇒ aria-sort。
  • 欄數與列數分別是多少呢？有沒有任何的欄列是隱藏的呢？以下的值都是「數字」。
    • 在 <table> 或role="table" 使用 ⇒ aria-colcount及 aria-rowcount，表達欄列的數量。
    • 在 <tr> 或 role="row" 使用 ⇒ aria-rowindex，表示第幾列。
    • 在 <th> 或 <td> 或 role="cell" 使用 ⇒ aria-colindex，表示第幾欄。
  • 有沒有跨欄或是跨列的呢？
    • 在 <th> 或 <td> 或 role="cell" 使用 ⇒ aria-colspan 及 aria-rowspan。

結論

綜合以上的內容，就是將原生表格的特性，讓我們都可以透過 ARIA 屬性來做語義的補充，而且有些屬性是原生表格也非常推薦使用的，如透過 aria-colcount 與 aria-rowcount 標上欄列數量對於可訪問性是能大幅提升的。

細看的話，在這份實踐手冊當中，還將表格劃分為可以透過讓使用者透過鍵盤互動的表格（設計模式是 3.12 Grids : Interactive Tabular Data and Layout Containers），應在現今的網頁中，是很值得參考的內容，不過本篇文章講的是最基礎的表格無障礙實現的概念，從基礎開始，會比較容易喔！

實踐的部份留給大家做看看囉～

不然就打開 WAI-ARIA Practice 1.1 的表格範例，用開發者工具檢查看看這個使用 <div> 與 <span> 構成的表格，和在 Roles、States、Properties 區塊提及的內容是否相符呢？

原始碼：

<div role="table"
     aria-label="Students"
     aria-describedby="students_table_desc">
  <div id="students_table_desc">
    Students currently enrolled in WAI-ARIA 101 for the coming semester
  </div>
  <div role="rowgroup">
    <div role="row">
      <span role="columnheader">
        First Name
      </span>
      <span role="columnheader">
        Last Name
      </span>
      <span role="columnheader">
        Company
      </span>
      <span role="columnheader">
        Address
      </span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <span role="cell">
        Fred
      </span>
      <span role="cell">
        Jackson
      </span>
      <span role="cell">
        Acme, Inc.
      </span>
      <span role="cell">
        123 Broad St.
      </span>
    </div>
    <div role="row">
      <span role="cell">
        Sara
      </span>
      <span role="cell">
        James
      </span>
      <span role="cell">
        Acme, Inc.
      </span>
      <span role="cell">
        123 Broad St.
      </span>
    </div>
    <div role="row">
      <span role="cell">
        Ralph
      </span>
      <span role="cell">
        Jefferson
      </span>
      <span role="cell">
        XYZ, Inc.
      </span>
      <span role="cell">
        456 Main St.
      </span>
    </div>
    <div role="row">
      <span role="cell">
        Nancy
      </span>
      <span role="cell">
        Jensen
      </span>
      <span role="cell">
        XYZ, Inc.
      </span>
      <span role="cell">
        456 Main St.
      </span>
    </div>
  </div>
</div>

Reference

• WAI-ARIA 1.1 - W3C
• WAI-ARIA Practices 1.1 - W3C