SC-1.4.5 · c02: Heading replaced by background image of text

Rule: Heading rendered as CSS background image of text

Corpus WCAG 2.2Applies to WCAG 2.0, 2.1, 2.2Level AAAutomatable: partial

Summary: A heading is presented as a CSS background image of text with visible text hidden.

Why it fails: Users who need to resize or restyle headings cannot because the visible heading is a background image with the real text pushed off-screen.

Failure technique

Synthetic specimen — no W3C failure technique.

Understanding

https://www.w3.org/WAI/WCAG22/Understanding/images-of-text

Quickref

https://www.w3.org/WAI/WCAG22/quickref/#images-of-text

Intentional failure — audit this region

SC-1.4.5 · c02

Summer sale

The heading above is styled as a background image of text with visible text hidden.

<h2 class="sc145c02-heading">Summer sale</h2>
<p>The heading above is styled as a background image of text with visible text hidden.</p>

Expected audit result

1.4.5: fail — Specimen demonstrates an alternate 1.4.5 failure using background-image on a heading.

Manual check: Confirm the heading text could be rendered with real text and CSS instead of a background image.