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)
# 行组

另请参阅