A canvas for a screen reader: label, text and a table twin
A canvas has no words of its own. The label, the inner text and the table all come from your code. Phase 15.1 shows what a screen reader announces.
Animating a canvas is a loop that clears, updates by elapsed time and paints again before every screen refresh. A canvas is one image to a screen reader, so every canvas also needs words and a table.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a loop that moves a dot 120 pixels a second to the right, wraps at x = 300, and stops after 3 seconds of animation time, using dt.
Write describeWeek(week) that returns the text for aria-label, including the busiest day, and handles an empty array.
Explain it without notes
Why use seconds and dt instead of pixels per frame?
Why clamp dt?
How do you avoid running two animation loops at once?
Preview
Console
Nothing logged yet.Expected console output
role: img
aria-label: Bar chart of rides per day, 2 to 8 June 2025. Busiest: Tue, 3992. Quietest: Mon, 2979.
table twin rows: 8 (1 header + 7 days)
same numbers in picture and table: true
empty week: No rides to show.