Difficulty: Intermediate
The Web Content Accessibility Guidelines (WCAG) are the internationally recognized standard for making web content accessible to people with disabilities. Published by the World Wide Web Consortium (W3C) through their Web Accessibility Initiative (WAI), WCAG provides a shared framework that governments, organizations, and developers use to evaluate and improve accessibility. The current widely-adopted version is WCAG 2.1, with WCAG 2.2 adding additional criteria.
WCAG is built around four core principles known by the acronym POUR: Perceivable, Operable, Understandable, and Robust. Perceivable means that information and user interface components must be presentable to users in ways they can perceive - this includes providing text alternatives for images, captions for videos, and sufficient color contrast. Operable means all interface components and navigation must be operable through various input methods, including keyboard-only navigation. Understandable requires that information and the operation of the UI must be understandable, with readable text, predictable behavior, and input assistance. Robust means content must be robust enough to be reliably interpreted by a wide variety of user agents, including assistive technologies like screen readers.
WCAG defines three conformance levels: A (minimum), AA (mid-range), and AAA (highest). Level A covers the most basic accessibility requirements - without meeting these, some users will find it impossible to access content. Level AA addresses the most common barriers and is the standard most laws and policies reference. For example, contrast ratios must be at least 4.5:1 for normal text at Level AA, but 7:1 at Level AAA. Most organizations target Level AA compliance as it balances accessibility with practical implementation.
Compliance with WCAG is not just good practice - it is a legal requirement in many jurisdictions. The Americans with Disabilities Act (ADA) in the United States, the European Accessibility Act (EAA) in the EU, and Section 508 of the Rehabilitation Act for US federal agencies all reference WCAG. Lawsuits related to web accessibility have increased significantly, making compliance a business necessity. Tools like axe, Lighthouse, and WAVE can automate some testing, but manual testing with real assistive technologies is essential for thorough compliance.
Each WCAG success criterion has a specific identifier like 1.1.1, where the first number indicates the principle (1 = Perceivable, 2 = Operable, 3 = Understandable, 4 = Robust), the second number indicates the guideline within that principle, and the third is the specific criterion. Understanding this numbering system helps developers quickly locate requirements and communicate about them with team members and stakeholders.
<!-- Good: Descriptive alt text -->
<img src="chart.png" alt="Bar chart showing Q4 revenue growth of 25% compared to Q3" />
<!-- Good: Decorative image marked as such -->
<img src="divider.png" alt="" role="presentation" />
<!-- Good: Video with captions -->
<video controls>
<source src="demo.mp4" type="video/mp4" />
<track src="captions.vtt" kind="captions" srclang="en" label="English" />
Your browser does not support the video tag.
</video>
<!-- Bad: Missing alt text -->
<img src="chart.png" />
<!-- Bad: Unhelpful alt text -->
<img src="chart.png" alt="image" />WCAG 1.1.1 (Level A) requires text alternatives for all non-text content. Images need descriptive alt text that conveys the same information. Decorative images should have empty alt attributes. Videos need captions or transcripts.
<!-- Good: Skip navigation link -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
<main id="main-content">
<h1>Page Title</h1>
<!-- Main content here -->
</main>
<style>
.skip-link {
position: absolute;
top: -40px;
left: 0;
padding: 8px;
background: #000;
color: #fff;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
</style>WCAG 2.4.1 (Level A) requires a mechanism to bypass blocks of content repeated on multiple pages. Skip links let keyboard users jump directly to the main content without tabbing through the entire navigation on every page.
<!-- Good: Clear labels, error messages, and instructions -->
<form novalidate>
<div>
<label for="email">Email Address (required)</label>
<input
type="email"
id="email"
name="email"
required
aria-describedby="email-help email-error"
aria-invalid="true"
/>
<span id="email-help">We will never share your email.</span>
<span id="email-error" role="alert">
Please enter a valid email address (e.g., user@example.com)
</span>
</div>
<div>
<label for="password">Password (required)</label>
<input
type="password"
id="password"
name="password"
required
aria-describedby="password-requirements"
/>
<span id="password-requirements">
Must be at least 8 characters with one uppercase letter and one number.
</span>
</div>
</form>WCAG 3.3.1 (Level A) requires error identification, and 3.3.2 (Level A) requires labels or instructions for user input. Providing clear labels, format hints, and descriptive error messages helps all users complete forms correctly.
<!-- Level AA: 4.5:1 for normal text, 3:1 for large text -->
<style>
/* Good: High contrast (passes AA) */
.high-contrast {
color: #1a1a1a; /* Dark text */
background: #ffffff; /* White background */
/* Ratio: 16.15:1 - passes AAA */
}
/* Acceptable: Passes AA but not AAA */
.acceptable {
color: #595959; /* Medium gray */
background: #ffffff;
/* Ratio: 7:1 - passes AA */
}
/* Bad: Fails AA */
.low-contrast {
color: #999999; /* Light gray */
background: #ffffff;
/* Ratio: 2.85:1 - fails AA */
}
/* Large text (18pt+ or 14pt+ bold): 3:1 ratio needed */
.large-text-ok {
font-size: 24px;
color: #767676; /* Ratio: 4.54:1 - passes AA for large text */
background: #ffffff;
}
</style>
<p class="high-contrast">This text has excellent contrast.</p>
<p class="acceptable">This text passes AA requirements.</p>
<p class="low-contrast">This text fails contrast requirements.</p>
<h2 class="large-text-ok">Large text needs lower contrast.</h2>WCAG 1.4.3 (Level AA) requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). Level AAA (1.4.6) raises this to 7:1 and 4.5:1 respectively. Use browser DevTools or tools like WebAIM Contrast Checker to verify.
WCAG Levels, POUR Principles, Compliance, Accessibility Standards, A/AA/AAA