v154 · scroll-marker-group · tabs mode

Tabbed carousel

A product page's tab strip, built entirely from the carousel primitives: scroll-marker-group: before tabs puts a marker group above the scroller, content: attr(data-label) turns each marker into a labelled tab, and :target-current styles the active one. There is no ARIA in the markup and no tab-switching script — in tabs mode the browser owns the tablist semantics, the roving focus, and the pruning of inactive panels.

The product page

Field recorder MK-II

A four-track field recorder with 32-bit float capture. This panel, like the other three, is a plain <section> — the tab above it is its ::scroll-marker, generated from data-label.

Specifications

Resolution
32-bit float / 192 kHz
Inputs
2 × XLR-TRS combo
Battery
14 h continuous

Reviews

“The clip-proof gain staging means one less thing to watch on set.” — Location Sound Weekly

“Menus you can operate with gloves on.” — Field Notes

Shipping

Ships in three days. In tabs mode a screen-reader user never wades through this panel from another tab: inactive panels are pruned from the accessibility tree, as if they were interactivity: inert.

The entire tab implementation

.product {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-marker-group: before tabs;   /* the whole tablist contract */
}
.product > section {
  min-width: 100%;
  scroll-snap-align: center;
}
.product > section::scroll-marker { content: attr(data-label); }
.product > section::scroll-marker:target-current {
  background: var(--text-black);
  color: var(--bg-ivory);
}

The Previous/Next buttons are ordinary script driving scrollTo() — they exist so the panels are reachable on any browser and so pointer users have large targets. The tab strip itself is the feature: activate a tab and focus stays on the tab; press Tab from the active tab and focus moves into the active panel; arrow keys move between tabs. That activation contract is §3.1.9 of the spec, and it is exactly what the hand-rolled ARIA version needs a script for.

see also