ARIA: rowgroup 角色

具有 role="rowgroup" 的元素是表格結構中行的組。rowgroup 包含一個或多個單元格、網格單元格、列標題或行標題的grid、table 或 treegrid 中的行。

html

<div
  role="table"
  aria-label="Populations"
  aria-describedby="country_population_desc">
  <div id="country_population_desc">World Populations by Country</div>
  <div role="rowgroup">
    <div role="row">
      <span role="columnheader" aria-sort="descending">Country</span>
      <span role="columnheader" aria-sort="none">Population</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <span role="cell">Finland</span>
      <span role="cell">5.5 million</span>
    </div>
    <div role="row">
      <span role="cell">France</span>
      <span role="cell">67 million</span>
    </div>
  </div>
</div>

描述

Rowgroup 建立了其擁有的行元素之間的關係，並且是 HTML 中 <thead>、<tfoot> 和 <tbody> 元素的結構等效項。但是，不同型別的行組之間沒有區分。它們的元素必須包含在具有 table 或 grid 角色的元素中，或者由這些元素擁有。在可能的情況下，強烈建議使用原生的 <thead>、<tfoot> 和 <tbody> HTML 元素。

要建立 ARIA 表頭、表尾或表體，請將 role="rowgroup" 新增到元素中。該行組應巢狀在 grid、table 或 treegrid 中，包含一個或多個行的組。每一行又包含子單元格。這些單元格可以是不同型別，具體取決於它們是列標題還是行標題，或者是普通單元格還是網格單元格。

注意： 在可能的情況下，強烈建議使用原生的 HTML 表元素（<table>）以及表頭（<thead>）、表尾（<tfoot>）和表體（<tbody>）元素。

關聯的 WAI-ARIA 角色、狀態和屬性

上下文角色

role="table": 在您會找到行的三種可能上下文（與 grid 和 treegrid 一起）之一。它標識該行是包含按行和列排列資料的非互動式表格結構的一部分，類似於原生的 <table> HTML 元素。
role="grid": 在您會找到行的三種可能上下文（與 table 和 treegrid 一起）之一。它標識該行是包含按行和列排列資料的非互動式表格結構的一部分，類似於原生的 <table> HTML 元素。
role="treegrid": 類似於 grid，但行可以像樹一樣展開和摺疊。

後代角色

role="row": 表格結構中的一行單元格。一行包含一個或多個單元格、gridcell 或列標題，有時還包含一個行標題。

所需的 JavaScript 功能

無。

注意： ARIA 使用的第一條規則是，如果您可以使用原生功能，並且該功能已經內建了您所需的語義和行為，那麼請使用原生功能，而不是重新利用一個元素並新增一個 ARIA 角色、狀態或屬性來使其可訪問。在可能的情況下，請使用 HTML <table> 元素而不是 ARIA 的 table 角色。

示例

html

<div
  role="table"
  aria-label="Semantic Elements"
  aria-describedby="semantic_elements_table_desc"
  aria-rowcount="81">
  <div id="semantic_elements_table_desc">
    Semantic Elements to use instead of ARIA's roles
  </div>
  <div role="rowgroup">
    <div role="row">
      <span role="columnheader" aria-sort="none">ARIA Role</span>
      <span role="columnheader" aria-sort="none">Semantic Element</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row" aria-rowindex="11">
      <span role="cell">header</span>
      <span role="cell">h1</span>
    </div>
    <div role="row" aria-rowindex="16">
      <span role="cell">header</span>
      <span role="cell">h6</span>
    </div>
    <div role="row" aria-rowindex="18">
      <span role="cell">rowgroup</span>
      <span role="cell">thead</span>
    </div>
    <div role="row" aria-rowindex="24">
      <span role="cell">term</span>
      <span role="cell">dt</span>
    </div>
  </div>
</div>

以上是一個非語義的 ARIA 表格，其中包含表頭和表體，DOM 中存在 81 行中的 5 行：一行在表頭內，四行在表體內。表頭行在表頭行組中獨佔一行，包含兩個列標題。這些列是可排序的，但目前未排序，如 aria-sort 屬性所示。表體是單獨的行組，目前 DOM 中有四行。由於並非所有行都在 DOM 中，因此我們在每一行上都包含了 aria-rowindex 屬性。

僅將 <table>、<tbody>、<thead>、<tr>、<th>、<td> 等用於資料表格結構。如果表的原生語義被移除（例如使用 CSS），您可以新增這些 ARIA 角色來確保可訪問性。ARIA table 角色的相關用例是當 CSS 的 display 屬性覆蓋了表的原生語義時，例如透過 display: grid。在這種情況下，您可以使用 ARIA table 角色來新增語義。

html

<table
  role="table"
  aria-label="Semantic Elements"
  aria-describedby="semantic_elements_table_desc"
  aria-rowcount="81">
  <caption id="semantic_elements_table_desc">
    Semantic Elements to use instead of ARIA's roles
  </caption>
  <thead role="rowgroup">
    <tr role="row">
      <th role="columnheader" aria-sort="none">ARIA Role</th>
      <th role="columnheader" aria-sort="none">Semantic Element</th>
    </tr>
  </thead>
  <tbody role="rowgroup">
    <tr role="row" aria-rowindex="11">
      <td role="cell">header</td>
      <td role="cell">h1</td>
    </tr>
    <tr role="row" aria-rowindex="16">
      <td role="cell">header</td>
      <td role="cell">h6</td>
    </tr>
  </tbody>
</table>

以上是編寫表格的語義化方法。只有當表的原生語義，以及因此的錶行語義，被完全破壞時（例如透過將 display 屬性設定為 flex 或 grid），才需要 ARIA 角色。