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

Important Information about Techniques

See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.1 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.1.

Applicability

All technologies.

This technique relates to:

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:

Tests

Procedure

  1. Check visible content elements at a desktop viewport width such as 1280px
  2. 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%)
  3. 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 discolure 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.