Per-element focus links
Per-element focus links
Section titled “Per-element focus links”Link individual controls together without maintaining a long focus map. The demo below wires three playback buttons so Tab and Shift+Tab cycle through the authored order regardless of DOM placement.
Per-element focus links
Custom neighbors with next/prev selectors.
View source
<section data-automagica11y-focus-scope="#focus-links-deck"> <button id="shuffle" data-automagica11y-focus-next="#repeat">Shuffle</button> <button id="play" data-automagica11y-focus-next="#queue" data-automagica11y-focus-prev="#shuffle">Play</button> <div id="focus-links-deck"> <button id="repeat" data-automagica11y-focus-prev="#play">Repeat</button> <button id="queue">Queue</button> </div></section>Press Tab on “Shuffle” to advance through Play → Repeat → Queue, then Shift+Tab to move back up the chain. Hidden or disabled targets are skipped automatically, so the authored order stays accessible.