ARIA：cell 角色

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 内，该 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 是可选的上下文行父级。它建立了后代行之间的关系。它是 HTML table 元素中 thead、tfoot 和 tbody 元素的结构等效项。
role="table": 您会发现包含单元格的行所在的三个可能上下文之一（以及 grid 和 treegrid）。Table 将单元格标识为非交互式表格结构的一部分，该结构包含按行和列排列的数据，类似于原生的 HTML <table> 元素。
role="grid": 您会发现包含 cells 和 gridcells 的行所在的三个可能上下文之一（以及 table 和 treegrid）。Grid 将单元格标识为可能交互式表格结构的一部分，该结构包含按行和列排列的数据，类似于原生的 <table> HTML 元素。
role="treegrid": 类似于 grid，但行可以像树一样展开和折叠。

子类角色

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> 元素，而不是 ARIA 角色 cell。

示例

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 表格，其中 81 行中有 5 行存在于 DOM 中：一行在表格标题内，四行在表格主体内。由于并非所有行都在 DOM 中，我们在每个单元格上都包含了 aria-rowindex 属性。如果没有单元格跨越一行或一列以上，则可以将 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-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) # cell
未知规范

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者于 ⁨2025年5月12日⁩ 15:08:46 UTC 修改。

在 GitHub 上查看此页面 • 报告此内容的错误