Text given viewport units that does not rescale

Status

New technique (Draft)

Applicability

HTML/CSS documents

This technique relates to:

1.4.4 Resize Text

Description

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

Please note: If media queries were used to adjust the size of text or unit of measure at different screensizes, it may not be a failure of text-sizing.

Failure Example #1

<html>
<head>
<style>
  .callout {
     font-size:1vw;
  }
</style>
</head>
<body>
  <main>
    <p class="callout">
      Check out our conference.
    </p>
  </main>
</html>

Resources

Related Techniques

Using media queries (CSS). Ref: em based media queries (Future technique)
Using CSS grids to reflow content (CSS). Ref: fluid grids (Future technique)
Using CSS Flexbox to reflow content (CSS) (Future technique)
SCR34: Calculating size and position in a way that scales with text size (Scripting)
G206: Providing options within the content to switch to a layout that does not require the user to scroll horizontally to read a line of text

Test

Set zoom level to 100%.
Set window size to 1280 pixels wide.
Visit the page to be tested.
Use the zoom feature of the browser, and the text-sizing feature if available.
Check that the text resizes, 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 these Success Criteria.