Limited visual presentation of text (AAA)

text/justified

WCAG success criterion: 1.4.8 (level AAA)
Outcome class: Hint only. An automated check that by design reports review hints only: its findings are marked for manual review, never as confirmed violations.
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. Blocks of text: paragraphs with text content that are rendered.

Expectation. One page-level review when at least one rendered paragraph is set with text-align: justify, however the author set it: in a stylesheet rule, in the style attribute, or in a media query that applies in an audited viewport. Headings, captions and other short labels are not blocks of text. A hidden paragraph is not presented and does not count. Review, not a violation: 1.4.8 asks for a mechanism, which a user stylesheet may provide.

Source. WCAG 2.2 SC 1.4.8 Visual Presentation (Level AAA), bullet 3: text is not justified

Detection: shared; needs dom, stylesheets.

Failing example

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

visual_text_inline_style.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Justified paragraph set with an inline style</title>
</head>
<body>
<header>
  <a href="#main" style="display: inline-block; min-width: 44px; min-height: 44px; line-height: 44px; padding: 0 8px">Skip to main content</a>
  <p>City library news</p>
  <nav aria-label="Main"><a href="#main" aria-current="page" style="display: inline-block; min-width: 44px; min-height: 44px; line-height: 44px; padding: 0 8px">Overview</a></nav>
</header>
<main id="main">
  <h1>Opening of the new reading room</h1>
  <!-- CMS output: the alignment and line height sit in the style attribute,
       not in a stylesheet. The paragraph is still justified and tight. -->
  <p style="text-align: justify; line-height: 1.2">The new reading room on the second floor
     opens next Monday. It offers forty quiet desks, daylight from three sides and a small
     collection of local history for everyone with a library card.</p>
</main>
<footer><p>Footer text</p></footer>
</body>
</html>

Passing example

The check reports nothing here. Corpus case visual_text_presentation_ok. The page may contain further findings for other rules.

visual_text_presentation_ok.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Readable paragraphs with a tight heading and caption</title>
<style>
  /* normalize.css default on html, overridden where paragraphs are set. */
  html { line-height: 1.15; }
  body { color: #111111; background: #ffffff; }
  p { line-height: 1.6; text-align: left; }
  /* Not blocks of text: a justified heading and a compact caption. */
  h1 { text-align: justify; line-height: 1.1; }
  figcaption { line-height: 1.2; }
  /* Collapsed legal text: justified and tight, but not presented. */
  .legal { text-align: justify; line-height: 1.2; }
</style>
</head>
<body>
<header>
  <a href="#main" style="display: inline-block; min-width: 44px; min-height: 44px; line-height: 44px; padding: 0 8px">Skip to main content</a>
  <p>City library news</p>
  <nav aria-label="Main"><a href="#main" aria-current="page" style="display: inline-block; min-width: 44px; min-height: 44px; line-height: 44px; padding: 0 8px">Overview</a></nav>
</header>
<main id="main">
  <h1>Opening of the new reading room</h1>
  <p>The new reading room on the second floor opens next Monday. It offers forty
     quiet desks, daylight from three sides and a small collection of local history.</p>
  <p class="legal" hidden>Terms of use: the reading room is open to all card holders under
     the library rules in force at the time of the visit.</p>
  <figure>
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120'%3E%3Crect width='240' height='120' fill='%23336699'/%3E%3C/svg%3E"
         alt="Floor plan of the second floor" width="240" height="120">
    <figcaption>Second floor, reading room on the left</figcaption>
  </figure>
</main>
<footer><p>Footer text</p></footer>
</body>
</html>

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