Web Accessibility Fundamentals
Web accessibility (a11y) means making websites usable by everyone - including people with visual, motor, auditory, and cognitive disabilities. Around 15% of the world's population lives with some form of disability. Accessibility is not optional - it is a legal requirement in many countries (ADA, EN 301 549) and a core principle of professional web development.
WCAG Guidelines & Principles
The Web Content Accessibility Guidelines (WCAG) provide a framework with 4 principles: Perceivable (provide text alternatives for non-text content), Operable (all functionality available via keyboard), Understandable (readable, predictable content), Robust (compatible with assistive technologies). WCAG has three conformance levels: A (basic), AA (standard - most laws require this), AAA (enhanced). Focus on AA compliance for professional websites.
POUR principles form the foundation of global web accessibility standards (WCAG)
HTML Accessibility Essentials
- Alt text on all images - descriptive for informational, alt='' for decorative. Never 'image of...' - screen readers already say 'image'
- Semantic HTML - <nav>, <main>, <article> create landmarks that screen readers can jump to directly
- Skip link - Hidden link at top of page: 'Skip to main content'. Lets keyboard users bypass navigation
- Keyboard navigation - All interactive elements must be focusable and operable with Tab/Enter/Space/Escape
- Color contrast - Text must have 4.5:1 ratio against background (AA). Large text needs 3:1. Use contrast checker tools
- Form labels - Every input must have a visible <label>. Placeholder text is NOT a substitute for labels
- Focus indicators - Never remove :focus outlines without providing a visible alternative. Keyboard users depend on them
- Language attribute - <html lang='en'> tells screen readers which language to use for pronunciation
Warning
Never remove CSS focus outlines with :focus { outline: none; } without providing an alternative. Keyboard users depend on visible focus indicators to know which element is active. Use :focus-visible instead - it shows outlines only for keyboard users, not mouse clicks.
Accessible HTML Code
<!-- Skip link (visually hidden, visible on focus) -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<header role="banner">
<nav aria-label="Main navigation">
<ul>
<li><a href="/" aria-current="page">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
<main id="main-content">
<article>
<h1>Web Accessibility Guide</h1>
<!-- Informational image: descriptive alt -->
<img src="chart.png" alt="Bar chart showing 40% improvement in user engagement after accessibility fixes">
<!-- Decorative image: empty alt -->
<img src="divider.svg" alt="" role="presentation">
<!-- Accessible button -->
<button type="button" aria-expanded="false" aria-controls="menu">
Toggle Menu
</button>
<ul id="menu" hidden>
<li><a href="/settings">Settings</a></li>
</ul>
</article>
</main>
<!-- CSS for skip link -->
<style>
.skip-link {
position: absolute;
top: -100%;
left: 0;
padding: 12px 16px;
background: #000;
color: #fff;
z-index: 100;
}
.skip-link:focus {
top: 0; /* Becomes visible when focused with Tab */
}
</style>Quick Quiz: Accessibility
Try It Yourself: Accessible Page
Practice Task: Accessibility Audit
- Take any HTML page you've built previously in this course and run a Chrome Lighthouse audit (DevTools > Lighthouse > Accessibility)
- Add alt text to every image - use descriptive text for informational images and alt='' for decorative ones
- Add a skip link as the first element in <body> that jumps to <main id='main'>
- Ensure every <input> has an associated <label> with matching for/id attributes
- Test keyboard navigation: Tab through all interactive elements and verify visible focus indicators exist
Key Takeaways
- Web accessibility (a11y) means making websites usable by everyone - including people with visual, motor, auditory, and cognitive disabilities.
- Alt text on all images - descriptive for informational, alt='' for decorative. Never 'image of...' - screen readers already say 'image'
- Semantic HTML - <nav>, <main>, <article> create landmarks that screen readers can jump to directly
- Skip link - Hidden link at top of page: 'Skip to main content'. Lets keyboard users bypass navigation