WCAG conformance levels, WAI-ARIA specification, legal requirements, and compliance strategies

Standards & Guidelines

Understanding accessibility standards is the foundation for building compliant, inclusive web applications.

WCAG (Web Content Accessibility Guidelines)

WCAG is the international standard for web accessibility, published by the W3C.

Conformance Levels

WCAG Conformance Levels
├── Level A — Minimum accessibility (must satisfy)
│   ├── Non-text content has text alternatives
│   ├── Content is keyboard accessible
│   ├── No content flashes more than 3 times per second
│   └── Pages have descriptive titles
├── Level AA — Standard compliance (recommended target)
│   ├── Color contrast ratio ≥ 4.5:1 (normal text)
│   ├── Text resizable to 200% without loss
│   ├── Multiple ways to find pages
│   └── Consistent navigation and identification
└── Level AAA — Enhanced accessibility (ideal goal)
    ├── Color contrast ratio ≥ 7:1 (normal text)
    ├── Sign language for audio content
    ├── Extended audio descriptions
    └── Reading level considerations

Target Level AA. Most legal requirements and industry standards reference WCAG 2.1 Level AA. This is the practical target for most projects.

Key WCAG 2.1 / 2.2 Success Criteria

Criterion	Level	Requirement
1.1.1 Non-text Content	A	All non-text content has a text alternative
1.3.1 Info and Relationships	A	Structure and relationships are programmatically determined
1.4.3 Contrast (Minimum)	AA	Text contrast ratio at least 4.5:1
1.4.11 Non-text Contrast	AA	UI components and graphics have 3:1 contrast ratio
2.1.1 Keyboard	A	All functionality available from keyboard
2.4.7 Focus Visible	AA	Keyboard focus indicator is visible
2.5.8 Target Size (Minimum)	AA	Interactive targets are at least 24×24 CSS pixels
3.1.1 Language of Page	A	Default language is programmatically determined
3.3.2 Labels or Instructions	A	Input fields have labels or instructions
4.1.2 Name, Role, Value	A	All UI components have accessible name and role

WCAG 2.2 New Criteria

WCAG 2.2 added criteria focused on cognitive accessibility and mobile:

Criterion	Level	What's New
2.4.11 Focus Not Obscured (Minimum)	AA	Focused element is not entirely hidden
2.4.13 Focus Appearance	AAA	Focus indicators meet size and contrast requirements
2.5.7 Dragging Movements	AA	Drag operations have single-pointer alternatives
2.5.8 Target Size (Minimum)	AA	Touch targets at least 24×24px (replaces 2.5.5 at AAA)
3.2.6 Consistent Help	A	Help mechanisms appear in same relative order
3.3.7 Redundant Entry	A	Previously entered info is auto-populated or selectable
3.3.8 Accessible Authentication (Minimum)	AA	No cognitive function test for login

WAI-ARIA Specification

WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) provides attributes to make dynamic web content accessible.

When to Use ARIA

ARIA Decision Flow
├── Can you use a native HTML element? → Use native HTML (preferred)
├── Does the element need a custom role? → Add role attribute
├── Does it need a label? → Use aria-label or aria-labelledby
├── Does its state change? → Use aria-expanded, aria-checked, etc.
└── Does it update dynamically? → Use aria-live regions

First Rule of ARIA: If you can use a native HTML element with the semantics and behavior you need, do so instead of adding ARIA. Native elements have built-in keyboard support and semantics.

ARIA Categories

Category	Purpose	Examples
Roles	Define what an element is	`role="button"`, `role="dialog"`, `role="tab"`
States	Current condition of an element	`aria-expanded`, `aria-checked`, `aria-disabled`
Properties	Characteristics that rarely change	`aria-label`, `aria-required`, `aria-haspopup`
Live Regions	Announce dynamic content changes	`aria-live="polite"`, `aria-live="assertive"`

Legal Requirements

By Region

Region	Law	Standard	Enforcement
USA	ADA, Section 508	WCAG 2.0/2.1 AA	DOJ, private lawsuits
EU	European Accessibility Act (EAA)	EN 301 549 (maps to WCAG 2.1 AA)	National enforcement bodies
UK	Equality Act 2010	WCAG 2.1 AA	Equality and Human Rights Commission
Canada	ACA, AODA (Ontario)	WCAG 2.1 AA	Provincial enforcement
Australia	DDA	WCAG 2.0 AA	Human Rights Commission
Japan	JIS X 8341-3	Maps to WCAG 2.1	Industry self-regulation

Key Legal Trends

Lawsuits targeting web and mobile accessibility have increased significantly
Courts have ruled that websites are "places of public accommodation" under the ADA
The EU's European Accessibility Act (EAA) takes effect for private sector in June 2025
Accessibility is increasingly included in procurement requirements

Implementing Compliance

Practical Compliance Checklist

// Programmatic checks that map to WCAG criteria

// 1.1.1 - All images have alt text
<img src="chart.png" alt="Sales increased 20% in Q3 2024" />

// 1.3.1 - Use semantic structure
<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
  </ul>
</nav>

// 2.1.1 - Keyboard accessible custom controls
<div
  role="button"
  tabIndex={0}
  onClick={handleClick}
  onKeyDown={(e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      handleClick();
    }
  }}
>
  Custom Button
</div>

// 3.1.1 - Page language
<html lang="en">

// 4.1.2 - Name, role, value for custom components
<div
  role="switch"
  aria-checked={isOn}
  aria-label="Dark mode"
  tabIndex={0}
  onClick={toggle}
  onKeyDown={(e) => e.key === ' ' && toggle()}
>
  <span className={isOn ? 'on' : 'off'} />
</div>

Accessibility Statement Template

Every accessible site should have an accessibility statement covering:

Conformance level — which WCAG version and level you target
Known limitations — areas that don't yet meet standards
Feedback mechanism — how users can report barriers
Remediation timeline — plan for fixing known issues
Contact information — accessible way to get help

Best Practices

Standards Compliance Strategy

Target WCAG 2.1 Level AA as the baseline
Integrate accessibility checks into CI/CD pipelines
Include accessibility in design system documentation
Train teams on WCAG success criteria
Conduct regular audits with both automated tools and manual testing
Maintain an accessibility statement and feedback channel
Prioritize fixes by impact — what blocks the most users

Standards & Guidelines

On this page