ARIA: gridcell 角色
gridcell 角色用于在 grid 或 treegrid 中创建一个单元格。它旨在模仿 HTML <td> 元素用于表格式分组信息的函数功能。
<div role="gridcell">Potato</div>
<div role="gridcell">Cabbage</div>
<div role="gridcell">Onion</div>
应用了 role="gridcell" 的元素必须是 row 角色元素的子元素。
<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> 元素
<td>Potato</td>
<td>Cabbage</td>
<td>Onion</td>
描述
动态添加、隐藏或删除行的网格单元格
任何应用了 role="gridcell" 的元素都应该使用 ARIA 来描述其在表格式分组中的顺序，前提是该表格、网格或树形网格能够动态地添加、隐藏或删除行和/或列。
使用 aria-colindex 来描述 gridcell 在列列表中的顺序，使用 aria-rowindex 来描述 gridcell 在行列表中的顺序。在应用了 role="grid" 的父元素上使用 aria-colcount 和 aria-rowcount 来设置列或行的总数。
此示例代码演示了一个表格式信息分组，其中第三列和第四列已被移除。aria-colindex 被用于描述行的位置，并允许使用辅助技术的用户推断出某些行已被移除。
<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 属性 来实现。
<td contenteditable="true">Notes</td>
<div role="gridcell" contenteditable="true">Item cost</div>
contenteditable 将使应用它的元素可以通过 Tab 键进行聚焦。如果一个网格单元格被有条件地切换到不允许编辑的状态，则切换网格单元格元素上的 aria-readonly。
可展开单元格
在 treegrid 中，可以通过切换 aria-expanded 属性来使网格单元格可展开。请注意，如果提供了此属性，它仅适用于单个网格单元格。
关联的 WAI-ARIA 角色、状态和属性
grid-
指示父元素是表格或树风格的信息分组。
row-
需要用于指示
gridcell是表格式信息分组的行的一部分。 columnheader-
指定哪个元素是关联的列标题。
aria-colindex-
识别元素相对于表格式信息分组其余列的位置。
rowheader-
指定哪个元素是关联的行标题。
aria-rowindex-
识别元素相对于表格式信息分组其余行的位置。
示例
以下示例创建了一个表格式信息分组
<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 来重新创建表格的格式和功能。
规范
| 规范 |
|---|
| 无障碍富互联网应用程序 (WAI-ARIA) # gridcell |