Before this lesson
Have a small page with links, a form and images. Be able to use Tab navigation and DevTools.
What you will be able to do
Use repeatable checks to find usability defects that screenshots cannot reveal.
Understand the mechanism
Start with completing a task using only the keyboard: reach a form, enter data, correct an error and finish. Track focus throughout rather than merely checking Tab reachability. Focus must remain visible, logically ordered and unobscured.
Controls need accessible names. Visible labels are usually easier to understand and maintain than aria-label alone; icon-only buttons need special care. Labeling every container is not a universal improvement. Prefer native semantics.
Use appropriate status regions for dynamic feedback and associate errors with fields while preserving input. Include text rather than relying on color. Keyboard focus and screen-reader navigation differ, and automated checks do not replace task-based review.
Test at 200% zoom, narrow widths and with long labels or errors. Declare document and relevant local languages. Report each issue with trigger, actual behavior, expected behavior and a minimal fix rather than a vague accessibility complaint.
Runnable example
Run HTML examples as separate .html files in a modern browser. Prepare resource files and multi-file modules as described in the lesson.
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Honeysuck practice</title></head><body>
<a href="#content">Skip navigation</a><nav aria-label="Main"><a href="#content">Practice</a></nav>
<main id="content" tabindex="-1"><h1>Contact practice</h1>
<form id="contact"><label for="email">Email</label><input id="email" type="email" required aria-describedby="hint"><p id="hint">Enter a complete email address.</p><button>Check</button></form><p id="feedback" role="status"></p></main>
<style>:focus-visible{outline:3px solid #176343;outline-offset:4px}input{max-width:100%;box-sizing:border-box}</style>
<script>document.querySelector('#contact').addEventListener('submit',event=>{event.preventDefault();document.querySelector('#feedback').textContent='Format accepted. No message was sent.';});</script>
</body></html>Trace and verify
Without a mouse, use the skip link, email control and submit. Test empty, malformed and valid values. Success must clearly describe a format check only. Inspect the accessibility tree for the Email name and hint relationship, then verify zoomed usability.
Common mistakes and boundaries
Do not wrap the entire page in a live status region. Positive tabindex values create fragile ordering, and making every paragraph tabbable does not reproduce screen-reader navigation.
Practice challenge
Audit the profile project with at least six recorded cases, including keyboard use, zoom, long content and broken destinations.
Reference solution and reasoning
Organize around tasks such as navigation, project access, explanation, return, contact and recovery. Record fixes and retests; mark untested cases as pending instead of passing them.