ARIA: table 角色
ARIA role 屬性的 table 值表示該元素包含一個非互動式的表格結構，其中資料按行和列排列，類似於原生的 <table> 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>
描述
具有 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。
注意： 在可能的情況下，強烈建議使用原生的 HTML 表格元素。
關聯的 WAI-ARIA 角色、狀態和屬性
role="rowgroup"role="row"-
表格中的一行，也可以是行組中的一行，其中包含一個或多個單元格、列標題或行標題。
aria-describedby屬性-
其值是作為表格描述的元素的 ID。
aria-label屬性-
aria-label為表格提供了可訪問的名稱。 aria-colcount屬性-
僅當列不始終存在於 DOM 中時，才需要此屬性。它明確指示了完整表格中的列數。將值設定為完整表格中的總列數。如果未知，則設定為
aria-colcount="-1"。 aria-rowcount屬性-
僅當行不始終存在於 DOM 中時，才需要此屬性，例如用於最小化 DOM 節點數量而重複使用行的可滾動表格。它明確指示了完整表格中的行數。將值設定為完整表格中的總行數。如果未知，則設定為
aria-rowcount="-1"。
鍵盤互動
無。
所需的 JavaScript 功能
無。對於可排序的列，請參閱 columnheader aria 角色。
注意： ARIA 使用的第一條規則是：如果您可以使用原生功能，並且該功能已內建您所需的語義和行為，那麼就應該這樣做，而不是重新利用一個元素並新增 ARIA 角色、狀態或屬性來使其可訪問。儘可能使用 HTML <table> 元素，而不是 ARIA 的 table 角色。
示例
<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 table 角色的一個相關用例是當 CSS 的 display 屬性覆蓋表格的原生語義時，例如透過 display: grid。在這種情況下，您可以使用 ARIA table 角色來重新新增語義。
規範
| 規範 |
|---|
| 無障礙富網際網路應用程式 (WAI-ARIA) # table |
| 未知規範 |