Lesson 15: Web Accessibility (A11y)
What is Web Accessibility?
Web accessibility means making websites usable by everyone, including people with disabilities (visual, auditory, motor, cognitive).
Why It Matters:
- 15% of world population has some form of disability
- Legal requirement in many countries
- Better user experience for everyone
- Improves SEO
1. Alternative Text for Images
Screen readers use alt text to describe images to visually impaired users.
<img src="dog.jpg" alt="Golden retriever playing in park">
Alt Text Tips:
- Be descriptive but concise
- Don't say "image of" or "picture of"
- Empty alt="" for decorative images
- Include text if image contains text
2. Proper Labels for Forms
Always use <label> tags with form inputs:
<label for="email">Email Address:</label>
<input type="email" id="email" name="email">
3. Semantic HTML
Use meaningful tags instead of generic divs:
✗ Bad:
<div class="header">...</div>
✓ Good:
<header>...</header>
4. Keyboard Navigation
Ensure all interactive elements can be accessed with keyboard (Tab key):
<button type="submit">Submit</button>
<a href="page.html">Link</a>
5. Color Contrast
Ensure sufficient contrast between text and background:
WCAG Standards:
- Normal text: 4.5:1 contrast ratio
- Large text: 3:1 contrast ratio
- Don't rely on color alone to convey information
6. Language Attribute
Helps screen readers pronounce content correctly:
<html lang="en">
7. Skip Links
Allow keyboard users to skip repetitive navigation:
<a href="#main-content" class="skip-link">Skip to main content</a>
<main id="main-content">
Content...
</main>
8. ARIA Attributes (Advanced)
ARIA (Accessible Rich Internet Applications) provides extra information for assistive technologies:
<button aria-label="Close dialog">X</button>
<nav aria-label="Main navigation">...</nav>
Accessibility Checklist
✓ Essential Checks:
- All images have alt text
- All form inputs have labels
- Proper heading hierarchy (H1→H2→H3)
- Sufficient color contrast
- Keyboard navigation works
- Links have descriptive text
- HTML is semantic
- Language is declared
- Video has captions/transcripts
- No content flashes rapidly
Good vs Bad Examples
Links
✗ Bad: <a href="...">Click here</a>
✓ Good: <a href="...">Read full article about HTML</a>
Buttons
✗ Bad: <div onclick="...">Submit</div>
✓ Good: <button type="submit">Submit</button>
💡 Remember:
Accessibility benefits everyone - clear structure, good labels, and logical navigation make sites better for all users!
Practice Exercise
Try This:
Review your previous projects and add:
- Alt text to all images
- Proper labels to all form fields
- lang attribute to HTML tag
- Descriptive link text (no "click here")
- Test keyboard navigation (Tab key)