ARIA：行角色

具有role="row"的元素是表格结构内的一行单元格。一行包含一个或多个单元格、网格单元格或列标题，以及表格内可能的行标题，在grid、table或treegrid中，以及可选的rowgroup中。

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>

描述

元素role="row"是在grid、table或treegrid中，以及可选的rowgroup中的一个行，它是cells、gridcells、columnheaders或rowheaders的一个容器，这些容器位于静态表格结构中。尽可能使用原生HTML <tr>元素是强烈建议的。

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

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

如果该行位于树网格中，则行可以包含aria-expanded属性，使用该属性指示当前状态。对于普通表格或网格，情况并非如此，在普通表格或网格中，aria-expanded属性不存在。

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

注意：尽可能使用原生 HTML 表格元素（<table>）以及表格行元素（<tr>）是强烈建议的。

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

上下文角色

role="rowgroup"

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

role="table"

三种可能的上下文（以及 grid 和 treegrid）之一，您将在其中找到一行，它将该行标识为表格结构的一部分，该结构包含以行和列排列的数据，类似于原生<table> HTML 元素。

role="grid"

三种可能的上下文（以及 table 和 treegrid）之一，您将在其中找到一行，它将该行标识为表格结构的一部分，该结构包含以行和列排列的数据，类似于原生<table> HTML 元素。

role="treegrid"

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

后代角色

role="cell"

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

role="gridcell"

网格或树网格内一行中的一个单元格。

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 状态

仅当行位于交互式容器（如网格或树状网格）中时才相关，如果行位于表格中则不相关。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 到表格、网格或树状网格中总行数之间的整数，指示每一行的位置或索引。例如，如果一个表格有 1500 行，但只有标题行和第 47 行和第 52 行在 DOM 中，则在标题行上设置aria-rowindex="1"，并在第 47 行和第 52 行上分别设置aria-rowindex="47"和aria-rowindex="52"。

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

键盘交互

无

所需的 JavaScript 功能

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

注意：ARIA 使用的第一条规则是，您可以使用具有所需语义和行为的原生功能（这些功能已经内置），而不是重新利用元素并添加ARIA 角色、状态或属性来使其可访问，然后这样做。尽可能使用HTML <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 表格，其中 81 行中的 5 行存在于 DOM 中：一行在表格标题中，四行在表格主体中。标题行（单独位于标题行组中）有两个列标题。这些列是可排序的，但当前未排序，如aria-sort属性所示。表格主体位于单独的行组中，当前有四行位于 DOM 中。由于并非所有行都位于 DOM 中，因此我们在每一行上都包含了aria-rowindex属性。

最佳实践

仅对数据表结构使用<table>、<tbody>、<thead>、<tr>、<th>、<td>等。您可以添加这些 ARIA 角色以确保可访问性，即使表格的原生语义被删除（例如使用 CSS）。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>
    <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 角色。

额外优势

无

规范

规范
可访问的富互联网应用程序 (WAI-ARIA)
# 行
未知规范

另请参阅