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 h1 per page (unless app context).
• Images: meaningful alt, empty alt for decorative.
• Links: descriptive text, visible focus state (CSS).
• Forms: label related to controls via for/id, required fields indicated.
• Landmarks: main present; nav for navigation regions.

Try it

Common Pitfalls

• Relying on placeholder instead of a visible label.
• Empty links/buttons (icon-only controls without aria-label).

Exercises

1. Audit a page for headings, landmarks, and focusable elements. Fix any issues.
2. Pair each input with a label and add aria-describedby for helper text.