HTML Accessibility
Accessibility (often shortened to a11y) means making sure people with disabilities can use your site — keyboard-only users, screen reader users, low-vision users, people with motor or cognitive disabilities. Good HTML gets you most of the way there for free.
Free wins from semantic HTML
| Markup | Why it matters |
|---|---|
Real <button> and <a> | Focusable and keyboard-clickable by default. A <div onclick> is not. |
<label for="…"> | Lets users click the label to focus the input; screen readers announce the field name. |
alt on every <img> | Describes the image to anyone who can't see it. |
| Heading hierarchy | Screen readers expose headings as a navigable outline. |
Semantic regions (<main>, <nav>) | Users jump straight to them with a single keystroke. |
lang on <html> | Screen readers pick the right pronunciation. |
Common pitfalls
- Empty
alt=""on a meaningful image — only do this for purely decorative images. - Low colour contrast — text needs 4.5:1 contrast against its background for normal text.
- Removing focus outlines (
outline: none) without replacing them — keyboard users can no longer see where they are. - Placeholder-only forms — when the user starts typing, the hint disappears.
- Click-only interactions — must also work with Enter and Space.
One-minute test: Unplug your mouse. Can you reach every interactive element with Tab? Can you see where focus is? Can you activate everything with Enter? If yes, you've already solved the most common accessibility problems.
Example
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Accessibility</title>
</head>
<body>
<h1>HTML Accessibility</h1>
<p>This is a demo page for the "HTML Accessibility" lesson.</p>
</body>
</html>
Try it Yourself »
Exercise
Add alt text so screen readers can describe this decorative-but-meaningful image.
<img src="trophy.png"
="Gold trophy">
Three letters. Same as the first HTML accessibility lesson.
Discussion
Loading…