HTML accessibility basics
Check names, focus order, landmarks, and alternatives with a keyboard.
- Difficulty
- beginner
- Time
- 45 minutes
- Last verified
- 9/21/2026
What you will build
Complete a mouse-free review and fix actual barriers.
Understand the idea first
Native elements, logical order, and accurate names provide the foundation.
Build it step by step
<a href="#main-content">Skip to main content</a>
<header>…</header>
<main id="main-content">
<h1>My learning page</h1>
…
</main>
<a href="pages/about.html" aria-label="Read about me">👤</a>- Tab through the page without a mouse.
- Determine every control's action from its name.
- Add a skip link when navigation is long.
- Zoom to 200% and record hidden content.
Read the important lines
- Native controls include keyboard behavior.
- DOM order controls reading and focus order.
- ARIA supplements rather than replaces correct HTML.
Common mistakes and what to check
| Symptom | What to check |
|---|---|
| ARIA everywhere | It can override visible names. |
| Repeated alt text | Use empty alt for decoration. |
| Missing skip target | Match one unique id. |
Practice without copying
Audit five accessibility areas and record evidence.
Check the answer after you try
Evidence must report an observed result, not an assumption.
Completion check
- My page contains the required new content
- I can explain the key tags or attributes without the answer
- I deliberately created and fixed at least one error