Header — wide
Header — narrow, collapsed to the hamburger
The same markup as above in a narrower box. The header measures its own width, not the window's, so it folds its links into the hamburger instead of scrolling sideways.
The page band — what a surface says it is
66
requirements this module defines.
0
Covered
0
Gaps
0
Not applicable
66
Nobody has looked
The rule is the whole point. A band is only a band if it has an edge — without one it is the first few lines of the page, and the reader does the grouping. The figures take rules between them for the same reason: four columns floating in a gap are four readings, and this is one.
Account — the avatar, and what it opens
The identity is not a menu item. It carries no role, so arrow keys
pass over it and it takes no hover — a row that lights up under the cursor is a row somebody
will try to click, and there is nothing here to click.
Hamburger — closed and open
aria-expanded. The bars morph; nothing is swapped out.
Drawer
Sidebar
Active state is driven by aria-current (and aria-selected
on tabs), never by an .is-active class — the styling and the accessibility tree cannot
drift apart. The current place is one cue — a soft tinted pill with the label in ink — in the
header, the rail and the drawer alike; hover is a lighter neutral tint, and focus is the ring. The hamburger is a single button whose bars morph on
aria-expanded; nothing is swapped for an X glyph.
Rail as a phone drawer
On a phone the rail becomes a drawer from the start edge — the same Sidebar,
its groups still folding, with the drawer as its surface.