A day reader: a slider with words for its value
Tab is left alone (prevented: false). announce() makes one polite live region (role=status) on first use and clears it before each message.
People who cannot use a mouse need a way to walk through a chart's data with the keyboard. Make the chart one Tab stop, move with the arrow keys, show where focus is, and say each value aloud with a slider's text or a live region.
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.
Make a three-item toolbar of buttons a roving tabindex. Which attribute changes on which keys?
Add Page Down to the first example, moving three rows at once. Where in the code?
Explain it without notes
What is a roving tabindex and why use it?
Which keys should a chart handle, and which must it leave alone?
Why is swallowing Tab a failure?
When do you use a live region instead of moving focus?
What is aria-valuetext for?
Preview
Console
Nothing logged yet.Expected console output
ArrowLeft -> valuenow: 2 | valuetext: Wed 4 Jun: 3,759 rides | prevented: true
ArrowLeft -> valuenow: 1 | valuetext: Tue 3 Jun: 3,992 rides | prevented: true
Home -> valuenow: 0 | valuetext: Mon 2 Jun: 2,979 rides | prevented: true
ArrowLeft -> valuenow: 0 | valuetext: Mon 2 Jun: 2,979 rides | prevented: true
Tab -> valuenow: 0 | valuetext: Mon 2 Jun: 2,979 rides | prevented: false
Region says: "Showing August." | role: status
Cleared first: ""
Region says again: "Showing August."