HTML - Accessibility
Overview
Estimated time: 40–60 minutes
Accessible HTML benefits everyone. Start with meaningful structure, proper labeling, and keyboard support.
Learning Objectives
- Use semantic landmarks: header, nav, main, aside, footer.
- Associate labels with form controls.
- Provide appropriate alt text for images.
Checklist
- Headings are nested and start with a single h1per page (unless app context).
- Images: meaningful alt, emptyaltfor decorative.
- Links: descriptive text, visible focus state (CSS).
- Forms: labelrelated to controls viafor/id, required fields indicated.
- Landmarks: mainpresent;navfor navigation regions.
Try it
Common Pitfalls
- Relying on placeholder instead of a visible label.
- Empty links/buttons (icon-only controls without aria-label).
Exercises
- Audit a page for headings, landmarks, and focusable elements. Fix any issues.
- Pair each input with a label and add aria-describedbyfor helper text.