Focus map ordering
Focus map ordering
Section titled “Focus map ordering”This example wires a deterministic tab order across several controls while leaving the rest of the page reachable. Press Tab on the anchor to move into the mapped buttons and then Tab from the final button to continue beyond the pattern—there is no enforced loop.
Focus map demo
Custom tab order with a natural exit.
View source
Focus anchor
<div id="focus-map-anchor" tabindex="0">Focus anchor</div><div data-automagica11y-focus-map=".primary; .secondary; .tertiary" data-automagica11y-focus-map-scope="self" data-automagica11y-focus-map-anchor="#focus-map-anchor"> <button class="primary">Primary action</button> <button class="secondary">Secondary action</button> <button class="tertiary">Tertiary action</button></div>By default, Tab from the anchor jumps into the sequenced buttons, Shift+Tab from the first button returns to the anchor, and Tab from the final button lands on the “Continue beyond the map” link. The focus map never traps or loops so the next focusable element stays reachable.