WCAG Compliance

Web Content Accessibility Guidelines 2.2 AA implementation for inclusive, legally compliant web applications.

Overview

• Building accessible UI components from scratch
• Auditing applications for ADA/Section 508 compliance
• Implementing keyboard navigation and focus management
• Supporting screen readers and assistive technologies
• Fixing color contrast and visual accessibility issues

Quick Reference

Semantic HTML Structure

<main>
  <article>
    <header><h1>Page Title</h1></header>
    <section aria-labelledby="features-heading">
      <h2 id="features-heading">Features</h2>
      <ul><li>Feature 1</li></ul>
    </section>
    <aside aria-label="Related content">...</aside>
  </article>
</main>

ARIA Labels and States

// Icon-only button
<button aria-label="Save document">
  <svg aria-hidden="true">...</svg>
</button>

// Form field with error
<input
  id="email"
  aria-required="true"
  aria-invalid={!!error}
  aria-describedby={error ? "email-error" : "email-hint"}
/>
{error && <p id="email-error" role="alert">{error}</p>}

Color Contrast (CSS)

:root {
  --text-primary: #1a1a1a;   /* 16.1:1 on white - normal text */
  --text-secondary: #595959; /* 7.0:1 on white - secondary */
  --focus-ring: #0052cc;     /* 7.3:1 - focus indicator */
}
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

WCAG 2.2 AA Checklist

Criterion	Requirement	Test
1.1.1 Non-text	Alt text for images	axe-core scan
1.3.1 Info	Semantic HTML, headings	Manual + automated
1.4.3 Contrast	4.5:1 text, 3:1 large	WebAIM checker
1.4.11 Non-text Contrast	3:1 UI components	Manual inspection
2.1.1 Keyboard	All functionality via keyboard	Tab through
2.4.3 Focus Order	Logical tab sequence	Manual test
2.4.7 Focus Visible	Clear focus indicator	Visual check
2.4.11 Focus Not Obscured	Focus not hidden by sticky elements	scroll-margin-top
2.5.7 Dragging	Single-pointer alternative	Button fallback
2.5.8 Target Size	Min 24x24px interactive	CSS audit
4.1.2 Name/Role/Value	Proper ARIA, labels	Screen reader test

Key Decisions

Decision	Choice	Rationale
Conformance level	WCAG 2.2 AA	Legal standard (ADA, Section 508)
Contrast ratio	4.5:1 normal, 3:1 large	AA minimum requirement
Target size	24px min, 44px touch	2.5.8 + mobile usability
Focus indicator	3px solid outline	High visibility, 3:1 contrast
Live regions	polite default, assertive for errors	Avoids interruption
Decorative images	alt="" role="presentation"	Hide from AT
Skip link	First focusable element	Keyboard user efficiency

Anti-Patterns (FORBIDDEN)

• Div soup: Using <div> instead of semantic elements (<nav>, <main>, <article>)
• Color-only information: Status indicated only by color without icon/text
• Missing labels: Form inputs without associated <label> or aria-label
• Keyboard traps: Focus that cannot escape without mouse
• Auto-playing media: Audio/video that plays without user action
• Removing focus outline: outline: none without replacement indicator
• Positive tabindex: Using tabindex > 0 (disrupts natural order)
• Empty links/buttons: Interactive elements without accessible names
• ARIA overuse: Using ARIA when semantic HTML suffices

Related Skills

• a11y-testing - Automated accessibility testing with axe-core and Playwright
• design-system-starter - Accessible component library patterns
• i18n-date-patterns - RTL layout and locale-aware formatting
• motion-animation-patterns - Reduced motion and animation accessibility

Capability Details

semantic-html

Keywords: semantic, landmark, heading, structure, html5, main, nav, article Solves:

• Proper document structure with landmarks
• Heading hierarchy (h1-h6 in order)
• Form fieldsets and legends
• Lists for grouped content

aria-patterns

Keywords: aria, role, state, property, live-region, alert, status Solves:

• Custom widget accessibility (tabs, menus, dialogs)
• Dynamic content announcements
• Expanded/collapsed states
• Error/validation messaging

focus-management

Keywords: keyboard, focus, tab, trap, modal, skip-link, roving Solves:

• Modal focus trapping
• Skip links for navigation
• Roving tabindex for widgets
• Focus restoration after dialogs

color-contrast

Keywords: contrast, color, wcag, perceivable, vision, ratio Solves:

• Text contrast ratios (4.5:1 / 3:1)
• UI component contrast (3:1)
• Focus indicator visibility
• Non-color status indicators