1. Web
  2. 無障礙
  3. ARIA
  4. ARIA 參考
  5. 角色
  6. row

ARIA: row 角色

具有 role="row" 的元素是表格結構中的一行單元格。一行包含一個或多個單元格、網格單元格或列標題，並且可能包含一個行標題，位於 grid、table 或 treegrid 中，並且可選地包含在 rowgroup 中。

html
<div
  role="table"
  aria-label="Populations"
  aria-describedby="country_population_desc">
  <div id="country_population_desc">World Populations by Country</div>
  <div role="rowgroup">
    <div role="row">
      <span role="columnheader" aria-sort="descending">Country</span>
      <span role="columnheader" aria-sort="none">Population</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <span role="cell">Finland</span>
      <span role="cell">5.5 million</span>
    </div>
    <div role="row">
      <span role="cell">France</span>
      <span role="cell">67 million</span>
    </div>
  </div>
</div>

描述

具有 role="row" 的元素是 grid、table 或 treegrid 中的一行，並且可選地包含在 rowgroup 中，該行包含一個或多個 cell、gridcell、columnheader 或 rowheader 元素，位於靜態表格結構中。儘可能使用原生的 HTML <tr> 元素是強烈推薦的。

要建立 ARIA 行，請將 role="row" 新增到容器元素。該行應巢狀在 grid、table 或 treegrid 中。一組行可以直接巢狀在 grid、table 或 treegrid 中，或者巢狀在其容器的 rowgroup 中。每行都包含子單元格。這些單元格的型別可能不同，具體取決於它們是列標題還是行標題，或是網格單元格還是普通單元格。

一行可以包含許多澄清行角色的屬性，包括 aria-colindex、aria-level、aria-rowindex 和 aria-selected。

如果該行位於 treegrid 中，則該行可以包含 aria-expanded 屬性，使用該屬性指示當前狀態。這不適用於普通表或網格，在這些情況下，aria-expanded 屬性不存在。

要建立具有表格結構的互動式小部件，請改用 grid 模式。如果互動提供了單個單元格的選中狀態，如果提供了從左到右和從上到下的導航，或者如果使用者介面允許重新排列單元格順序或以其他方式更改單個單元格順序（例如透過拖放），則改用 grid 或 treegrid。

注意： 儘可能使用原生的 HTML 表格元素（<table>）和表格行元素（<tr>）是強烈推薦的。

關聯的 WAI-ARIA 角色、狀態和屬性

上下文角色

role="rowgroup"

一個可選的上下文行父元素，它建立了後代行之間的關係。它在結構上相當於 HTML 表格元素中的 thead、tfoot 和 tbody 元素。

role="table"

您會找到行的三個可能上下文之一（與 grid 和 treegrid 一起），它標識該行是一個非互動式表格結構的一部分，該結構包含按行和列排列的資料，類似於原生的 <table> HTML 元素。

role="grid"

您會找到行的三個可能上下文之一（與 table 和 treegrid 一起），它標識該行是一個非互動式表格結構的一部分，該結構包含按行和列排列的資料，類似於原生的 <table> HTML 元素。

role="treegrid"

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

後代角色

role="cell"

表格容器中一行中的單元格。

role="gridcell"

grid 或 treegrid 中一行中的單元格。

role="columnheader"

一個標題單元格，它在結構上相當於具有列作用域的 HTML <th> 元素（<tr scope="col">）。與普通單元格不同，columnheader 角色在它與相應列中的所有單元格之間建立了關係。

role="rowheader"

一個標題單元格，它在結構上相當於具有行作用域的 HTML <th> 元素（<tr scope="row">）。與普通單元格不同，rowheader 角色在它與相應行中的所有單元格之間建立了關係。

狀態和屬性

aria-expanded 狀態

aria-expanded 屬性定義了行的狀態，可以取以下三種值之一，或省略：

  • aria-expanded="true"：行當前已展開。
  • aria-expanded="false"：行當前已摺疊。
  • aria-expanded="undefined" 或屬性缺失：該行既不可展開也不可摺疊。

如果具有 aria-expanded 屬性的元素控制著另一個不“屬於”該元素的組容器的展開，則作者應該使用 aria-controls 屬性來引用該容器。

aria-selected 狀態

僅當行位於互動式容器（如 grid 或 treegrid）中時才相關，如果行位於 table 中則不相關。aria-selected 屬性可以取以下三種值之一，或省略：

  • aria-selected="true"：行當前已選中。
  • aria-selected="false"：行當前未選中。
  • aria-selected="undefined" 或屬性缺失：該行不可選中。
aria-colindex 屬性

僅當列從 DOM 中隱藏時才需要 aria-colindex 屬性。它通常放置在行的子元素上，而不是行本身。如果顯示的列是連續的，則可以將其放在行上。

該屬性的值是一個介於 1 和表格、網格或樹狀網格中總列數之間的整數。當放置在行上時，aria-colindex 定義元素相對於行中總列數的列索引或位置。例如，在一個有 15 列的表格中，如果列 4、5 和 6 在 DOM 中，那麼可以在每一行上設定 aria-colindex="4"。

如果 DOM 中存在的列集不是連續的，或者有跨越多行或多列的單元格，則將 aria-colindex 放在每一行的所有子元素上，而不是放在行本身上。

如果所有列都在 DOM 中，則不需要此屬性。

aria-rowindex 屬性

僅當行從 DOM 中隱藏時才需要 aria-rowindex 屬性，以指示正在讀取的總行列表中的哪一行。該屬性以唯一值放置在每一行上，其值是一個介於 1 和表格、網格或樹狀網格中總行數之間的整數，表示每一行的位置或索引。例如，如果一個表格有 1,500 行，但只有表頭和第 47 行和第 52 行在 DOM 中，則表頭行會設定 aria-rowindex="1"，第 47 行和第 52 行會分別設定 aria-rowindex="47" 和 aria-rowindex="52"。

如果所有行都存在於 DOM 中，則不需要此屬性。

鍵盤互動

無。

所需的 JavaScript 功能

無。對於可排序的列，請參閱 columnheader aria 角色。

注意： ARIA 使用的第一條規則是，如果可以使用已內建了所需語義和行為的原生功能，而不是重新利用一個元素並新增 ARIA 角色、狀態或屬性使其可訪問，那麼就這樣做。儘可能使用 HTML <table> 元素，而不是 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 Role</span>
      <span role="columnheader" aria-sort="none">Semantic Element</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row" aria-rowindex="11">
      <span role="cell">header</span>
      <span role="cell">h1</span>
    </div>
    <div role="row" aria-rowindex="16">
      <span role="cell">header</span>
      <span role="cell">h6</span>
    </div>
    <div role="row" aria-rowindex="18">
      <span role="cell">rowgroup</span>
      <span role="cell">thead</span>
    </div>
    <div role="row" aria-rowindex="24">
      <span role="cell">term</span>
      <span role="cell">dt</span>
    </div>
  </div>
</div>

以上是一個非語義 ARIA 表格，其中 81 行中的 5 行存在於 DOM 中：一行在表格標題中，四行在表格主體中。標題行單獨位於一個標題行組中，有兩個列標題。這些列是可排序的，但目前未排序，如 aria-sort 屬性所示。表格主體位於一個單獨的行組中，目前有四行存在於 DOM 中。由於並非所有行都在 DOM 中，因此我們在每一行上都包含了 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 Role</th>
      <th role="columnheader" aria-sort="none">Semantic Element</th>
    </tr>
  </thead>
  <tbody role="rowgroup">
    <tr role="row" aria-rowindex="11">
      <td role="cell">header</td>
      <td role="cell">h1</td>
    </tr>
    <tr role="row" aria-rowindex="16">
      <td role="cell">header</td>
      <td role="cell">h6</td>
    </tr>
    <tr role="row" aria-rowindex="18">
      <td role="cell">rowgroup</td>
      <td role="cell">thead</td>
    </tr>
    <tr role="row" aria-rowindex="24">
      <td role="cell">term</td>
      <td role="cell">dt</td>
    </tr>
  </tbody>
</table>

以上是編寫表格的語義化方法。僅當表格的原生語義（以及因此的表格行）被完全破壞（例如透過將 display 屬性設定為 flex 或 grid）時，才需要 ARIA 角色。

新增優勢

none

規範

規範
無障礙富網際網路應用程式 (WAI-ARIA)
# row
未知規範

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ，由 MDN 貢獻者。

在 GitHub 上檢視此頁面 • 報告此內容的潛在問題
© . Content available under a Creative Commons license.