• Success Criterion 1.4.5
  • Conformance level AA

Text Drawn in a Canvas Element Instead of Real HTML Text

1.4.5 — Images of Text

Scenario

Setting

A recipe site's ingredient list

What’s wrong

Text in <canvas> when HTML text would suffice.

Example 

<canvas id="ingredients" width="300" height="200"></canvas>

const ctx = document.getElementById("ingredients").getContext("2d");
ctx.font = "16px sans-serif";
ctx.fillText("2 cups flour", 10, 20);
ctx.fillText("1 tsp baking soda", 10, 45);

Why it matters

A cook using a screen reader gets nothing from the canvas, since text painted onto a canvas surface has no text node for assistive tech to read.

How to test

Try to select text rendered inside a canvas element when the same content could be plain HTML text: canvas text isn't selectable, searchable, or resizable via text settings.

How to fix

Reserve canvas for actual graphics; render list content as normal HTML elements so it reaches accessibility APIs.

<ul class="ingredients">
  <li>2 cups flour</li>
  <li>1 tsp baking soda</li>
</ul>

Outcome

A cook's screen reader reads each ingredient aloud instead of announcing an empty, unlabeled canvas.

Who is affected

Screen reader users and anyone using text-to-speech get silence instead of the ingredient list, since canvas content isn't real text.

Learn more

Related scenarios