ARIA：网格单元格角色

网格单元格角色 用于在 网格 或 树网格 中创建一个单元格。它旨在模拟 HTML <td> 元素的功能，用于以表格样式对信息进行分组。

html
<div role="gridcell">Potato</div>
<div role="gridcell">Cabbage</div>
<div role="gridcell">Onion</div>

对元素应用 role="gridcell" 的元素必须是具有 row 角色的元素的子元素。

html
<div role="row">
  <div role="gridcell">Jane</div>
  <div role="gridcell">Smith</div>
  <div role="gridcell">496-619-5098</div>
  …
</div>

ARIA 的第一个规则是，如果原生 HTML 元素或属性具有您所需语义和行为，请使用它，而不是重新利用元素并添加 ARIA。请改用 HTML <td> 元素

html
<td>Potato</td>
<td>Cabbage</td>
<td>Onion</td>

描述

具有动态添加、隐藏或删除的行和列的网格单元格

任何对它应用了 role="gridcell" 的元素都应使用 ARIA 来描述其在表格样式分组中的顺序，前提是表格、网格或树网格具有动态添加、隐藏或删除行和/或列的功能。

使用 aria-colindex 来描述 gridcell 在列列表中的顺序，以及使用 aria-rowindex 来描述网格单元格在行列表中的顺序。对应用了 role="grid" 的父元素使用 aria-colcount 和 aria-rowcount 来设置列或行的总数。

此示例代码演示了一个以表格样式分组的信息，其中第三列和第四列已删除。 aria-colindex 用于描述行的位置，并允许使用辅助技术的人员推断某些行已被删除

html
<div role="grid" aria-colcount="6">
  <div role="rowgroup">
    <div role="row">
      <div role="columnheader" aria-colindex="1">First name</div>
      <div role="columnheader" aria-colindex="2">Last name</div>
      <div role="columnheader" aria-colindex="5">City</div>
      <div role="columnheader" aria-colindex="6">Zip</div>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <div role="gridcell" aria-colindex="1">Debra</div>
      <div role="gridcell" aria-colindex="2">Burks</div>
      <div role="gridcell" aria-colindex="5">New York</div>
      <div role="gridcell" aria-colindex="6">14127</div>
    </div>
  </div>
  …
</div>

在整体结构未知的情况下描述网格单元格的位置

在内容的表格样式分组未提供有关列和行信息的情况下，必须使用 aria-describedby 以编程方式描述网格单元格的位置。为 aria-describedby 提供的 id 应与旨在作为行和列的父元素相对应。

通过使用 aria-describedby 引用具有 rowheader 或 columnheader 角色的父元素，允许辅助技术了解 gridcell 元素相对于内容的表格样式分组的其余部分的位置和关系。

交互式网格和树网格

可编辑的单元格

<td> 元素和对它们应用了 gridcell 角色的元素都可以进行编辑，模拟类似于编辑电子表格的功能。这是通过应用 HTML contenteditable 属性 来完成的。

html
<td contenteditable="true">Notes</td>

<div role="gridcell" contenteditable="true">Item cost</div>

contenteditable 将使它所应用的元素通过 Tab 键变得可聚焦。如果网格单元格在条件下切换到禁止编辑的状态，请在网格单元格元素上切换 aria-readonly。

可扩展的单元格

在 树网格 中，可以通过切换 aria-expanded 属性来使网格单元格可扩展。请注意，如果提供了此属性，它只适用于单个网格单元格。

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

网格

传达父元素是表格或树样式的信息分组。

行

需要传达 gridcell 是表格样式信息分组的行的一部分。

列标题

指定哪个元素是关联的列标题。

aria-colindex

标识元素相对于表格样式信息分组的其余列的位置。

行标题

指定哪个元素是关联的行标题。

aria-rowindex

标识元素相对于表格样式信息分组的其余行的位置。

示例

以下示例创建了一个以表格样式分组的信息

html
<h3 id="table-title">Jovian gas giant planets</h3>
<div role="grid" aria-describedby="table-title">
  <div role="rowgroup">
    <div role="row">
      <div role="columnheader">Name</div>
      <div role="columnheader">Diameter (km)</div>
      <div role="columnheader">Length of day (hours)</div>
      <div role="columnheader">Distance from Sun (10<sup>6</sup>km)</div>
      <div role="columnheader">Number of moons</div>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <div role="gridcell">Jupiter</div>
      <div role="gridcell">142,984</div>
      <div role="gridcell">9.9</div>
      <div role="gridcell">778.6</div>
      <div role="gridcell">67</div>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <div role="gridcell">Saturn</div>
      <div role="gridcell">120,536</div>
      <div role="gridcell">10.7</div>
      <div role="gridcell">1433.5</div>
      <div role="gridcell">62</div>
    </div>
  </div>
</div>

无障碍问题

对 gridcell 和某些 gridcell 相关的 ARIA 角色和属性的支持在辅助技术中支持不佳。如果可能，请改用 HTML 表格标记。

最佳实践

ARIA 的第一条规则是：如果原生 HTML 元素或属性具有您需要的语义和行为，请使用它，而不是重新利用元素并添加 ARIA 角色、状态或属性以使其可访问。因此，建议使用 原生 HTML 表格标记，而不是使用 ARIA 和 JavaScript 重新创建表格的形式和功能。

另请参阅