Before you begin
You can recognise links, buttons and form fields. No specialist assistive technology is needed to begin.
What you are working towards
A small interface with a sensible keyboard route and clear feedback.
Follow the stations in order, or revisit a topic when you need it. Use your browser’s Back command to return here. This path does not track or save your progress.
Choose the correct control
Separate navigation from actions. Explain why a clickable div needs more work than a button.
Follow the focus
Tab through a page and identify the focused element at every step.
Give fields clear names
Connect labels to fields and check that the relationship is visible in the markup.
Explain errors and recovery
Compare field-specific feedback with an unhelpful generic error.
Make focus changes deliberate
Decide when focus should move and when it should stay in place.
Open a dialog and return
Use the keyboard to open, navigate and close the native dialog. Check the return point.
Complete a local practice check
Use fictional values, trigger errors and correct them without a mouse.
Your final task
Review the practice form and dialog using only the keyboard. Write down one complete route through each, including an error and a recovery step.
Check your understanding
- Focus is visible and follows a sensible sequence.
- Each control has a meaningful label.
- Escape closes the dialog and focus returns to its opener.
- Validation explains what to fix without claiming a message was delivered.
- Remember that keyboard testing is one part of accessibility, not a complete certification.
Using AI along the way
You may ask an AI tool to explain a line or suggest an alternative. Then predict the result, inspect the output and test it yourself. Do not treat a confident answer as proof. This project was itself developed with substantial AI assistance: read the transparent account and Mario’s web journey.
Practise predicting what code does · Practise reviewing AI code