Web Accessibility Guide: WCAG & ADA Compliance

Why Web Accessibility Matters

One in four American adults—about 61 million people—lives with a disability. Many of these individuals rely on websites for essential services, shopping, and information. When your website isn't accessible, you're excluding a significant portion of your potential customers.

Beyond business benefits, accessibility is simply the right thing to do. The web was designed to be universal—accessible to everyone regardless of ability. When we build inaccessible sites, we break that promise.

Understanding the Legal Landscape

Web accessibility law can seem confusing, but the key requirements are straightforward. Here's what you need to know:

Americans with Disabilities Act (ADA)

Title III of the ADA prohibits discrimination in "places of public accommodation." Courts have increasingly ruled that websites are places of public accommodation, especially for businesses with physical locations. In 2022, the Department of Justice issued guidance confirming that the ADA applies to websites.

Section 508

Section 508 of the Rehabilitation Act applies to federal agencies and any organization receiving federal funding. It explicitly requires compliance with WCAG 2.0 Level AA. If you're a government contractor or receive federal grants, Section 508 compliance is mandatory.

WCAG: The Technical Standard

The Web Content Accessibility Guidelines (WCAG) are the internationally recognized standard for web accessibility. While not a law itself, WCAG is referenced by most accessibility legislation worldwide and used by courts as the benchmark for compliance.

The Four WCAG Principles (POUR)

WCAG is organized around four fundamental principles. All 50+ success criteria fall under these principles:

Most Common Accessibility Issues (And How to Fix Them)

The WebAIM Million study reveals that most accessibility issues are relatively easy to fix. Here are the top problems and their solutions:

1. Low Color Contrast (83% of websites)

Text must have sufficient contrast against its background for users with low vision or color blindness to read it.

2. Missing Image Alt Text (55% of websites)

Screen readers read alt text to describe images to blind users. Without it, images are invisible to these users.

<!-- Informative image -->
<img src="team-photo.jpg" alt="The Verlua team at our Denver office">

<!-- Decorative image -->
<img src="decorative-divider.svg" alt="">

<!-- Functional image (logo that links home) -->
<a href="/"><img src="logo.svg" alt="Verlua home"></a>

<!-- Image with text -->
<img src="sale-banner.jpg" alt="50% off all services through January">

3. Empty Links and Buttons (50% of websites)

Links and buttons must have accessible names that describe their purpose. Icon-only buttons without labels are inaccessible to screen reader users.

<!-- Bad: No accessible name -->
<button><svg>...</svg></button>

<!-- Good: Screen reader text -->
<button>
  <svg aria-hidden="true">...</svg>
  <span class="sr-only">Close menu</span>
</button>

<!-- Also good: aria-label -->
<button aria-label="Close menu">
  <svg aria-hidden="true">...</svg>
</button>

4. Missing Form Labels (46% of websites)

Every form input must have an associated label that describes what information is expected. Placeholder text is not a substitute for labels.

<!-- Bad: Placeholder-only -->
<input type="email" placeholder="Email address">

<!-- Good: Explicit label -->
<label for="email">Email address</label>
<input type="email" id="email">

<!-- Also good: Wrapped label -->
<label>
  Email address
  <input type="email">
</label>

<!-- For visually hidden labels -->
<label for="search" class="sr-only">Search</label>
<input type="search" id="search" placeholder="Search...">

5. Keyboard Accessibility Issues

Everything that works with a mouse must also work with a keyboard. This is essential for users who cannot use a mouse due to motor disabilities, and it also helps screen reader users.

/* WRONG: Removes focus indicator */
*:focus { outline: none; }

/* RIGHT: Style the focus indicator */
*:focus {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

How to Test Your Website for Accessibility

Effective accessibility testing requires a combination of automated tools and manual testing. No single tool can catch all issues.

Automated Testing Tools

Manual Testing Essentials

1. 1.
   Keyboard-only navigation: Put your mouse aside and navigate your entire site using only Tab, Enter, Escape, and arrow keys. Can you access everything?
2. 2.
   Screen reader testing: Test with NVDA (free for Windows), VoiceOver (built into Mac/iOS), or TalkBack (Android). Does the experience make sense?
3. 3.
   Zoom testing: Zoom to 200% and ensure content remains readable and usable without horizontal scrolling.
4. 4.
   Color dependency: View your site in grayscale. Is information still conveyed without color?

Building Accessibility Into Your Process

Retrofitting accessibility is expensive. Building it in from the start costs only 10-20% more and creates a better foundation for your website.

Making your site accessible also supports better conversion optimization—clearer navigation and better usability benefit all users, not just those with disabilities.

Frequently Asked Questions

Your Accessibility Action Plan