iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 21
1
Modern Web

實踐無障礙網頁設計(Web Accessibility)系列 第 21

實作無障礙網頁功能:表格(Table)原來可以補充的語義這麼多!

這系列無障礙的鐵人賽文章,實踐的內容主要是根據 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-colcountaria-rowcount,表達欄列的數量。
      • <tr>role="row" 使用 ⇒ aria-rowindex,表示第幾列。
      • <th><td>role="cell" 使用 ⇒ aria-colindex,表示第幾欄。
    • 有沒有跨欄或是跨列的呢?
      • <th><td>role="cell" 使用 ⇒ aria-colspanaria-rowspan

結論

綜合以上的內容,就是將原生表格的特性,讓我們都可以透過 ARIA 屬性來做語義的補充,而且有些屬性是原生表格也非常推薦使用的,如透過 aria-colcountaria-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


上一篇
實作無障礙網頁功能:今天沒有拖棚之表單 radio,要選就只選我吧!
下一篇
實作無障礙網頁功能:頁籤 Tabs
系列文
實踐無障礙網頁設計(Web Accessibility)30

尚未有邦友留言

立即登入留言