Accessibility-first design: a practical WCAG 2.2 guide for modern sites.

Accessibility-first design means treating accessibility as a design requirement from the first wireframe, not as an audit after launch. WCAG 2.2, the current version of the Web Content Accessibility Guidelines published by the W3C, is the reference most teams design to, and level AA is the usual target. This guide turns the new WCAG 2.2 criteria into a practical checklist and covers the fundamentals that still cause most failures.

It is written by the design systems team at RAIN Design Studio in Casablanca, where accessibility checks are part of every component we design and every site we ship.

Why accessibility-first, and why now

Three reasons make this a 2026 priority rather than a nice-to-have:

• Regulation. The European Accessibility Act applies from June 2025 to many consumer-facing digital products and services in the EU, including e-commerce. If you sell to EU customers, accessibility is increasingly a compliance question, not only a usability one.
• Audience. Disability is common, and many more people have temporary or situational limitations: a broken arm, bright sunlight, a slow connection, an older phone.
• Quality. Accessible sites are usually better structured, faster and easier for search engines and AI systems to parse.

Retrofitting is expensive. Designing it in is not.

What changed in WCAG 2.2

WCAG 2.2 became a W3C Recommendation in October 2023. It keeps everything from WCAG 2.1, removes the obsolete 4.1.1 Parsing criterion, and adds nine new success criteria. Six of them apply at levels A and AA, which is where most legal and contractual requirements sit.

WCAG 2.2 checklist: the new A and AA criteria

The three AAA additions are Focus Not Obscured (Enhanced), Focus Appearance and Accessible Authentication (Enhanced). They are worth reading even if you do not target AAA.

The fundamentals that still fail most often

New criteria get attention, but most real-world failures are older and simpler:

• Text contrast below 4.5:1 for normal text or 3:1 for large text
• Non-text contrast below 3:1 for input borders, icons and focus indicators
• Missing or meaningless alt text on informative images
• Form fields without visible labels, relying on placeholders
• Keyboard traps and controls that cannot be reached or operated with a keyboard
• Missing focus indicators, often removed for visual reasons
• Skipped heading levels and pages without landmarks
• Content that breaks when zoomed or reflowed to a narrow width
• Motion that cannot be reduced for people who are sensitive to it

Design-phase habits

Accessibility-first starts in Figma, not in code:

1. Put contrast into tokens. Check every text and surface pair once, in every theme, at the token level.
2. Design focus states for every interactive component, as deliberately as hover states.
3. Define minimum target sizes in the component library.
4. Annotate headings, landmarks, reading order and alt text in handoff files.
5. Design error states with text, not color alone.
6. Provide non-drag alternatives for every drag interaction.

Build-phase habits

• Use native HTML elements (button, a, label, select) before reaching for custom widgets.
• Use ARIA sparingly, and only to fill gaps native HTML cannot.
• Respect prefers-reduced-motion and prefers-color-scheme.
• Keep the DOM order aligned with the visual order.
• Make interactive custom components keyboard-operable. On the MField & Data Insight site, the interactive 12-region Morocco map is keyboard-accessible, and both light and dark themes were designed to meet WCAG AA contrast.

Testing: automated and manual

A credible accessibility check uses both:

Automated

• axe-based checks or Lighthouse in CI for regressions
• Contrast checks at the design-token level

Manual

• Complete key journeys using only a keyboard
• Test with screen readers such as VoiceOver and NVDA
• Zoom to 200 percent and check reflow on a narrow viewport
• Test with reduced motion enabled
• Ask real users with disabilities, where possible

Automated tools find the easy problems. Manual testing finds the ones that stop people.

Build an accessible site with RAIN

RAIN Design Studio designs accessibility into the design system, components and content from the start, then tests with keyboard and screen readers before launch. Learn more about our web design work or book a free 15-minute call to review your current site against WCAG 2.2 AA. Fixed-scope projects start at $10,000, and accessibility work can also run inside a Growth or Scale retainer.