Limited visual presentation of text (AAA)

visual-presentation

WCAG success criterion: 1.4.8 (level AAA)
Outcome class: Manual. A tool cannot decide this check. The audit only points a person at it; it is never counted as automatically verified.
Area: Accessibility, Visual Presentation
Default severity: low
axe-core rule: visual-presentation

Why we flag this

Users with visual impairments or dyslexia have difficulty reading.

Insufficient CSS styling for line spacing or justified-text formatting.

What the rule checks

Scope. Every page in an AAA audit (a fixed page-wide UNTESTED note; justified text and line height are the automated text/* ids).

Expectation. Emits one page-wide UNTESTED note in every AAA audit, never a pass and never a violation. Strictly, 1.4.8 applies only to blocks of text, so a page without any (visual_no_text) should not get the note; the note is unconditional today, which is why no not-applicable case exists.

Why a person has to decide. 1.4.8 also requires that users can select foreground and background colours and that text blocks stay within 80 characters; whether a mechanism exists and how wide a block renders for the user's chosen font cannot be decided from markup or style.

Source. WCAG 2.2 SC 1.4.8 Visual Presentation (Level AAA), bullets 1, 2 and 5

Detection: page; needs dom.

Failing example

The check flags this for review. Corpus case text_and_layout. The page may contain further findings for other rules.

text_and_layout.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Text and layout corpus case</title>
    <style>
        .justified {
            text-align: justify;
        }
        .flex-reorder {
            display: flex;
        }
        .flex-reorder .second {
            order: 1;
        }
        .flex-reorder .first {
            order: 2;
        }
        .tight-box {
            width: 110px;
            height: 20px;
            overflow: hidden;
            font-size: 14px;
            line-height: 1.1;
        }
    </style>
</head>
<body>
    <main>
        <h1>Text alignment, reading order, and spacing</h1>
        <p class="justified">
            This paragraph uses justified text alignment, which creates uneven spacing
            between words and can make reading more difficult for some users.
        </p>
        <div class="flex-reorder">
            <div class="first">First in DOM</div>
            <div class="second">Second in DOM but shown first visually</div>
        </div>
        <div class="tight-box">This short line of text is clipped in a fixed-height overflow-hidden box.</div>
        <p>
            Die Bundesrepublik Deutschland ist ein demokratischer und sozialer Bundesstaat.
            Alle Staatsgewalt geht vom Volke aus und wird durch Wahlen und Abstimmungen sowie
            durch besondere Organe der Gesetzgebung ausgeübt.
        </p>
    </main>
</body>
</html>

This page is generated from the rule catalogue and the rule contracts; see therule overview for how the outcome classes are derived.