- 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
During an audit of a recipe site's ingredient list: text in <canvas> when HTML text would suffice.
Why it matters
Low-vision users who need scalable text, and people who customize fonts or colors. The practical effect on a recipe site's ingredient list: they can't perceive the control's boundary or state.
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
Real text must be used instead of an image of text (except logos or where the exact rendering is essential).
Outcome
That one change on a recipe site's ingredient list means they read the text clearly against its background.
Who is affected
Low-vision users who need scalable text, and people who customize fonts or colors.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Text-Heavy Content Rendered as an Image Instead of Real Text
- Page Heading or Banner Exported as an Image File
- Button or Navigation Label Rendered as an Image
- Marketing Text Baked Directly Into a Composite Image
- Restaurant Menu or Price List Uploaded as a Photo
- Screenshot of Text Used as the Page’s Primary Content