The same chart, three ways
The function accessibleName follows the browser's order: aria-labelledby, aria-label, then a title child. In your own work, never write this yourself: set the attribute and let the browser compute the name.
A screen reader does not look at your chart. It reads the accessibility tree the browser builds from the page, so an SVG with no name is "image" at best, and a canvas with nothing added is silent.
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 the HTML for an SVG of the stations chart that gives it a role and a name with the finding "Lantern was the busiest station in July with 7,260 rides".
A teammate adds aria-hidden="true" to the rides line "because it already has a table". Say what a screen reader user now gets and what to change.
Explain it without notes
What is the accessibility tree and why does a screen reader read it instead of the page?
What does a screen reader get from an SVG with no role and no name? From a canvas with nothing added?
Where does the browser take an accessible name from, in order?
Why is aria-label="chart" almost as bad as no label?
Why does a team still need to test with a real screen reader after reading the tree?
Preview
Console
Nothing logged yet.Expected console output
bare | role: (none) | name: (empty)
role only | role: img | name: (empty)
labelled | role: img | name: "Rides per day, 2 to 8 June 2025. M..."
Bars in every version: 7, 7, 7