ARIA: rowheader 角色

描述

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>

它在功能上等同于 `scope` 为 `row` 的 <th> 元素，即 `<th scope="row">。强烈建议使用原生的 <th> HTML 元素。

要创建一个 ARIA 行标题，请将 role="rowheader" 添加到元素中。该行标题必须嵌套在 row 中，而 row 又嵌套在 rowgroup 中，或者直接嵌套在 grid、table 或 treegrid 中。

注意： 强烈建议尽可能使用原生的表格元素。

关联的 WAI-ARIA 角色、状态和属性

上下文角色

role="row": 这是您会发现行的唯一上下文。它包含一个单元格或一组单元格行，其中只有一个应该是行标题类型。类似于原生的 <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>

以上是编写表格的语义化方式。仅当表格的原生语义（以及因此的表格行标题）被破坏时（例如通过将 display 属性设置为 flex 或 grid），才需要 ARIA 角色。