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 上檢視此頁面 • 報告此內容的錯誤