HTML accessibility checkpoint
Objectives
- Check headings, text contrast, focus
- Use landmarks
- Prepare a simple manual audit
Lesson
Accessibility isn’t an end-of-project bonus: it starts in HTML. Landmarks (header/nav/main/footer) = a map for screen readers.
Keyboard focus order = DOM order. A pretty design that breaks focus is a product bug.
Text/background contrast: aim for WCAG AA (~4.5:1 for normal text). That’s why this academy uses a stable light theme with dark ink and sufficiently contrasted teal.
Month 1 checklist: lang, title, unique h1, alt, labels, explicit links, real buttons (<button>), no clickable divs without keyboard support.
Next: CSS for responsive layout and design systems — without breaking this semantic base.
Assessment
Assessment
1. A div with onClick but no keyboard support is…