SCR26Sufficient technique WCAG 2.4.3 Level A Human testing required

Insert new content right after its trigger

SCR26 is a sufficient technique for focus order, qualified for the case where a page changes while somebody is on it. The method is one line of DOM work and it settles two problems at once. Put the new node immediately after the element that triggered it, leave focus on the trigger, and the browser's own defaults do the rest. Tab moves into the new content because that is what comes next. A screen reader reaches it for the same reason. W3C's scope here is narrower than the way the technique gets quoted, because the test procedure is written around non-popup dialogs opened from a button or link click. Menus, tooltips and expanding panels benefit from the same placement and are not what the procedure describes. The failing shape is always the same. The panel renders beside its button on screen and sits after the footer in the markup.

How we find it in an audit

The check is DOM inspection rather than observation, and that is the part people skip. Open the thing, then look at where it landed in the tree rather than where it landed on screen. CSS will happily place a node next to its button from the other end of the document. Then tab once. If focus goes anywhere other than into the new content, the placement is wrong however it looks. Automated tools can find nodes appended to body and flag them for review. Deciding whether the resulting order still makes sense is a reading job.

How affected users experience it

Someone activates a button, hears nothing new, and tabs forward expecting the panel they just opened. Instead they get the next link in the navigation, then the one after that, then the footer, and somewhere past all of it the content that was supposed to be right there. Most people give up long before they reach it, and reasonably conclude the button did nothing. The panel is on screen the whole time. It is just filed at the end of the page, where nobody would think to look for it.

Passes vs. fails

Passes: focus follows the layout. Fails: focus teleports around the page.

Passes

button.insertAdjacentElement("afterend", panel);
// The panel is now the next thing in the document, so it is the next thing Tab reaches.

Fails

var panel = document.createElement("div");
document.body.appendChild(panel);
// CSS puts it beside the button. The DOM puts it after the footer.

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 when used for changing a web page dynamically, so the condition is part of the test rather than a footnote to it.

This guide is our interpretation of W3C technique SCR26: Inserting dynamic content into the Document Object Model immediately following its trigger element. 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.