Treegrid and Other Advanced Patterns
Tackle the hardest composite widgets with confidence.
Treegrid and Other Advanced Patterns is a free Web Accessibility Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Web Accessibility Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Entering Hard Mode
Some widgets are genuinely complex: treegrids, grids, and trees combine rows, columns, and expandable nodes all at once. 🌳
What a Treegrid Is
A treegrid is a grid whose rows can expand and collapse like a tree, perfect for a file browser with nested folders and columns of detail.
The Core Roles
Use role="treegrid" on the container, role="row" on each row, and role="gridcell" on the cells. The structure mirrors a real grid.
<div role="treegrid">
<div role="row">
<span role="gridcell">src</span>
</div>
</div>Expandable Rows
A row that can open carries aria-expanded, true when its children show and false when collapsed. Leaf rows omit it entirely.
<div role="row" aria-expanded="false"
aria-level="1">Folder</div>Depth With aria-level
Use aria-level to tell users how deep a row sits in the tree. Level 1 is the top, and each nested row counts one higher.
Two-Axis Movement
In a treegrid, arrow keys move on both axes: Up and Down change rows, while Left and Right move between cells or collapse and expand.
Expand and Collapse Keys
On a parent row, Right Arrow expands it and Left Arrow collapses it. This matches how desktop file trees have always worked.
One Tab Stop
The whole treegrid is a single tab stop. Roving tabindex moves the real focus among cells so the widget feels like one composite control.
Set Size and Position
For dynamic or virtualized rows, use aria-setsize and aria-posinset so users hear position counts even when not all rows are rendered.
Home, End, and Jumps
Advanced grids add Home and End to jump to the first or last cell, and Ctrl with Home or End to leap to the very start or end of the data.
Reach for the APG
These patterns are unforgiving, so follow the APG example closely and test with a real screen reader. Small mistakes break the whole widget.
Quick Check
You build a file browser where rows open to reveal nested rows inside a grid. Which role fits?
Recap
A treegrid blends grid and tree: rows with aria-expanded and aria-level, two-axis arrow keys, one tab stop via roving tabindex. Lean on the APG and test hard. ✅
Frequently asked questions
Is the “Treegrid and Other Advanced Patterns” lesson free?
Yes — the full text of “Treegrid and Other Advanced Patterns” is free to read here on the web, and the Web Accessibility Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Web Accessibility Academy course, upgrade to CoddyKit PRO.
What will I learn in “Treegrid and Other Advanced Patterns”?
Tackle the hardest composite widgets with confidence. You practise Web Accessibility Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Web Accessibility Academy?
No prior experience is required. Web Accessibility Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Treegrid and Other Advanced Patterns” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Web Accessibility Academy lesson?
Yes. Every Web Accessibility Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Reading the APG: Pattern, Keys, and Examples
- Combobox and Autocomplete Done Right
- Menu, Menubar, and the Menu Button
- Treegrid and Other Advanced Patterns