Designing and documenting focus order in Figma

WHY IT EXISTS A sighted mouse user skips around a page however they like, so visual layout is the only order that exists for them. A keyboard user or screen reader user has no such freedom, they move through the page in exactly one sequence, one Tab press at a time. Focus order exists as a design concern because that sequence is invisible in a static mockup, and if nobody decides it deliberately, the browser decides it by source order instead.

THE MENTAL MODEL Think of focus order as an audio guide track running underneath the visual design, a second, hidden layout that has to make just as much sense as the one you can see. A screen reader user experiences your page the way someone would experience a museum with the lights off and only a recorded tour to follow, so the tour script has to follow the same logic a sighted visitor would use, generally top to bottom, left to right, grouped by section.

HOW IT WORKS WCAG's focus order criterion requires that moving focus forward preserves meaning and operability, which in practice means matching logical reading order. In Figma this gets modeled two ways. First, structurally, nesting interactive elements inside Auto Layout frames in the order they should receive focus, since layer order is the closest visual proxy for source order. Second, explicitly, adding numbered annotations or a dedicated focus order overlay layer on top of the design, so a numeral sits on each interactive element showing its position in the tab sequence, handed off directly to engineering.

WHEN IT MATTERS It matters anywhere a layout uses CSS to visually reposition elements away from their source order, multi column forms, cards reordered with flexbox or grid, sidebars placed visually before content that is coded after it. The footgun is designing and reviewing only the visual arrangement, assuming source order will simply match, then discovering in QA that Tab jumps from a form field straight to the footer because the sidebar was coded last.

ONE CONCRETE EXAMPLE A checkout screen shows billing fields on the left and an order summary on the right. The intended focus order completes all eight billing fields before reaching the summary's two buttons. The designer places both sections in separate Auto Layout frames ordered billing first, adds numbered annotations one through eight across the billing inputs and nine and ten across the summary buttons, and leaves a note that the two column layout must not be allowed to reorder the underlying source.