CSS Carousel Keyboard Navigation: tabs vs links
Carousel dots turn into a long row of Tab stops for keyboard users. Should Chrome 154’s scroll markers act as links or as tabs?
- Chrome 154 adds explicit links and tabs modes to scroll-marker-group.
- Choose between independent navigation links and a tabbed slide picker.
- before and after control placement and navigation order, not the interaction mode.
Choose the focus model before styling the dots
If every carousel dot becomes a Tab stop, check the mode. Chrome 154's scroll-marker-group update makes links the default and allows an explicit tabs choice.
| Mode | Keyboard entry | Exposed roles |
|---|---|---|
| links | Each marker is a Tab stop. | navigation and link |
| tabs | Tab reaches the active marker; arrow keys switch markers. | tablist, tab and associated tabpanel |
The CSS Overflow 5 editor's draft also hides inactive tab content from the accessibility tree. Choosing tabs changes how content is exposed, not just how quickly a keyboard user skips a row of dots. A section navigator and a slide picker can therefore need different modes.
Placement and interaction are separate choices
For a container that already has its scrolling layout, the key declarations can be as small as these:
/* A slide picker */
.slides { scroll-marker-group: after tabs; }
/* Links to content sections */
.sections { scroll-marker-group: after links; }In Robert Flack's implementation demo, Enter activates a link marker and subsequent Tab navigation proceeds from its target content. Arrow keys retain ordinary page-scrolling behavior. In tabs mode, arrows move between markers and slides instead.
Use before or after to place the group in the expected visual and navigation order. Moving it above the content with styling while leaving it later in keyboard order can make the page difficult to follow.
Generate meaningful markers, then show focus
A group declaration does not supply slide labels. A generated marker needs a non-none content value. With a label such as data-label="Product photo 1" on each slide, a minimal marker treatment is:
.slide::scroll-marker { content: attr(data-label); }
.slide::scroll-marker:target-current { font-weight: bold; }
.slide::scroll-marker:focus-visible {
outline: 2px solid currentColor;
}The current slide and the keyboard focus are different states. Preserve both cues when changing text labels into visual dots. These declarations cover markers; they do not create the scrolling layout or an autoplay system.
Check the value, then test the journey
CSS.supports() accepts a property-value pair, so use CSS.supports('scroll-marker-group', 'after tabs') to check the intended mode. Keep readable content and a usable navigation fallback where it is unavailable.
Then follow the actual Tab, Shift+Tab and arrow-key sequence, including links inside the selected slide. Check the names exposed for markers. If you add autoplay, the WAI carousel pattern calls for a rotation control and stopping when keyboard focus enters. Native markers reduce the interaction code you need to supply; the final carousel still needs to match its content and users.