WCAG 2.2 Explained Simply
WCAG 2.2 is the latest version of the Web Content Accessibility Guidelines — the global standard that defines how to make websites usable by everyone, including people with disabilities. If you run a website, this affects you.
Below, we break down key success criteria in plain English. Each one includes real examples. No jargon, no legalese — just what you need to know.
What is WCAG?
WCAG stands for Web Content Accessibility Guidelines. Published by the World Wide Web Consortium (W3C), these guidelines set out how to make digital content — websites, apps, documents — accessible to people with a wide range of disabilities. That includes people who are blind, deaf, have motor impairments, cognitive conditions like ADHD or dyslexia, or temporary disabilities like a broken arm.
The guidelines are organised around four principles. Everything on your website should be Perceivable (users can see or hear it), Operable (users can interact with it), Understandable (users can make sense of it), and Robust (it works across different technologies and assistive tools).
WCAG 2.2 is the latest version, released in October 2023, and it builds on WCAG 2.1 with 9 new criteria focused on cognitive accessibility, mobile usability, and keyboard navigation.
The Three Levels of Compliance
The bare essentials. Without these, some people simply cannot use your website at all.
- ✓ Images have alt text
- ✓ Everything works with a keyboard
- ✓ No content causes seizures
- ✓ Pages have proper headings
What most laws require. This is the level you should aim for — it covers the majority of accessibility needs.
- ✓ Text has 4.5:1 colour contrast
- ✓ Text can be resized to 200%
- ✓ Captions on all video content
- ✓ Consistent navigation throughout
The gold standard. Not always required by law, but recommended where possible.
- ✓ 7:1 enhanced contrast ratio
- ✓ Sign language for video
- ✓ Simplified reading level
- ✓ Extended audio descriptions
Why WCAG Compliance Matters for Your Business
Legal obligation
In the UK, US, and EU, accessibility is increasingly a legal requirement. The Equality Act 2010, ADA, Section 508, and the EU Accessibility Act all create obligations for website owners.
Wider audience
1 in 6 people live with some form of disability. Accessible websites reach more people, serve more customers, and build more trust.
Better for everyone
Accessibility improvements — clearer navigation, better contrast, keyboard support — benefit all users, not just those with disabilities.
Key WCAG 2.2 Success Criteria
Below are the most commonly relevant success criteria, explained in plain English with practical examples.
Non-text Content
Every image, icon, chart, or video needs descriptive text that explains what it shows. Decorative images should be marked as decorative so screen readers skip them.
Examples
- Add alt='Company logo' to your logo image
- Add alt='' to decorative background images
- Describe charts: alt='Sales increased 25% from January to March'
- Use aria-label for icon buttons: aria-label='Close dialog'
Captions (Pre-recorded)
All videos need captions that show what people are saying and important sounds, so deaf and hard-of-hearing people can understand the content.
Examples
- Add captions to all training videos on your website
- Include sound effects in captions: [music playing] [door slams]
- Caption all speech, including multiple speakers
- Sync captions accurately with the audio timing
Info and Relationships
Use proper HTML tags so that screen readers and other tools can understand your content structure.
Examples
- Use <h1>, <h2>, <h3> for headings, not just styled text
- Use <ul> and <ol> for lists, not just bullet characters
- Use <table>, <th>, <td> for data tables
- Label form fields with <label> elements
Use of Color
Don't use only colour to show important information — also use text, icons, or patterns so colourblind people can understand it too.
Examples
- Error messages use red colour AND an error icon
- Required form fields have asterisks (*) not just red colour
- Charts use patterns or labels, not just different colours
- Links are underlined or bolded, not just a different colour
Contrast (Minimum)
Your text needs to be dark enough against its background so people can read it easily. Small text needs stronger contrast (4.5:1) than large text (3:1).
Examples
- Black text on white background = excellent contrast
- Dark blue (#1741DD) on white = good contrast
- Light gray (#999) on white = probably too light
- Large headings can use slightly lighter colours than body text
Non-text Contrast
Buttons, form fields, and important graphics need enough contrast (3:1) against their background so people can see them clearly.
Examples
- Button borders must be visible against the page background
- Form field borders need contrast when focused or unfocused
- Icon buttons must stand out from their background
- Chart elements need distinguishable colours
Text Spacing
Your text should still be readable and usable when people increase line spacing or letter spacing to help them read better.
Examples
- Text should wrap properly with increased line height
- Buttons should still work with more letter spacing
- Content shouldn't disappear when spacing increases
- Layout should adapt gracefully to text changes
Keyboard
Everything that works with a mouse must also work with just keyboard keys like Tab, Enter, and arrow keys.
Examples
- Press Tab to move between buttons and links
- Press Enter or Space to activate buttons
- Use arrow keys to navigate menus
- Press Escape to close modal dialogs
No Keyboard Trap
People using only keyboard should never get stuck in one part of your page with no way to get out.
Examples
- Modal dialogs should close with Escape key
- Dropdown menus should allow escape back to the trigger
- Media players should allow focus to move beyond them
- Custom widgets should have clear exit methods
Bypass Blocks
Add a 'skip to main content' link so people don't have to tab through the same navigation on every page.
Examples
- Add a 'Skip to main content' link at the top of each page
- Use proper heading structure (H1, H2, H3) for navigation
- Group related navigation items together
- Provide landmarks like <main>, <nav>, <aside>
Page Titled
Every page needs a clear title that describes what the page is about, so people know where they are on your website.
Examples
- Home page: 'Web Accessibility Testing | Accessima'
- Product page: 'iPhone 15 Pro - Specifications | Apple'
- Blog post: 'How to Write Alt Text | Accessibility Blog'
- Contact page: 'Contact Us | Company Name'
Focus Order
When someone presses Tab to move through your page, the focus should go in an order that makes sense.
Examples
- Tab through forms from top to bottom, left to right
- Navigate main menu before page content
- Move through modal dialog contents before returning to main page
- Skip links should be first in tab order
Link Purpose (In Context)
Make your link text descriptive so people know where the link will take them before they click it.
Examples
- Good: 'Download our accessibility checklist (PDF)'
- Good: 'Read more about WCAG compliance guidelines'
- Bad: 'Click here' or 'Read more' without context
- Good: 'Contact our support team' instead of 'Contact us'
Multiple Ways
Provide multiple ways for people to find pages on your website, like search, navigation menus, sitemaps, or related links.
Examples
- Main navigation menu and search functionality
- Breadcrumb navigation and related article links
- Site map and category browsing
- Popular pages section and footer links
Language of Page
Tell assistive technologies what language your page is written in so they can pronounce words correctly.
Examples
- Add lang='en' to your <html> tag for English pages
- Use lang='es' for Spanish pages
- Add lang='fr' for French content sections
- Mark foreign phrases: <span lang='es'>Hola</span>
Language of Parts
When you use words or phrases in a different language than the main page language, mark them so screen readers can pronounce them correctly.
Examples
- French phrase in English text: <span lang='fr'>Bonjour</span>
- Spanish quote: <blockquote lang='es'>Hola mundo</blockquote>
- Foreign company names with proper language tags
- Multilingual contact information properly marked
On Focus
Don't automatically redirect people or change the page content just because they focused on something — wait for them to actively choose an action.
Examples
- Dropdown menus don't auto-submit when selected with keyboard
- Form fields don't automatically move focus to the next field
- Links don't automatically activate when focused
- Select menus don't navigate to a new page on focus change
Error Identification
When someone makes an error in a form, clearly tell them which field has the error and describe what went wrong.
Examples
- 'Email address is required' not just a red border
- 'Password must be at least 8 characters'
- Error summary at the top of the form listing all errors
- Error messages that appear next to the relevant field
Parsing
Write clean, valid HTML code so assistive technologies can understand and process your content properly.
Examples
- Close all HTML tags properly: <div>content</div>
- Use unique IDs: each id='unique-name' appears only once
- Nest tags correctly: <div><p>text</p></div>
- Include required attributes: <img src='photo.jpg' alt='description'>
Name, Role, Value
All user interface components — buttons, inputs, checkboxes — must have a name, convey their role (what type of element they are), and communicate their state to assistive technologies.
Examples
- Buttons have descriptive labels: aria-label='Close dialog'
- Custom checkboxes use role='checkbox' and aria-checked
- Expandable sections use aria-expanded='true/false'
- Form fields are properly labelled with <label> elements
Need help meeting WCAG standards?
Our team of IAAP-certified specialists can audit your website and give you a clear, prioritised plan for meeting WCAG 2.2 AA.
Learn About Our Audits →