ARIA：單元格角色

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內，在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是可選的上下文行父級。它在後代行之間建立關係。它在結構上等效於thead、tfoot和tbody元素，這些元素位於HTML table元素中。

role="table"

三種可能的上下文之一（以及grid和treegrid），您將在其中找到包含單元格的行。Table 將單元格標識為非互動式表格結構的一部分，該結構包含以行和列排列的資料，類似於原生 HTML <table>元素。

role="grid"

三種可能的上下文之一（以及table和treegrid），您將在其中找到包含cells和gridcells的行。Grid將單元格標識為可能互動式表格結構的一部分，該結構包含以行和列排列的資料，類似於原生<table> HTML 元素。

role="treegrid"

類似於網格，但行可以像樹一樣展開和摺疊。

子類角色

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> 元素，而不是 cell 的 ARIA 角色。

示例

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 表格，其中 DOM 中存在 81 行中的 5 行：一個在表格標題中，四個在表格主體中。由於並非所有行都在 DOM 中，因此我們在每個單元格上都包含了 aria-rowindex 屬性。如果沒有單元格跨越超過一行或一列，則可以將 aria-rowindex 放置在行上，而不是行的各個單元格上。

最佳實踐

僅對資料表格結構使用 <table>、<tbody>、<thead>、<tr>、<th>、<td> 等。您可以新增 ARIA 角色以確保可訪問性，如果表格的原生語義被移除，例如使用 CSS。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)
# 單元格
未知規範

另請參閱