A text alternative, real buttons and an announcement
.sr-only text is read by a screen reader and invisible on screen. The buttons are pressed from code, like a keyboard user pressing Enter.
To a screen reader a canvas is one picture with nothing inside. Give it a text alternative, offer every part as a real button, announce changes politely, keep focus visible and check contrast with numbers.
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 announce(message) that works for repeated messages.
A button's text is #ff6b2c on #0b1118. Without running code, is it above 4.5:1? Then check with the example.
Explain it without notes
A screen-reader user opens a page with only a full-screen canvas. What do they get, and what three things would you add?
How do you make a live region announce the same message twice?
Console
Nothing logged yet.Expected console output
alt: An orange Lumen bike on a round stand, turning slowly. It has 4 parts you can choose: front wheel, rear wheel, handlebar and stem, bell.
announced: Front wheel selected. 120 euros. | pressed: 1
announced: Rear wheel selected. 130 euros. | pressed: 1
announced: Handlebar and stem selected. 60 euros. | pressed: 1
announced: Bell selected. 12 euros. | pressed: 1