HTML Canvas Accessibility: Fallback and Alternative Content

Imagine opening this page on a slow phone connection. The media should still be worth the wait and have a sensible fallback.

What You Need to Know

Canvas graphics are pixels, so a screen reader cannot infer what they mean. Include fallback text and a separate table or explanation when the drawing carries important information.

Try the Example

Take a look at the example. We’ll explain the important lines right below it.

<canvas id="drawing" width="500" height="250">A blue rectangle appears here.</canvas>
<script>
    const drawingCanvas = document.querySelector("#drawing");
    const drawingContext = drawingCanvas.getContext("2d");
    drawingContext.fillStyle = "blue";
    drawingContext.fillRect(30, 30, 160, 90);
</script>

Let’s Read the Code

<canvas>: A canvas is a drawing surface. JavaScript produces the drawing.
<script>: Script contains JavaScript, data, or other browser-understood script formats depending on type.
id: An id uniquely identifies an element on this page.
width: Width gives a preferred or intrinsic media width, depending on the element.

Read the named elements and attributes together. They explain how the browser connects this feature to the rest of the page.

What Happens in the Browser?

The paths shown here refer to files in your own example project. Put real images and recordings in those locations before expecting them to load.

What if the resource is missing? Test the page with the media path temporarily broken. The surrounding text should still explain the important idea, and controls should remain understandable. This is especially important for slow connections and accessibility.

Your Turn

Try changing one file path or attribute. Notice whether the browser falls back to another source or shows missing content.

Common Beginner Mistakes

Leaving out real media files or understandable text alternatives.
Always check keyboard access, readable alternatives, and any missing files; a perfect player layout does not guarantee accessible content.

Key Takeaways

Canvas graphics are pixels, so a screen reader cannot infer what they mean.
<canvas>: A canvas is a drawing surface. JavaScript produces the drawing.
A meaningful HTML element is usually a stronger starting point than adding an ARIA role to a generic div. Also check what happens using only the keyboard.