Do not open dialogs far from their trigger
A button opens a dialog whose markup lives at the bottom of the document, so a keyboard user has to tab the whole page to reach the thing they just opened. F85 is the failure technique for that, and a match is a defect rather than a pattern. Two moves clear it and you only need one of them. Send focus into the dialog when it opens, or put the dialog next in the tab order, which is what inserting it immediately after its trigger does for free. Closing is the half everyone forgets. Focus should return to the control that opened the dialog, and where that control has gone, to whatever now sits where it was. Sending focus somewhere else deliberately is fine when the somewhere else is logical. Delete a tag, land on the next tag, no failure.
How we find it in an audit
Keyboard only, and in both directions. A reviewer activates the trigger, checks whether focus moved into the dialog, and if it did not, presses Tab once to see whether the dialog is next. Either answer passes. Then the dialog gets closed by its own button and by the Escape key, and we watch where focus lands, because closing breaks far more often than opening does. Where closing removes the trigger, we check that focus went somewhere a person would expect rather than back to the top of the document.
How affected users experience it
A screen-reader user presses the button and the page reads straight on from where it was, as though nothing had happened. Nothing announces that a dialog exists, so they tab, and tab, through a page's worth of links to find it. Closing strands them harder. Focus drops to the top of the document, the place they spent a minute reaching is gone, and the quickest way back is often to reload the page and start again.
Passes vs. fails
Passes
button.onclick = () => {
button.after(menu); // insert right after the trigger
menu.querySelector("a").focus();
};
menu.onclose = () => button.focus(); // and put focus back on the way outFails
button.onclick = () => document.body.append(menu); // the menu lands at the end of the DOMThe other techniques filed under this rule
8 guides on this site are filed under 2.4.3 Focus Order. W3C documents this one as a failure of that rule, so it describes a way the rule gets broken rather than a way to pass it.
- C27sufficientMatch DOM order to visual order
- G59sufficientOrder interactive elements to match the content
- 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
This guide is our interpretation of W3C technique F85: Failure of Success Criterion 2.4.3 due to using dialogs or menus that are not adjacent to their trigger control in the sequential navigation order. 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.