ARIA: row 角色

描述

具有 role="row" 的元素是 grid、table 或 treegrid 中的一行，并且可选地包含在 rowgroup 中，该行包含一个或多个 cell、gridcell、columnheader 或 rowheader 元素，位于静态表格结构中。尽可能使用原生的 HTML <tr> 元素是强烈推荐的。

要创建 ARIA 行，请将 role="row" 添加到容器元素。该行应嵌套在 grid、table 或 treegrid 中。一组行可以直接嵌套在 grid、table 或 treegrid 中，或者嵌套在其容器的 rowgroup 中。每行都包含子单元格。这些单元格的类型可能不同，具体取决于它们是列标题还是行标题，或是网格单元格还是普通单元格。

一行可以包含许多澄清行角色的属性，包括 aria-colindex、aria-level、aria-rowindex 和 aria-selected。

如果该行位于 treegrid 中，则该行可以包含 aria-expanded 属性，使用该属性指示当前状态。这不适用于普通表或网格，在这些情况下，aria-expanded 属性不存在。

要创建具有表格结构的交互式小部件，请改用 grid 模式。如果交互提供了单个单元格的选中状态，如果提供了从左到右和从上到下的导航，或者如果用户界面允许重新排列单元格顺序或以其他方式更改单个单元格顺序（例如通过拖放），则改用 grid 或 treegrid。

关联的 WAI-ARIA 角色、状态和属性

上下文角色

role="rowgroup"

一个可选的上下文行父元素，它建立了后代行之间的关系。它在结构上相当于 HTML 表格元素中的 thead、tfoot 和 tbody 元素。

role="table"

您会找到行的三个可能上下文之一（与 grid 和 treegrid 一起），它标识该行是一个非交互式表格结构的一部分，该结构包含按行和列排列的数据，类似于原生的 <table> HTML 元素。

role="grid"

您会找到行的三个可能上下文之一（与 table 和 treegrid 一起），它标识该行是一个非交互式表格结构的一部分，该结构包含按行和列排列的数据，类似于原生的 <table> HTML 元素。

role="treegrid"

类似于 grid，但行可以像树一样展开和折叠。

后代角色

role="cell"

表格容器中一行中的单元格。

role="gridcell"

grid 或 treegrid 中一行中的单元格。

role="columnheader"

一个标题单元格，它在结构上相当于具有列作用域的 HTML <th> 元素（<tr scope="col">）。与普通单元格不同，columnheader 角色在它与相应列中的所有单元格之间建立了关系。

role="rowheader"

一个标题单元格，它在结构上相当于具有行作用域的 HTML <th> 元素（<tr scope="row">）。与普通单元格不同，rowheader 角色在它与相应行中的所有单元格之间建立了关系。

状态和属性

aria-expanded 状态

aria-expanded 属性定义了行的状态，可以取以下三种值之一，或省略：

• aria-expanded="true"：行当前已展开。
• aria-expanded="false"：行当前已折叠。
• aria-expanded="undefined" 或属性缺失：该行既不可展开也不可折叠。

如果具有 aria-expanded 属性的元素控制着另一个不“属于”该元素的组容器的展开，则作者应该使用 aria-controls 属性来引用该容器。

aria-selected 状态

仅当行位于交互式容器（如 grid 或 treegrid）中时才相关，如果行位于 table 中则不相关。aria-selected 属性可以取以下三种值之一，或省略：

• aria-selected="true"：行当前已选中。
• aria-selected="false"：行当前未选中。
• aria-selected="undefined" 或属性缺失：该行不可选中。

aria-colindex 属性

仅当列从 DOM 中隐藏时才需要 aria-colindex 属性。它通常放置在行的子元素上，而不是行本身。如果显示的列是连续的，则可以将其放在行上。

该属性的值是一个介于 1 和表格、网格或树状网格中总列数之间的整数。当放置在行上时，aria-colindex 定义元素相对于行中总列数的列索引或位置。例如，在一个有 15 列的表格中，如果列 4、5 和 6 在 DOM 中，那么可以在每一行上设置 aria-colindex="4"。

如果 DOM 中存在的列集不是连续的，或者有跨越多行或多列的单元格，则将 aria-colindex 放在每一行的所有子元素上，而不是放在行本身上。

如果所有列都在 DOM 中，则不需要此属性。

aria-rowindex 属性

仅当行从 DOM 中隐藏时才需要 aria-rowindex 属性，以指示正在读取的总行列表中的哪一行。该属性以唯一值放置在每一行上，其值是一个介于 1 和表格、网格或树状网格中总行数之间的整数，表示每一行的位置或索引。例如，如果一个表格有 1,500 行，但只有表头和第 47 行和第 52 行在 DOM 中，则表头行会设置 aria-rowindex="1"，第 47 行和第 52 行会分别设置 aria-rowindex="47" 和 aria-rowindex="52"。

如果所有行都存在于 DOM 中，则不需要此属性。

键盘交互

无。

所需的 JavaScript 功能

无。对于可排序的列，请参阅 columnheader aria 角色。

示例

<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 表格，其中 81 行中的 5 行存在于 DOM 中：一行在表格标题中，四行在表格主体中。标题行单独位于一个标题行组中，有两个列标题。这些列是可排序的，但目前未排序，如 aria-sort 属性所示。表格主体位于一个单独的行组中，目前有四行存在于 DOM 中。由于并非所有行都在 DOM 中，因此我们在每一行上都包含了 aria-rowindex 属性。

最佳实践

仅将 <table>、<tbody>、<thead>、<tr>、<th>、<td> 等用于数据表格结构。您可以添加这些 ARIA 角色以确保可访问性，前提是表格的原生语义已被删除（例如通过 CSS）。ARIA 表格角色的相关用例是，当表格的原生语义被 CSS 的 display 属性（例如 display: grid）覆盖时。在这种情况下，您可以使用 ARIA 表格角色来重新添加语义。

<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>
    <tr role="row" aria-rowindex="18">
      <td role="cell">rowgroup</td>
      <td role="cell">thead</td>
    </tr>
    <tr role="row" aria-rowindex="24">
      <td role="cell">term</td>
      <td role="cell">dt</td>
    </tr>
  </tbody>
</table>

以上是编写表格的语义化方法。仅当表格的原生语义（以及因此的表格行）被完全破坏（例如通过将 display 属性设置为 flex 或 grid）时，才需要 ARIA 角色。

新增优势

none

规范

另见

• HTML <tr> 表格行元素
• <table>
• rowgroup 角色
• table 角色
• grid 角色
• treegrid 角色
• cell 角色
• gridcell 角色
• columnheader 角色
• rowheader 角色