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 |