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 重新建立表格的形式和功能。

另請參閱