ARIA:rowheader 角色
描述
Rowheader
是行的标题 单元格
,它在标题单元格与同一 行
中的其他单元格之间建立了关系。
<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 表格角色。
示例
<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 表格角色添加语义。
<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 |