Website accessibility WCAG 2.2 guide for SMBs. 18 rules, real tools, legal context. Build sites everyone can use. Free 30-min audit.

# Website Accessibility WCAG 2.2: The 2026 Compliance Guide

Website accessibility WCAG 2.2 compliance is no longer optional. The European Accessibility Act is in force as of June 2025. US lawsuits under the ADA grow 12 percent year over year. Beyond legal pressure, accessible sites reach 15 to 20 percent more users and usually rank better.

This guide cuts through the jargon. 18 practical rules, real testing tools, and the legal context you need.

What WCAG 2.2 Actually Requires

WCAG stands for Web Content Accessibility Guidelines. Version 2.2 (published October 2023) is the current standard. Three compliance levels:

• A: basic, minimum
• AA: industry standard, legally required in most jurisdictions
• AAA: advanced, aspirational for most sites

Target Level AA. That is what laws reference.

WCAG organizes around four principles (POUR):

1. Perceivable
2. Operable
3. Understandable
4. Robust

Rule 1: Color Contrast



Text vs background contrast ratios:

• Normal text: 4.5:1 minimum
• Large text (18pt+ or 14pt bold): 3:1 minimum
• UI elements and graphics: 3:1 minimum

Tools: WebAIM Contrast Checker, Stark (Figma plugin), browser dev tools contrast checker.

Most sites fail here: light grey text on white backgrounds is the classic offender.

Rule 2: Alt Text for Images

⚡ 2-minute scorecard · instant result

Is your website quietly costing you leads?

Answer 5 quick questions. Get your score + the top fixes, free.

1. Does your site load in under 3 seconds on mobile?

Yes Partly No

2. Is there one clear call-to-action above the fold?

Yes Partly No

3. Is your main lead form 5 fields or fewer?

Yes Partly No

4. Is the whole site genuinely mobile-friendly?

Yes Partly No

5. Are trust signals (proof, reviews) near your CTA?

Yes Partly No

0/10

Email me my full breakdown + the top 3 fixes for my situation:

Email my fixes →

Send my result + occasional tips. Unsubscribe anytime.

Prefer to talk? Book a free 30-min audit or call +91 97297 12388.

Every informational image needs alt text. Exceptions:

• Purely decorative images: alt=”” (empty but present)
• Background images: no alt required

Good alt: descriptive, concise, includes context. “Our team of 6 at the 2025 award ceremony, holding the trophy” beats “team photo.”

Rule 3: Keyboard Navigation

Every interaction must work with keyboard only:

• Tab to move forward, Shift+Tab back
• Enter to activate
• Space for checkboxes and buttons
• Arrow keys for radio groups and dropdowns

Test: unplug your mouse. Can you use your site? If not, people who rely on keyboard-only navigation cannot either.

Rule 4: Visible Focus Indicators



When keyboard users tab through, they need to SEE where focus is. Default browser focus rings (usually blue outline) are fine unless you style them away. If you do, replace with equally visible custom focus styles.

Removing focus indicators without replacement is a WCAG violation.

Rule 5: Semantic HTML

Use HTML elements for their intended purpose:

• `` for buttons, not `
  `
• `` for links, not JavaScript click handlers
• `
  

  ` through `

  ` for headings, hierarchically

• `
  

Screen readers rely on semantic meaning. `

` soup makes sites unusable for them.

Rule 6: Labels for Form Fields

Every form input needs a visible, associated label: “`html Email Address

“`

Placeholder text is not a label. Placeholders disappear on focus. See our form conversion optimization for the CRO side.

Rule 7: Error Messages That Help

When validation fails:

Identify WHICH field has the error

Explain what is wrong

Suggest how to fix it

Announce errors to screen readers (aria-live regions)

“Invalid input” is useless. “Email must include @ symbol” is useful.

Rule 8: Skip Navigation Links

For keyboard users, tabbing through 20 nav links every page is painful. Add a “Skip to main content” link as the first tab target.

“`html Skip to main content “`

Visible on focus only. Jumps past repetitive navigation.

Rule 9: Text Resizing

Users must be able to zoom to 200 percent without losing content or function. Test: browser zoom to 200 percent. Does layout break? Does content overlap?

Fixed-pixel heights and widths are the usual failure. Use relative units (rem, %, em).

Rule 10: No Content-Only Color

“Click the red button” fails for colorblind users. Pair color with:

Text labels

Icons

Patterns

About 8 percent of men and 0.5 percent of women have some form of color blindness.

Rule 11: Captions for Video

All pre-recorded video needs captions. YouTube’s auto-captions are usually 80-90 percent accurate; pay for human captioning for brand video or legal compliance.

Audio-only content (podcasts) needs transcripts.

Rule 12: Reduced Motion Respect

Users with vestibular disorders or attention issues may disable animations at the OS level.

“`css @media (prefers-reduced-motion: reduce) {

• {

animation: none !important; transition: none !important; } } “`

Respect the preference. Your scroll-triggered parallax is not worth causing nausea.

Rule 13: Accessible Tap Targets

WCAG 2.2 added minimum target size: 24×24 pixels CSS. WCAG AAA requires 44×44. We recommend 44×44 always.

Our mobile first design principles post covers tap target sizing in depth.

Rule 14: Dragging Alternatives

WCAG 2.2 new requirement: anything drag-and-drop must have a keyboard or click alternative. Slider? Add input fields. Drag-to-reorder list? Add up/down buttons.

Rule 15: Consistent Help

Help mechanisms (chat, phone, FAQ) should appear in the same place across pages. Users should not hunt.

Rule 16: Accessible Authentication

WCAG 2.2 added this. Login cannot require “cognitive function tests” like remembering a password if no alternative exists. Offer:

Password managers supported (autofill-friendly forms)

OAuth / social login

Magic link via email

Rule 17: Screen Reader Testing

Install a screen reader and use it:

VoiceOver on Mac (built-in)

NVDA on Windows (free)

JAWS on Windows (gold standard, expensive)

TalkBack on Android

Navigate your site with eyes closed. Painful but revealing.

Rule 18: Automated Testing

Automated tools catch 30 to 40 percent of accessibility issues. Use them but do not trust them alone.

axe DevTools: browser extension, excellent

WAVE: WebAIM’s browser extension

Lighthouse: Chrome built-in accessibility audit

Pa11y: CLI for automated testing in CI/CD

Run before every deploy. Fix what shows up. Then do manual testing.

Legal Landscape in 2026

US: ADA-related web lawsuits hit 4,600+ in 2024, still rising. Most target businesses with 50+ employees. Settlements typically $10k to $50k plus required remediation.

EU: European Accessibility Act effective June 2025. Applies to most ecommerce, banking, transport, and digital service sites. Non-compliance can trigger fines and market access restrictions.

UK: Equality Act 2010 applies; enforcement has ramped up post-Brexit.

Canada: Accessible Canada Act federally; Ontario’s AODA for provincial.

Small sites (under $5M revenue, US based) face lower lawsuit risk but are not immune.

Accessibility and SEO

Many WCAG requirements overlap with SEO best practices:

Semantic HTML helps screen readers AND Google bots

Alt text helps accessibility AND image search

Page speed (related under WCAG) helps everyone

Clear navigation helps accessibility AND crawlability

Accessibility improvements routinely lift SEO. Our search engine optimisation services include accessibility audits for clients where compliance matters.

Tools and Workflow

Our recommended stack:

axe DevTools for automated scanning

WebAIM Contrast Checker for color

VoiceOver / NVDA for screen reader testing

Lighthouse for CI/CD

Keyboard-only testing sessions monthly

Pair with our image compressor for optimized images that include descriptive filenames (an accessibility plus SEO win).

The 30-Day Accessibility Sprint

Week 1: Run axe scan on top 20 pages. Document issues.

Week 2: Fix color contrast, alt text, form labels.

Week 3: Keyboard navigation, focus indicators, semantic HTML.

Week 4: Screen reader testing, motion preferences, tap targets.

Most small sites hit 95+ percent WCAG 2.2 AA compliance in this sprint.

Our UI/UX services include accessibility as a default, not an add-on.

FAQ

Is WCAG legally required in the US? The ADA (Americans with Disabilities Act) has been interpreted by courts to apply to websites, though Congress has not passed specific web accessibility legislation. Lawsuits typically cite WCAG 2.1 AA as the standard. WCAG 2.2 is newer but increasingly expected. For most businesses, compliance is prudent; for ecommerce over $5M revenue, essential.

How long does accessibility remediation take? A 20-page marketing site typically needs 40 to 80 hours of remediation to hit WCAG 2.2 AA compliance. A 200-page site with ecommerce takes 200 to 500 hours. Starting accessibility-aware from day one of a new build saves 80 percent of that effort.

Do accessibility overlays actually work? No, they do not achieve WCAG compliance and are themselves the subject of increasing lawsuits. Overlays like accessiBe, UserWay, and AudioEye claim instant compliance but cannot fix underlying code issues. Real accessibility requires real code changes. Avoid overlays as a substitute for proper work.

Is accessibility worth it for a small business site? Yes. You reach 15 to 20 percent more users (people with disabilities are 26 percent of US adults per CDC data). You rank better because accessibility overlaps with SEO. You reduce legal risk. You build a brand that respects all customers. The ROI is clearly positive.

Want an accessibility audit on your top 5 pages? Book a free 30-minute consultation and we will identify your biggest issues live.