ARIA：aria-level 属性

描述

层级结构出现在标题、树、嵌套网格、嵌套选项卡列表等中。如果 DOM 的祖先关系不能准确地表示层级，则应使用 aria-level 属性来定义其层级结构中元素的层级。层级随着深度的增加而增加。aria-level 的值是一个大于或等于 1 的整数。

在文档结构中，你可以有一级标题、二级标题、三级标题等等。在树中，你有根元素、它的子元素、子元素的子元素（或孙子元素），依此类推。

aria-level 属性将层级结构暴露给辅助技术，以便用户可以获得这些信息。与所有 ARIA 属性一样，它对用户代理没有影响，因此对用户代理确定文档结构也没有影响。

如果 DOM 的祖先关系能够准确地表示层级，那么用户代理就可以从文档结构中计算出某个项的层级，这使得 aria-level 不仅是多余的，而且有产生错误信息的风险。aria-level 实际上只应用于在无法从文档结构中计算出层级时，明确指示层级。请测试以确定是否需要此属性。如果用户代理可以计算层级，最好省略 aria-level 属性。

与 `heading` 角色配合使用

aria-level 属性是 heading 角色的一个必需属性，它向辅助技术表明该元素应被视为一个标题。<div role="heading" aria-level="1"> 将 <div> 定义为页面的主标题。一个二级标题，使用 aria-level="2" 定义，将是第一个子部分，三级标题是该子部分的子部分，依此类推。

html

<div role="heading" aria-level="3">Heading for this sub section</div>

建议改用 h1 到 h6 元素。

在 `treegrid` 角色内部

对于 treegrid，aria-level 支持具有 row 角色的元素，而不是具有 gridcell 角色的元素。行在网格的垂直方向上充当叶节点。网格单元格在每行的水平方向上是叶节点。aria-level 不支持行内的单元格。因此，在 treegrids 中，aria-level 属性应用于具有 row 角色的元素。

如果由于用户在树中移动焦点或滚动而导致 DOM 中不存在一组完整的可用节点（通过动态加载），则每个节点都包含 aria-level、aria-setsize 和 aria-posinset。