Failure of Success Criterion 1.4.10 due to content disappearing and not being available when content has reflowed

Applicability

All technologies.

This technique relates to:

Success Criterion 1.4.10: Reflow (Failure)

Description

This document describes a failure that occurs when a change of the viewport width to 320px makes content disappear that was available at wider viewport widths. Some content available at wider widths may not be shown in the same way or at the same position at the viewport width of 320px, simply because there is less space (screen 'real estate') to display it. This content, however, should still be available after reflow to 320px viewport width, either by being repositioned in a single column view, or through some interaction offering the information in some other way, for example, in a disclosure area, a dialog, or via a link to another view.

Examples

The following examples demonstrate the failure to make content visible at a wider viewport width also available after a reflow to 320px:

A block of blog entry links in a side column disappears entirely after reflow (i.e., it is not available further down in the single column view).
Labels above text inputs are hidden and replaced by placeholder text after reflow, without a technique showing dedicated labels when focusing the fields.
Sections of content text disappear after reflow, without being available via some disclosure widget.
Information-carrying images disappear after reflow, without link or the availability of an equivalent alternative.
A global search field disappears after reflow, without an icon or menu option to reveal a search function or reach an equivalent search page.

Tests

Procedure

Check visible content elements at a desktop viewport width such as 1280px
Set the viewport width to 320px by narrowing the browser window, or by zooming in so that the viewport width is now 320px (when starting with a 1280px viewport width at 100% browser zoom, this can be done by zooming in to 400%)
For each content element that is not provided at the viewport width of 320px, check that there is a way to reach the same or equivalent content via disclosure widgets, pop-ups, or links to other views

Expected Results

If #3 is false, then this failure condition applies and the content fails this Success Criterion.