ARIA：表格角色

具有 role="table" 的元素是具有包含单元格的行并具有静态表格结构。虽然单元格本身不可聚焦或可选，但表格中单个单元格内的任何小部件都是可以交互的。强烈建议在可能的情况下使用本机 HTML <table> 元素。

要创建 ARIA 表格，请将 role="table" 添加到容器元素。在该容器内，每一行都设置了 role="row"，并且包含子单元格。每个单元格的角色都是 columnheader、rowheader 或 cell 之一。行可以是表格的子元素，也可以在 rowgroup 内。

可以使用 aria-labelledby 或 aria-label 定义表格标题。所有其他语义表格元素，例如 <tbody>、<thead>、<tr>、<th> 和 <td> 需要通过关联的角色添加，例如 rowgroup、row、columnheader 和 cell。

如果表格包含可排序的列或行，则应在标头单元格元素（而不是表格本身）上添加 aria-sort 属性。如果任何行或列隐藏，则应包含 aria-colcount 或 aria-rowcount 以分别指示列或行的总数，以及每个单元格上的 aria-colindex 或 aria-rowindex。aria-colindex 或 aria-rowindex 设置为单元格在行或列中的位置。如果表格包含跨越多行或多列的单元格，则还应包含 aria-rowspan 或 aria-colspan。请注意，使用 <table> 元素以及所有相关语义元素和属性（这些元素和属性都受到所有辅助技术的支持）要简单得多。

要创建具有表格结构的交互式小部件，请改用 grid 模式。如果交互提供对单个单元格的选择状态、如果提供从左到右和从上到下的导航，或者如果用户界面允许重新排列单元格顺序或以其他方式更改单个单元格顺序（例如通过拖放），请改用 grid 或 treegrid。

role="rowgroup"

表格的可选子元素，行组封装了一组行，类似于 <thead>、<tbody> 和 <tfoot>。

role="row"

表格中的一行，可选地在行组内，它是一个或多个单元格、列标题或行标题的容器。

aria-describedby 属性

将表格描述用作其值的元素的 ID。

aria-label 属性

aria-label 为表格提供可访问的名称。

aria-colcount 属性

如果列并非始终存在于 DOM 中，则仅需此属性。它明确指示了完整表格中的列数。将值设置为完整表格中的总列数。如果未知，请设置 aria-colcount="-1"。

aria-rowcount 属性

如果行并非始终存在于 DOM 中，则仅需此属性，例如滚动表格为了最小化 DOM 节点数而重用行。它明确指示了完整表格中的行数。将值设置为完整表格中的总行数。如果未知，请设置 aria-rowcount="-1"。

无

无。对于可排序列，请参见 columnheader ARIA 角色。

<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>

以上内容是表格的一部分。虽然完整表格有 81 个条目，如 aria-rowcount 属性所示，但目前仅显示四个条目。列是可排序的，但目前未排序，如列标题上的 aria-sort 属性所示。

仅使用 <table>、<tbody>、<thead>、<tr>、<th>、<td> 等用于数据表格结构。您可以添加这些 ARIA 角色以确保可访问性，即使表格的原生语义被删除（例如使用 CSS）。ARIA 表格角色的一个相关用例是当 CSS 的 display 属性覆盖表格的原生语义时，例如使用 display: grid。在这种情况下，您可以使用 ARIA 表格角色重新添加语义。

无

• HTML 表格元素
• HTML 表格教程
• ARIA：grid 角色