Accessibility means a page works for everyone, including people using a screen reader, a keyboard instead of a mouse, or a browser zoomed in far past 100%. Most of it comes from a handful of plain HTML habits, not a separate skill.
The alt attribute is read aloud by a screen reader in place of the image. Describe what the image conveys, not just what it literally shows.
<img src="chart.png" alt="Bar chart showing sales doubling from January to June">A <label> connected to its input via a matching for and id lets a screen reader announce what a field is for, and lets a click anywhere on the label focus the input.
<label for="email">Email address</label>
<input type="email" id="email" name="email">Using <nav>, <main>, <button>, and <header> instead of generic <div>s for everything gives a screen reader real landmarks to jump between — this is the same semantic elements covered earlier in this course, and accessibility is the main reason they exist.
When an icon-only button has no visible text, aria-label gives it an accessible name.
<button aria-label="Close menu">✕</button>| Habit | Who it helps |
|---|---|
| alt text on images | Screen reader users |
| label connected to every input | Screen reader users, and anyone clicking to focus a field |
| Semantic tags instead of generic divs | Screen reader users navigating by landmark |
| Visible focus states, keyboard-reachable controls | Keyboard-only users, no mouse |
This is a starting point, not the whole subject
This lesson is deliberately basic — a full accessibility audit (color contrast, focus order, complex ARIA patterns) is its own deep topic. These four habits alone cover a large share of real-world accessibility problems.