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> 元素的結構等價物。但是，不同型別的 rowgroup 之間沒有區別。它們的元素必須包含在具有table 或grid 角色的元素中，或由這些元素擁有。在任何可能的情況下，都強烈建議使用原生<thead>、<tfoot> 和<tbody> HTML 元素。

要建立 ARIA 表格標題、表格腳註或表格主體，請將role="rowgroup" 新增到元素中。該 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"

類似於網格，但行可以像樹一樣展開和摺疊。

後代角色

role="row"

表格結構中的一行單元格。一行包含一個或多個單元格、網格單元格 或列標題，有時還包含行標題。

鍵盤互動

無

所需的 JavaScript 功能

無。

注意：ARIA 使用的第一條規則是，如果您可以使用具有您所需語義和行為的原生功能（已內建），而不是重新利用元素並新增 ARIA 角色、狀態或屬性以使其可訪問，那麼請這樣做。在任何可能的情況下，都應使用 HTML <table> 元素，而不是 table 的 ARIA 角色。

示例

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 行：表格標題中的一行和表格主體中的 4 行。標題行（位於標題行組中）有兩個列標題。這些列是可排序的，但當前未排序，如aria-sort 屬性所示。表格主體是一個單獨的行組，當前 DOM 中有 4 行。由於並非所有行都位於 DOM 中，因此我們在每一行上都包含了aria-rowindex 屬性。

最佳實踐

對於資料表格結構，僅使用<table>、<tbody>、<thead>、<tr>、<th>、<td>等元素。如果需要確保可訪問性，並且表格的原生語義被移除（例如使用 CSS），則可以新增這些 ARIA 角色。ARIA 表格角色的一個相關用例是，當 CSS 的 `display` 屬性覆蓋表格的原生語義時，例如使用 `display: grid`。在這種情況下，可以使用 ARIA 表格角色新增語義。

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>

以上是編寫表格的語義化方式。只有當表格的原生語義（以及表格行）被破壞時，才需要使用 ARIA 角色，例如將`display` 屬性設定為 `flex` 或 `grid`。

額外優勢

無

規範

規範
無障礙富網際網路應用 (WAI-ARIA)
# 行組

另請參閱