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 角色。