A canvas: what can you give it?
"Offered" is the name or text a person's tool would receive. The last line proves the bars exist as pixels: eyes get them, a screen reader gets only your words.
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
nothing added | children: 0 | offered: nothing
fallback text | children: 0 | offered: "Rides, Monday to Friday: 2,979 to 3,992."
role + aria-label | children: 0 | offered: "Rides, Monday to Friday: 2,979 to 3,992."
aria-hidden | children: 0 | offered: nothing (hidden from assistive technology)
Pixel inside the first bar: 31,122,111,255