Website Accessibility: A Developer's Guide to WCAG Compliance

Web accessibility ensures that websites are usable by people with disabilities — including visual, auditory, motor, and cognitive impairments. Beyond being the right thing to do, accessibility is increasingly a legal requirement and indirectly improves SEO.

The WCAG Framework

WCAG (Web Content Accessibility Guidelines) is organized around four principles known as POUR:

• Perceivable — Information must be presentable to users in ways they can perceive
• Operable — Interface components must be operable
• Understandable — Information and UI operation must be understandable
• Robust — Content must be robust enough to be interpreted by diverse user agents

WCAG has three conformance levels: A (minimum), AA (industry standard), and AAA (enhanced). Most accessibility guidelines and legal requirements target Level AA.

The Most Common Failures

1. Missing Alt Text (Images)

Alt text is read by screen readers instead of showing the image. Every <img> needs an alt attribute:

<!-- Informational image -->
<img src="chart.png" alt="Bar chart showing 40% increase in revenue Q1 2026" />

<!-- Decorative image (hide from screen readers) -->
<img src="divider.png" alt="" role="presentation" />

<!-- Icon button (describe the action) -->
<button><img src="trash.svg" alt="Delete item" /></button>

2. Insufficient Color Contrast

WCAG AA requires:

• 4.5:1 contrast ratio for normal text
• 3:1 for large text (18px+ or 14px+ bold)
• 3:1 for UI components and graphical elements

Tools: WebAIM Contrast Checker, browser DevTools accessibility panel.

3. Missing Form Labels

Every form input needs an associated label. Don't rely on placeholder text alone — it disappears when the user starts typing:

<!-- Correct -->
<label for="email">Email address</label>
<input id="email" type="email" name="email" />

<!-- Also correct (visually hidden label) -->
<label for="search" class="sr-only">Search</label>
<input id="search" type="search" placeholder="Search..." />

4. Keyboard Navigation

All interactive elements must be reachable and operable via keyboard alone:

• Tab/Shift+Tab for navigation
• Enter/Space to activate buttons and links
• Arrow keys for menus and components
• Escape to close dialogs

Test by unplugging your mouse and navigating your site with Tab only.

5. Focus Indicators

The :focus style must be visible. Never do *:focus { outline: none } without providing an alternative focus indicator:

/* Custom focus ring that respects user preferences */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

6. Missing Landmark Regions

Use semantic HTML landmarks so screen reader users can navigate by region:

<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

7. ARIA Misuse

ARIA (Accessible Rich Internet Applications) should enhance accessibility, not create confusion. Key rules:

• No ARIA is better than bad ARIA
• Never use ARIA to replace semantic HTML
• Interactive ARIA roles need keyboard support

<!-- Wrong: ARIA on a non-interactive element -->
<div role="button" onclick="...">Click me</div>

<!-- Correct: Use the native element -->
<button onclick="...">Click me</button>

8. Skipping Content

Provide "skip to main content" links so keyboard users don't have to tab through the entire navigation on every page:

<a href="#main-content" class="sr-only focus:not-sr-only">
  Skip to main content
</a>

Legal Considerations

Accessibility lawsuits are on the rise. In the United States:

• Section 508 applies to federal agencies and their contractors
• ADA (Americans with Disabilities Act) has been applied to private websites through court decisions
• The European EN 301 549 standard references WCAG 2.1 AA

Quick Wins (Under an Hour Each)

1. Add alt text to all images (Krokanti Audit tells you exactly which ones are missing)
2. Fix your focus styles
3. Add <label> elements to all form fields
4. Check your color contrast ratios
5. Make sure your site works with keyboard-only navigation

---

Krokanti Audit checks over 20 accessibility rules automatically — including alt text coverage, contrast ratios, ARIA usage, form labeling, and keyboard accessibility patterns. Run a free auditto see where you stand.