labelChart keeps the description in step
labelChart reuses the paragraph that follows the chart, so the id stays desc-1 for every update. Three states: first draw, new data, no data.
A chart needs a short name that says the finding and a longer description that gives the shape, the extremes and the exceptions. Write both from the data, so they cannot disagree with the picture.
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 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write describeBars(rows) for rows { name, rides } that returns one sentence naming the top station and its rides, and "No stations" for an empty list.
Change the second example so the description paragraph is a <figcaption> inside a <figure>. What changes in the accessible tree and in the code?
Explain it without notes
Why write a short description and a long description?
Why generate the description from the data?
What does aria-describedby do?
Which edge cases should a description function handle?
Preview
Console
Nothing logged yet.Expected console output
1. first draw
aria-label: Line chart of rides per day
describedby: desc-1 | description paragraphs on the page: 1
text: 3 days, from 2 Jun 2025 to 4 Jun 2025. It starts at 2,979 rides, peaks at 3,992 on 3 Jun 2025 and ends at 3,759. The quietest day is 2 Jun 2025, with 2,979 rides.
2. after the data changed
aria-label: Line chart of rides per day
describedby: desc-1 | description paragraphs on the page: 1
text: 3 days, from 2 Jun 2025 to 4 Jun 2025. It starts at 2,979 rides, peaks at 4,100 on 4 Jun 2025 and ends at 4,100. The quietest day is 2 Jun 2025, with 2,979 rides.
3. after the data was emptied
aria-label: Line chart of rides per day: no data
describedby: desc-1 | description paragraphs on the page: 1
text: There are no rides to show.