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