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

Next lesson: Tabs and accordion

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies