HTML Canvas
Canvas provides a bitmap drawing surface controlled through JavaScript. It suits generated graphics, but drawn shapes do not automatically become individual accessible HTML elements.
How it works
- Set width and height attributes for the drawing buffer. CSS sizing alone can stretch an existing bitmap rather than increasing drawing detail.
- Get a rendering context and draw through its API. Check that the context exists before calling drawing methods.
- Provide an accessible explanation or equivalent data. A chart drawn as pixels still needs its values available in another understandable form.
A practical example
<canvas id="places-chart" width="320" height="160" role="img" aria-label="Bike repair has eight places; tool care has six."></canvas>
<p>Bike repair: 8 places. Tool care: 6 places.</p>
<script>
const context = document.getElementById('places-chart').getContext('2d');
if (context) {
context.fillStyle = '#0f766e';
context.fillRect(30, 30, 160, 35);
context.fillRect(30, 90, 120, 35);
}
</script>
In a normal page, the two bars have lengths proportional to eight and six places. The nearby text provides the same underlying values without relying on the drawing.