ARIA：rowheader 角色

具有 role="rowheader" 的元素是 單元格，包含 grid、table 或 treegrid 中表格結構的 行 的標題資訊。

描述

Rowheader 是行的標題 單元格，它在標題單元格與同一 行 中的其他單元格之間建立了關係。

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="rowheader">Finland</span>
      <span role="cell">5.5 million</span>
    </div>
    <div role="row">
      <span role="rowheader">France</span>
      <span role="cell">67 million</span>
    </div>
  </div>
</div>

它在結構上等效於 <th> 元素，範圍為 row，即 <th scope="row">。強烈建議使用本地的 <th> HTML 元素。

要建立 ARIA 行標題，請在元素中新增 role="rowheader"。該行標題必須巢狀在 row 中，而 row 又必須巢狀在 rowgroup 中，或者直接巢狀在 grid、table 或 treegrid 中。

注意：強烈建議儘可能使用本地的 表格元素。

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

上下文角色

role="row"

您將在其中找到行的唯一上下文。它包含一個單元格或一組單元格，這些單元格構成一行，其中只有一行應該為 rowheader 型別。類似於本地的 <tr> HTML 元素。

鍵盤互動

無

所需的 JavaScript 特性

無。

注意：ARIA 使用的第一條規則是，如果您可以使用具有您所需語義和行為的本地功能，並且該功能已內建，那麼請使用它，而不是重新利用元素並新增 ARIA 角色、狀態或屬性以使其可訪問。儘可能使用 HTML <table>、<tr>、<th>、<td> 以及其他 表格元素，而不是 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="rowheader">header</span>
      <span role="cell">h1</span>
    </div>
    <div role="row" aria-rowindex="16">
      <span role="rowheader">header</span>
      <span role="cell">h6</span>
    </div>
    <div role="row" aria-rowindex="18">
      <span role="rowheader">rowgroup</span>
      <span role="cell">thead</span>
    </div>
    <div role="row" aria-rowindex="24">
      <span role="rowheader">term</span>
      <span role="cell">dt</span>
    </div>
  </div>
</div>

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

上面是語義化的表格編寫方式。僅當表格的本機語義（以及錶行標題）被消除時，才需要 ARIA 角色，例如透過將 display 屬性設定為 flex 或 grid。

附加優勢

無

規範

規範
可訪問的富網際網路應用程式 (WAI-ARIA)
# rowheader

另請參閱