WCAG 2.2 Demo SuiteVisual Presentation
Blocks of text meet five requirements: user-selectable foreground and background colours, width of no more than 80 characters, no full justification, line spacing of at least 1.5 within paragraphs and 1.5 times that between them, and resizable to 200% without horizontal scrolling.
Who this affects
Users with dyslexia and low vision. Justified text creates rivers of whitespace that disrupt tracking; over-long lines make it hard to find the start of the next line.
The failure and the fix
Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.
Fails 1.4.8
Open the failing example in a new tab
fail.html — the problem
<h1>About the shop</h1>
<div class="article">
<!-- FAILURE 1 — line length: with no max-width, lines run far past the
80-character limit on a wide screen. The eye loses the start of the next
line, which is exhausting for readers with dyslexia and low vision.
FAILURE 2 — justification: forcing both edges flush creates rivers of
white space running down the paragraph, which disrupt tracking.
FAILURE 3 — line height 1.25, under the 1.5 the criterion requires.
FAILURE 4 — paragraph spacing smaller than the line spacing, so the
paragraphs run together into a single block.
FAILURE 5 — no mechanism for the user to set foreground and background
colours, and the layout would break if they tried. -->
<p>Riverline Books opened in 1998 in a narrow shop by the river, with about four
thousand second-hand books and a single armchair. We have grown into three
shops across the county, but the armchair is still there, and so is the habit
of letting people sit and read for as long as they like.</p>
<p>We buy books as well as sell them. If you have a collection you are thinking of
parting with, our buyers visit on Tuesdays and Thursdays, and we will always
give you an honest valuation even when the answer is that the books are worth
more to you than to us.</p>
</div>Meets 1.4.8
Open the passing example in a new tab
pass.html — the fix
<h1>About the shop</h1>
<!-- FIX 5: a mechanism for the user to choose foreground and background
colours. This is the requirement teams most often miss, because the other
four are just CSS defaults. A reading-mode control like this satisfies it. -->
<div class="reader-controls">
<fieldset style="border:0;padding:0;margin:0">
<legend style="font-weight:700">Reading colours</legend>
<button type="button" class="button button--secondary" onclick="setTheme('')">Default</button>
<button type="button" class="button button--secondary" onclick="setTheme('theme-sepia')">Sepia</button>
<button type="button" class="button button--secondary" onclick="setTheme('theme-dark')">Dark</button>
</fieldset>
</div>
<div class="article" id="article">
<p>Riverline Books opened in 1998 in a narrow shop by the river, with about four
thousand second-hand books and a single armchair. We have grown into three
shops across the county, but the armchair is still there, and so is the habit
of letting people sit and read for as long as they like.</p>
<p>We buy books as well as sell them. If you have a collection you are thinking of
parting with, our buyers visit on Tuesdays and Thursdays, and we will always
give you an honest valuation even when the answer is that the books are worth
more to you than to us.</p>
</div>
<!-- All five requirements, for blocks of text:
1. the user can select foreground and background colours
2. lines are no wider than 80 characters (40 for CJK)
3. text is not justified to both margins
4. line spacing at least 1.5 within paragraphs, and paragraph spacing at
least 1.5 times the line spacing
5. text resizes to 200% without horizontal scrolling
Points 2, 3 and 4 are free - they are good typography and you should be
doing them at any conformance level. Point 1 is the real work, and it is
why 1.4.8 sits at AAA. -->How to test it
Measure line length, line height, and paragraph spacing. Confirm text-align is not justify. Confirm a colour-adjustment mechanism exists or the page respects user stylesheets.
-
Automated
Line height and justification are computable from CSS; the colour-selection mechanism requirement is not.
No axe rule maps to this criterion. It has to be checked by a person.
-
Keyboard
Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.
-
Screen reader
Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.
-
Visual
Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.
Related criteria
In the specification
- Understanding 1.4.8 Visual Presentation — the W3C explanation, intent and exceptions
- 1.4.8 in the WCAG 2.2 Recommendation — the normative wording