F102Documented failure WCAG 1.4.10 Level AA Partly scanner-detectable

Do not let content vanish when the page reflows

At the reflowed 320-pixel width, which is the same measurement as 400% zoom on a 1280-pixel screen, part of the page has simply gone. Navigation entries dropped, a table column hidden, a help widget switched off by a breakpoint. F102 is the failure technique for that, so a match is a defect rather than a responsive strategy. Three ways of surviving the reflow count. The content can restack into a single column, it can move behind an interaction like a disclosure or a dialog, or it can move to another view with a link pointing at it. That last route is the cheapest fix for a wide table and almost nobody reaches for it. One exception is worth knowing as well. Content that needs two dimensions to mean anything, such as a data table, a map or a code sample, sits outside the rule.

How we find it in an audit

We inventory what is visible at a desktop width first, take the viewport down to 320 pixels, and inventory it again, and the finding is whatever went missing between the two. Anything absent gets one more question. Can it be reached from this view by a disclosure, a dialog or a link. The subtle case takes its own pass, which is a label replaced by placeholder text. Nothing looks missing there, because words are still sitting in the box, and the label has gone all the same.

How affected users experience it

Low-vision readers at 400% zoom get a version of your site nobody tested. The order history link that exists on a laptop is not in the narrow menu, and there is no way to tell it was ever there, so the reasonable conclusion is that the feature does not exist. Screen-magnifier users arrive at the same place by the same route. Both groups end up phoning support to ask for something the site does perfectly well, on a screen they cannot use.

Passes vs. fails

Passes: one column, no side-scroll. Fails: every line scrolls sideways.

Passes

@media (max-width: 480px) {
  .order-history { grid-template-columns: 1fr; } /* restack it, or link out to a full view. Keep it reachable */
}

Fails

@media (max-width: 480px) {
  .order-history { display: none; }
}

How this gets tested

The W3C publishes test rules that define what a checker looks for here.

Meta viewport allows for zoomA tool can check this

The other techniques filed under this rule

11 guides on this site are filed under 1.4.10 Reflow. 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.

This guide is our interpretation of W3C technique F102: Failure of Success Criterion 1.4.10 due to content disappearing and not being available when content has reflowed. 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.