Order interactive elements to match the content
Tab order comes out of source order, so wherever the controls sit in the markup is where focus will go. G59 asks that this order follow the sequences and relationships in the content, and W3C counts it as sufficient for the focus-order rule at Level A. Following the content is not quite the same as following the layout, which is the part worth reading twice. A form with two side-by-side sections, one for the applicant and one for their spouse, should finish the applicant before it starts the spouse, even though the eye reads across the pair. Get the source order right and the tab order comes free. Patch it with tabindex numbers instead and you have built a second order that has to be maintained alongside the first one forever.
How we find it in an audit
A reviewer tabs the page and writes down where focus goes, in order, then holds that list against the order a person would work through the content. Multi-column forms are the usual source of findings, along with anything inserted by script, since new content appended to the end of the document lands at the end of the tab order too. Positive tabindex values get listed on sight, because they reorder focus across the whole page rather than only where they were applied.
How affected users experience it
A screen-reader user tabbing a two-column form fills in half their own details, jumps to their spouse's address, comes back for their own postcode, and has no layout to explain why any of that happened. What they get is a form that keeps changing its mind. People with cognitive disabilities lose the thread the same way, and sighted keyboard users at least have the columns to reason about. One fix in the markup helps all three, and it costs nothing when it is done at the start.
Passes vs. fails
Passes
Fields sit in the DOM in interview order, so Tab walks them exactly the way a person would work down the form.
Fails
A two-column form uses tabindex to snake focus across name, city, email, state. That is nobody's reading order.
Other ways to satisfy this rule
8 guides on this site are filed under 2.4.3 Focus Order. W3C lists this one as sufficient for that rule on its own. Implement it correctly, in a way your readers' software actually supports, and the rule is met.
- C27sufficientMatch DOM order to visual order
- H102sufficientBuild modal dialogs with the native dialog element
- PDF3sufficientFix the reading and tab order in PDFs
- SCR26sufficientInsert new content right after its trigger
- SCR27sufficientReorder sections in the DOM, not just on screen
- F44failureDo not break tab order with positive tabindex
This guide is our interpretation of W3C technique G59: Placing the interactive elements in an order that follows sequences and relationships within the content. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.