Grid and tree
Learn ARIA grid, tree and treegrid patterns.
role="grid" for data grids
role="grid" is for table-like but interactive data grids. Rows take role="row", cells take role="gridcell". Arrow keys move between cells; so a real <table> is fine for static data, and the grid role is reserved for interaction.
If a native <table> covers static data, no ARIA is needed. But when rows can be sorted, dragged or cells edited inline, role="grid" steps in. aria-readonly marks read-only, aria-multiselectable marks multi-select.
role="tree" and treeitem
role="tree" is for a branching menu or file structure. Each item takes role="treeitem"; a sub-branch sits inside a role="group". When a treeitem has children, aria-expanded tells whether it is open or closed.
Level is set with aria-level="1", "2" and so on; the root is 1. In <ul role="tree"><li role="treeitem" aria-level="1">Sales</li></ul>, a single-level tree root appears.
treegrid: tree meets table
role="treegrid" fuses a tree menu with a table. Each row is both a branch that expands and collapses and a row of cells; file managers and project boards use it. Rows take role="row", cells take role="gridcell"; to attach to a parent row, use aria-owns or a nested role="group".
This role is complex; reach for it only when truly needed. Most of the time a <table> plus a few <details> does the same job with fewer pitfalls.
Exercise Write a two-level tree
Add a <ul role="tree"> to body. Inside it put two <li role="treeitem">. Give the first treeitem an aria-expanded="true" and open a <ul role="group"> inside it; inside the group put one child <li role="treeitem">Sub branch</li>. The first parent treeitem text is Documents, the second is Files.
Show example solution
<body>
<ul role="tree">
<li role="treeitem" aria-expanded="true">Documents
<ul role="group">
<li role="treeitem">Sub branch</li>
</ul>
</li>
<li role="treeitem">Files</li>
</ul>
</body>Test yourself
-
Which role is used for a hierarchical menu?
- grid
- table
- tree
- list
Show answer
tree — Correct. role="tree" is for tree-shaped hierarchical menus.
-
Write the tree role
<ul role="____"> <li role="treeitem" aria-level="1">Sales</li> </ul>Show answer
<ul role="tree"> <li role="treeitem" aria-level="1">Sales</li> </ul> -
Match each role to its scenario
- role="grid"
- Interactive table
- role="tree"
- Hierarchical menu
- role="treegrid"
- Tree + table hybrid
- role="row"
- A single row