Web accessibility: a practical WCAG 2.2 guide for your website
An accessible website is one anyone can use, including people with visual, hearing, motor or cognitive disabilities. In the U.S. it's also a legal risk: accessibility lawsuits against business websites are filed by the thousands every year. And it improves your SEO and conversions.
Key takeaways
- WCAG 2.2 is the international web accessibility standard; the usual target is level AA.
- In the U.S., the ADA is applied to websites in thousands of lawsuits every year, and small businesses are frequent targets.
- Accessibility "overlay" widgets don't make a site accessible: the code has to be fixed.
What is web accessibility?
It's designing and building websites that everyone can perceive, understand, navigate and use: people using screen readers, people who navigate only by keyboard, people with low vision, color blindness, hearing or cognitive disabilities, and also older adults or someone with a broken arm using their phone in bright sunlight.
The W3C's Web Content Accessibility Guidelines (WCAG) are the global reference. Version 2.2, published in October 2023, organizes requirements under four principles: content must be perceivable, operable, understandable and robust, with three conformance levels (A, AA and AAA).
Why it matters for your business
- Legal risk in the U.S.: courts have applied Title III of the Americans with Disabilities Act (ADA) to business websites, and plaintiffs file thousands of digital accessibility lawsuits a year, many against small and mid-size businesses. The Department of Justice has also adopted WCAG 2.1 AA as the standard for state and local government websites under Title II, with compliance dates starting in 2026.
- Other markets: if you sell to consumers in the European Union, the European Accessibility Act has applied since June 2025.
- More customers: a significant share of adults live with a disability, and the share grows with age.
- Better SEO: well-structured headings, alt text, descriptive links and semantic HTML are exactly what search engines and AI assistants need to understand your content.
- Higher conversions: clear forms, large buttons and good contrast help every user, not only those with disabilities.
Practical checklist (level AA)
Perceivable
- Contrast of at least 4.5:1 for normal text and 3:1 for large text and key icons.
- Alt text (
alt) describing informative images;alt=""for decorative ones. - Captions on videos and transcripts for audio.
- Don't convey information through color alone (for example, "required fields are in red").
- Content must work at 200% zoom and on 320 px-wide screens without horizontal scrolling.
Operable
- Everything must work with the keyboard alone: menus, forms, popups and carousels.
- Visible focus on the active element, not hidden by sticky headers or banners (new in WCAG 2.2).
- Touch targets of at least 24 × 24 pixels (new in WCAG 2.2).
- If something is dragged (sliders, sortable lists), there must be a single-click alternative (new in WCAG 2.2).
- A "skip to content" link and unique page titles.
Understandable
- Language declared in the HTML:
<html lang="en">. - Visible labels on every form field, not just placeholder text.
- Error messages that explain what went wrong and how to fix it.
- Don't ask for the same information twice in a process, and don't require puzzles to log in (both new in WCAG 2.2).
Robust
- Semantic HTML:
<button>for actions,<a>for navigation, headings in order (h1, h2, h3). - ARIA attributes only when native HTML isn't enough, and used correctly.
- Accessible names on icon-only buttons (
aria-label="Open menu").
How to evaluate your site
- Automated tools: Lighthouse (in Chrome), axe DevTools or WAVE. They catch some problems, not all.
- Keyboard test: navigate your site using only Tab, Shift + Tab, Enter and Escape. Can you always see where you are? Can you open and close the menu?
- Screen reader test: NVDA (free on Windows), VoiceOver (Mac and iPhone) or TalkBack (Android).
- Zoom test: zoom to 200% and make sure the layout doesn't break.
Beware of accessibility "overlays"
Widgets that promise to make your site accessible "with one line of code" don't fix the underlying problems, sometimes interfere with screen readers and are rejected by much of the disability community. Sites using them have still been sued, and in 2025 the U.S. Federal Trade Commission penalized one overlay vendor over deceptive claims.
Real accessibility happens in design and code. The good news: when it's considered from the start of a project, it costs very little.
Frequently asked questions
Is my website legally required to be accessible?
In the U.S., government websites must meet specific standards, and courts have applied the ADA to many business websites. Your exact obligations depend on your sector and where you sell; when in doubt, ask a lawyer. Either way, meeting WCAG 2.2 AA is the safest benchmark.
If Lighthouse scores 100 for accessibility, do I meet WCAG?
No. Automated tools detect only some problems. You also need manual testing with a keyboard and a screen reader.
Can WordPress and Elementor sites be accessible?
Yes, but it depends on the theme, the plugins and how pages are built. Choose themes with strong accessibility support, check your palette's contrast and test menus and forms with a keyboard.
Conclusion
Accessibility isn't an add-on feature: it's part of building a website properly. Start with what has the most impact (contrast, alt text, labeled forms and keyboard navigation). You'll improve the experience for every visitor, reduce legal risk and strengthen your SEO.
