ARIA-level (Property)

The aria-level (property) defines the hierarchical structure of an element within a document. Similar to all other ARIA roles, states and properties aria-level (property) is used only when the native semantics cannot provide the structural level of an element, or when the user agent including assistive technologies cannot identify the level of any element. Aria-level is used for defining a heading structure, level of a list item within a list, nested tablist, treeitems within a tree structure , nested grids etc.

The aria-level property will have the value as integer greater than or equal to one. The increase in level defines the depth of the level. Saying this in the same section multiple elements can have same level.

The aria-level property has to be given to the child element when the widget or component have parent – child relationship. Eg: Provide the aria-level property to listitem not to the list. If any of the listitem have sub element again a different aria-level have to be provided for it. An example snippet has been provided later in this article for a better understanding.

Using aria-level along with roles for structuring lists

List start from here

Fruits
Apple
Orange
Banana
Grapes
Drinks
Coke
Pepsi
Fruity

Example Code snippet

</p> <div role="list> <div role="listitem" aria-level="1">Fruits</div> <div role="list"> <div role="listitem" aria-level="2">Apple</div> <div role="listitem" aria-level="2">Orange</div> <div role="listitem" aria-level="2">Banana</div> <div role="listitem" aria-level="2">Grapes</div> </div> <div role="listitem" aria-level="1">Drinks</div> <div role="list"> <div role="listitem" aria-level="2">Coke</div> <div role="listitem" aria-level="2">Pepsi</div> <div role="listitem" aria-level="2">Fruity</div> </div> </div> <p>