Failure of Success Criterion 1.4.4 due to text sized in viewport units

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

This technique relates to Success Criterion 1.4.4: Resize text (Failure).

Description

The objective of this technique is to document the failure of text to re-scale when viewport units are used on text. As these units are relative to the viewport, it means they cannot be resized by zooming or adjusting text-size.

There are various methods to increase and decrease the size of text and other content, but viewport units applied to text (generally via font-size in CSS) prevent most available methods. Attempts to use browser controls to zoom or adjust text-size will not work. Only methods that completely override the CSS will work, and those could cause other issues such as layouts collapsing or text overlapping.

Note

If media queries were used to adjust the size of text or unit of measure at different screen sizes, it may not be a failure of Resize text. On-page controls provided by the author are also a way of passing the resize text success criteria.

Examples

Example 1: Failure example 1

The following CSS and HTML snippet uses VW units to size the text.

/* CSS */
.callout {
    font-size:1vw;
}

<p class="callout">
  Text that scales by viewport units<p/>

Example page with an example of text sized in vh units.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

In a desktop browser with a resizable window:

  1. Set zoom level to 100%.
  2. Set window size to 1280 pixels wide.
  3. Visit the page to be tested.
  4. Use any of the following methods to resize text when available:
    • the zoom feature of the browser
    • the text-sizing feature of the browser,
    • on-page controls for resizing text.
  5. Check that the text resizes by one of the methods above, and can be resized to at least 200% of the default.

Expected Results

  • If step #5 is false, then this failure condition applies and the content fails Success Criteria 1.4.4, Resize Text.