• Success Criterion 1.4.5
  • Conformance level AA

Page Heading or Banner Exported as an Image File

1.4.5 — Images of Text

Scenario

Setting

A hospital's patient portal appointment scheduler

What’s wrong

Headings/banners exported as PNG/JPG/SVG-with-outlined-text for font styling reasons.

Example 

<img src="schedule-appointment-heading.png" alt="Schedule Your Appointment">
<!-- exported from a design tool as a PNG to preserve a custom display font -->

Why it matters

A patient with low vision who sets a larger system font size sees every heading grow except this one, since it's a static picture rather than text.

How to test

Try to select heading/banner text with the cursor: if it can't be highlighted because it was exported as an image for styling, it fails.

How to fix

Load the display font with @font-face or a web font service instead of rasterizing the heading.

<h1 class="page-heading">Schedule Your Appointment</h1>

.page-heading { font-family: "Museo Sans", sans-serif; font-weight: 700; }

Outcome

A patient increases their device text size and the appointment heading scales with the rest of the page.

Who is affected

Patients using browser zoom, custom fonts, or forced-colors modes can't adjust this heading like the rest of the page.

Learn more

Related scenarios