Structure, keyboard, and focus
Build a meaningful page outline
Use title, language, landmarks, headings, lists, and regions to make the page navigable.
9 minute lesson
Before choosing a tool or writing more code, make the requirement concrete. The event page has one clear main heading, logical subsections, a main landmark, and a named registration region.
Structure gives users multiple ways to understand and move through a long page. The useful target is not encyclopedic coverage. Make one deliberate choice, observe its consequences, and know which requirement would make you revise it.
A common failure is to choose heading levels for visual size or wrap every container in a generic div. The happy path may still work, which makes the mistake easy to miss. write the content outline first and use semantic landmarks and ordered heading levels to express it. Keep the first version small enough that every important input and output remains visible.
This supports the module goal: Make page structure and every interaction understandable and operable without a mouse. Capture the request, command, trace, screenshot, test result, or other evidence that proves the result.
Navigate the page by headings and landmarks in an accessibility tool and repair every ambiguous stop. Change one condition on purpose, predict the result, and compare the prediction with what actually happened.
Lesson completed