Stage 1 · Lesson 9 of 9
Keyboard and screen reader basics
Many people use the web without a mouse: with a keyboard, a switch device or a , which reads the page aloud. Try yourself. Tab moves between links, buttons and inputs, and Enter and Space activate them.
Focus, the marker that shows where you are, must always be visible, so never remove outlines without replacing them. The focus order should follow the visual order, which it will if your HTML order matches the layout. Screen readers announce each element's (such as button or link) and its name (such as Save).
These come from semantic HTML, labels and . ARIA attributes fill gaps for custom widgets, but the first rule of ARIA is to use a native element when one exists. Check too: 4.5 to 1 for body text.
Common traptesting accessibility only with an automated tool, which misses most keyboard problems.
A question to check yourself, an AI practice session and 4 cheat sheet entries come with the full roadmap. Unlock
Resources for this stage
Start with· follow one of these
- CourseFreeThe Odin Project
The Odin Project · Beginner
Foundations course: HTML, CSS and the web built in your own editor, not a sandbox
- GuideFreeweb.dev
Google · Intermediate
Free Learn HTML, Learn CSS and Learn Accessibility courses explain the why behind layout