Tab Menu Vertical
How the Tab Menu Vertical works with a keyboard and assistive tech, and where it stands against WCAG 2.2 AA.
The Tab Menu Vertical is a WAI-ARIA tablist set on its side: one tab stop, Up and Down move between tabs, and moving selects. Its header names the list. It is held to WCAG 2.2 AA for contrast, focus and target size.
Keyboard#
Moves focus to the selected tab, then on to the content beside it.
Moves focus back to the selected tab.
Moves to the next tab and selects it, wrapping from last to first.
Moves to the previous tab and selects it, wrapping from first to last.
Selects the first tab.
Selects the last tab.
Hides the focused tab's tooltip until focus or the pointer leaves.
Semantics#
role="tablist"With aria-orientation="vertical", so screen readers expect Up and Down.
Alwaysaria-labelledbyThe overline names the list. Without a header the list is named Sections.
With headerrole="tab"A <button> with the tab role; its glyph is aria-hidden and its count is read with the label.
Each tabaria-selectedtrue on the active tab only.
Each tabtabindex="0" / "-1"Only the selected tab is in the tab order.
Rovingaria-describedbyPoints at the role="tooltip" bubble, which shows on hover and on keyboard focus.
With tooltiparia-controlsShould point at the panel the tab shows. The preview doesn't take a panel id yet, so it is not set.
Each tabColour contrast#
Every variant and state has to meet WCAG 2.2 Level AA. Measure the colours as they land on screen: a translucent hover or press wash over whatever sits behind it.
Tab label · Default, Hover, Active
The 14px Medium label against the tab's fill in every state, with the 2% and 6% washes laid over white. Brand active is white on #005cf8.
WCAG 1.4.3 Contrast (Minimum) ↗Header overline · With header
The overline is 14px Medium #8f8f8f on white: 3.23:1, under 4.5:1.
WCAG 1.4.3 Contrast (Minimum) ↗Selected state · Active
Grey active is a 6% wash, close to 1.1:1 on white, and Light active is white on white. Both rely on the label darkening from #6d6d6d to #2a2a2a, a 2.77:1 step. Brand active (5.40:1) and the Outline rail in black (21.00:1) are the variants that show selection on their own.
WCAG 1.4.11 Non-text Contrast ↗WCAG 1.4.1 Use of Color ↗Focus indicator · Focus visible
A 2px #1a6ef8 ring with a white gap, 4.54:1 against white. The card clips its overflow, so keep its 16px inset; a ring at the card's edge would be cut off.
WCAG 1.4.11 Non-text Contrast ↗WCAG 2.4.13 Focus Appearance ↗Measured contrast#
Tab label against the tab's own fill in each state, with translucent washes laid over the white card. All 9 pairs reach their minimum.
Motion#
- Fill, label and lift change over 150ms; the tooltip fades in over 120ms. Both are turned off under prefers-reduced-motion.
Checklist#
Replace the OR placeholder with a real name for the list, such as Settings. The header is the tablist's accessible name.
Darken the overline: #8f8f8f is 3.23:1. #6d6d6d reaches 5.17:1.
Prefer Brand, Outline or Fancy where the selected tab must stand out. Grey and Light active show selection mostly through a darker label.
Wire each tab to its panel with aria-controls, and label the panel by the selected tab.
Tabs are 36px tall, above the 24px minimum. Long labels wrap rather than truncate.
Use links in a <nav> with aria-current, not tabs, when each item loads a different page, as in an app sidebar.