ARIA：单元格角色

ARIA role 属性的cell值将元素标识为表格容器中的单元格，该容器不包含列或行标题信息。要获得支持，单元格必须嵌套在角色为row的元素中。

html
<div role="row">
  <span role="cell">France</span>
  <span role="cell">67 million</span>
</div>

编写上述单元格的更好、更语义化的方式是使用语义化的<td>元素。

html
<tr role="row">
  <td role="cell">France</td>
  <td role="cell">67 million</td>
</tr>

描述

具有role="cell"的元素是行内的单元格，可选地在rowgroup内，在table内。如果单元格位于grid或treegrid中，请选择gridcell。尽可能使用原生 HTML <td>元素，强烈建议这样做。

每个具有role="cell"的元素都必须嵌套在具有role="row"的容器元素中。该行反过来可以嵌套在具有role="rowgroup"的元素中，并且应嵌套在grid、table或treegrid中。如果单元格包含列或行标题信息，则分别使用columnheader或rowheader角色。如果单元格不包含标题信息并且嵌套在grid或treegrid中，则gridcell的角色可能更合适。

单元格可以包含许多属性属性，以阐明单元格在表格数据结构中的位置，包括aria-colindex、aria-colspan、aria-rowindex和aria-rowspan。

注意：尽可能使用原生 HTML 表格元素(<table>)元素以及表格行元素(<tr>)和表格单元格元素(<td>)，强烈建议这样做。

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

上下文角色

role="row"

具有role="row"的元素是表格结构中的一行单元格。一行包含一个或多个单元格、网格单元格、列标题或行标题，这些标题位于grid、table或treegrid中，并可选地位于rowgroup中。

role="rowgroup"

Row是必需的单元格父级。Rowgroup是可选的上下文行父级。它在后代行之间建立关系。它在结构上等效于thead、tfoot和tbody元素，这些元素位于HTML table元素中。

role="table"

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

role="grid"

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

role="treegrid"

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

子类角色

role="gridcell"

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

role="columnheader"

标题单元格，在结构上等效于具有列范围的 HTML <th>元素。与普通单元格不同，columnheader角色在其与相应列中所有单元格之间建立关系。

role="rowheader"

一个表头单元格，在结构上等同于具有行范围的 HTML <th> 元素。与普通单元格不同，rowheader 角色在其与对应行中所有单元格之间建立了一种关系。

状态和属性

aria-colspan

类似于 HTML <th> 和 <td> colspan 属性，它定义了单元格所跨越的列数。

aria-rowspan

类似于 HTML <th> 和 <td> rowspan 属性，它定义了单元格所跨越的行数。

aria-colindex 属性

只有当列从 DOM 中隐藏时，才需要 aria-colindex 属性。该属性的值为 1 到 table、grid 或 treegrid 中总列数之间的整数。aria-colindex 定义了元素相对于一行中总列数的列索引或位置。如果所有列都在 DOM 中，则不需要此属性。

aria-rowindex 属性

只有当行从 DOM 中隐藏时，才需要 aria-rowindex 属性，以指示当前单元格位于表、网格或树状网格的总行列表中的哪一行。该属性的值为 1 到表、网格或树状网格中总行数之间的整数，指示单元格的位置或索引。例如，第一个表头第一行的单元格可能设置了 aria-rowindex="1"，而第 47 行的单元格将具有 aria-rowindex="47"，如果由于并非所有行都在 DOM 中而需要 aria-rowindex。如果可见的行是连续的，并且没有单元格的 colspan 或 rowspan 大于 1，则可以将此属性添加到父行而不是所有行的单元格。

键盘交互

无

必需的 JavaScript 功能

ARIA 使用的第一条规则是，如果您可以使用具有您所需语义和行为的内置原生功能，而不是重新利用元素并添加 ARIA 角色、状态或属性以使其可访问，那么请这样做。尽可能使用 HTML <td> 元素，而不是 cell 的 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-rowindex="1"
        >ARIA Role</span
      >
      <span role="columnheader" aria-sort="none" aria-rowindex="1"
        >Semantic Element</span
      >
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <span role="cell" aria-rowindex="11">header</span>
      <span role="cell" aria-rowindex="11">h1</span>
    </div>
    <div role="row">
      <span role="cell" aria-rowindex="16">header</span>
      <span role="cell" aria-rowindex="16">h6</span>
    </div>
    <div role="row">
      <span role="cell" aria-rowindex="18">rowgroup</span>
      <span role="cell" aria-rowindex="18">thead</span>
    </div>
    <div role="row">
      <span role="cell" aria-rowindex="24">term</span>
      <span role="cell" aria-rowindex="24">dt</span>
    </div>
  </div>
</div>

以上是一个非语义 ARIA 表格，其中 DOM 中存在 81 行中的 5 行：一个在表格标题中，四个在表格主体中。由于并非所有行都在 DOM 中，因此我们在每个单元格上都包含了 aria-rowindex 属性。如果没有单元格跨越超过一行或一列，则可以将 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-rowindex="1">ARIA Role</th>
      <th role="columnheader" aria-sort="none" aria-rowindex="1">
        Semantic Element
      </th>
    </tr>
  </thead>
  <tbody role="rowgroup">
    <tr role="row">
      <td role="cell" aria-rowindex="11">header</td>
      <td role="cell" aria-rowindex="11">h1</td>
    </tr>
    <tr role="row">
      <td role="cell" aria-rowindex="16">header</td>
      <td role="cell" aria-rowindex="16">h6</td>
    </tr>
    <tr role="row">
      <td role="cell" aria-rowindex="18">rowgroup</td>
      <td role="cell" aria-rowindex="18">thead</td>
    </tr>
    <tr role="row">
      <td role="cell" aria-rowindex="24">term</td>
      <td role="cell" aria-rowindex="24">dt</td>
    </tr>
  </tbody>
</table>

上面是编写表格的语义方式。如果表格以及表格行的原生语义没有被更改，例如通过 display 属性，则不需要 ARIA 角色。

额外的好处

当应用于 <td> 时，它会将单元格语义返回给元素，以防语义被移除，例如使用 display: grid;。

规范

规范
可访问的富互联网应用 (WAI-ARIA)
# 单元格
未知规范

另请参阅