Slide one
The dots under this carousel are ::scroll-marker pseudo-elements — no markup, no script. The mode keyword decides what they are to a keyboard and a screen reader.
v154 · scroll-marker-group · grammar
Mode switcher
The grammar is none | [ [ before | after ] || [ links | tabs ] ]: position and mode combine in any order, and either may stand alone. Flip every variant on a live carousel, and read back what the parser and the computed style actually did with each one — browsers that shipped the intermediate grammar accept some of these and reject others.
Switch the value
Slide two
In links mode every dot is a sequential tab stop with the link role inside a navigation landmark.
Slide three
In tabs mode the group is a tablist with roving focus: one tab stop, arrow keys to move, panels pruned when inactive.
The rule
| declaration | grammar generation | parsed? |
|---|
Parsing is not semantics. A browser can accept after tabs at the parser and still not implement the role and focus contracts of §3.1.6 — that behaviour lives in the accessibility tree, which page script cannot inspect. The focus-order journal records the keyboard half of the contract; the role half needs a screen reader or the DevTools accessibility panel.
what the two modes mean
| surface | links (default) | tabs |
|---|---|---|
| ::scroll-marker-group role | navigation | tablist |
| ::scroll-marker role | link | tab |
| originating element role | unaffected | tabpanel |
| tab stops | every marker, in order | only the active marker; arrow keys rove |
| activation focus | moves the sequential-focus starting point to the target; marker loses focus | stays on the marker |
| inactive content | stays in the accessibility tree | pruned, as if inert |