Learning objectives
Choose SVG or canvas from the task; understand viewBox and bitmap dimensions; provide a meaningful non-visual representation.
Prerequisites
Understand image alternatives, HTML nesting, and basic JavaScript for the canvas portion.
Two models solve different problems
SVG describes shapes as a structured vector document. A circle, path, and text element remain individual nodes that can be styled, inspected, and connected to events. This suits diagrams, icons, maps, and graphics whose structure matters. The viewBox establishes an internal coordinate system that can scale to a different rendered size.
Canvas provides a bitmap surface. JavaScript draws pixels through a context, such as the two-dimensional context. Once a rectangle has been drawn, it is not automatically a DOM node with its own label or keyboard behavior. To move or update it, the program normally redraws the relevant scene. This can suit games, visualizations, and image processing, but the application owns more of the interaction model.
Keep coordinates and display size distinct
An SVG viewBox has a minimum x and y plus width and height. A viewBox of 0 0 300 120 means the drawing uses those internal units even when CSS renders it at another size. Preserve meaningful proportions and avoid clipping labels when the graphic becomes narrow.
Canvas has width and height attributes defining its drawing buffer. Changing only the CSS dimensions scales that buffer and can blur the result. High-density display handling often requires a larger buffer and a scaled drawing context. That optimization should be tested rather than applied blindly, because larger buffers also increase memory and drawing work.
Neither graphics technology is automatically superior for performance. The number of nodes, redraw frequency, interaction requirements, and device capabilities all matter. Choose the simpler model that matches the data and test realistic content rather than comparing only one tiny rectangle.
Publish the meaning, not only the picture
A chart needs its values and relationships available beyond the visual pixels. An accessible name can identify the chart, but it rarely conveys every data point. Provide a nearby summary, table, or full text description. For decorative icons, avoid announcing redundant names that repeat adjacent text.
Canvas fallback content can describe the purpose for environments that do not render it, but it is not a complete substitute for designing accessible interactive controls outside the bitmap. SVG also requires care: a collection of unlabeled paths is not automatically an understandable diagram. Test the exposed accessibility tree and the reading sequence.
Working example
<figure>
<svg role="img" aria-labelledby="chart-title chart-desc" viewBox="0 0 320 140" width="320" height="140">
<title id="chart-title">Books borrowed this week</title>
<desc id="chart-desc">Fiction: 40 books. History: 25 books.</desc>
<text x="10" y="35">Fiction</text><rect x="90" y="15" width="200" height="28" fill="#147d64"/>
<text x="10" y="90">History</text><rect x="90" y="70" width="125" height="28" fill="#3b6fbe"/>
</svg>
<figcaption>Fiction: 40 books; history: 25 books.</figcaption>
</figure>Another example
<canvas id="sample-canvas" width="320" height="140">A green rectangle on a white background.</canvas>
<script>
const context = document.querySelector("#sample-canvas").getContext("2d");
context.fillStyle = "#147d64";
context.fillRect(30, 30, 220, 70);
</script>Expected output
The SVG draws two bars with text labels and a textual value summary. The canvas code draws one rectangle when run in a page with scripts enabled. The two examples illustrate different graphics models rather than equivalent chart implementations.
Common mistakes
Do not put essential interaction exclusively inside a canvas without keyboard alternatives. Do not confuse the canvas CSS size with its drawing-buffer size. Do not use color alone to distinguish chart series or assume a title element describes all chart data.
Accessibility and browser notes
Use meaningful accessible names and visible summaries for informative graphics. Text labels can overlap when localized or enlarged, so test more than the English sample. A data table is often the most robust companion to a chart.
Practice
Create an SVG circle with an accessible name and a visible caption explaining its meaning as a progress indicator.
Review the solution and reasoning
<figure><svg role="img" aria-labelledby="progress-name" viewBox="0 0 100 100" width="100" height="100"><title id="progress-name">Three of four lessons completed</title><circle cx="50" cy="50" r="35" fill="none" stroke="#147d64" stroke-width="10"/></svg><figcaption>3 of 4 lessons completed.</figcaption></figure>The text communicates the actual value. A plain circle alone does not visually encode 75 percent, so a real progress graphic would need a matching arc or use the native progress element. The accessible description must agree with what the UI claims.