15
HTML – Accessibility Basics
Chapter 15 • Intermediate
20 min
Web accessibility means making your website usable for everyone, including people with disabilities (vision, hearing, motor, cognitive). Modern web development considers accessibility a requirement, not an optional feature.
Core Accessibility Principles in HTML
- Text Alternatives (alt text)
- Always provide alt text for images.
- Screen readers read this to blind users.
- If image is purely decorative, use alt="" (empty string).
- Semantic HTML
- Use correct tags (<h1>, <button>, <nav>) instead of styled <div>s.
- Browsers give native semantic elements built-in accessibility features (keyboard focus, screen reader announcements) by default.
- Tip: Avoid reinventing buttons with divs. Native buttons work everywhere automatically.
- Form Labels
- Every form input needs a label.
- Use the for attribute to connect them programmatically.
- Placeholders are NOT replacements for labels (they disappear when typing).
- Heading Hierarchy
- Don't skip heading levels (e.g., h1 to h3).
- Screen reader users often navigate by headings to scan the page content.
- Keyboard Navigation
- Interactive elements (links, buttons, inputs) must be focusable via Tab key.
- Do not remove outline (focus ring) with CSS unless you replace it with a better one.
Suggested image prompt
"Split screen comparison: Left side 'Inaccessible' (div soup, no labels, generic buttons), Right side 'Accessible' (semantic tags, labels, focus states), with a checkmark on the right."
Interview-style questions from this topic
- Why is the alt attribute critical for accessibility?
- How does Semantic HTML improve accessibility?
- Why are placeholders poor substitutes for labels?
- What is the purpose of heading hierarchy for screen reader users?
Hands-on Examples
Accessible vs Inaccessible
<!-- BAD: Inaccessible -->
<div onclick="login()">Login</div> <!-- Not keyboard focusable -->
<input type="text" placeholder="Enter Name"> <!-- No label -->
<img src="chart.png"> <!-- No alt text -->
<!-- GOOD: Accessible -->
<button onclick="login()">Login</button> <!-- Keyboard accessible -->
<label for="name">Enter Name:</label>
<input type="text" id="name">
<img src="chart.png" alt="Sales growth chart for 2025">The bad example relies on mouse-only interaction and visual clues only. The good example uses a native button (tabbable), an explicit label for the input, and descriptive alt text for the image.