WCAG 2.2
Explained Simply

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.

• 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’

All videos need captions that show what people are saying and important sounds, so deaf and hard-of-hearing people can understand the content.

• 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

Use proper HTML tags so that screen readers and other tools can understand your content structure.

• 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

Don’t use only colour to show important information — also use text, icons, or patterns so colourblind people can understand it too.

• 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

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).

• Black text on white background = excellent contrast
• Dark blue (#1741DD) on white = good contrast
• Light grey (#999) on white = probably too light
• Large headings can use slightly lighter colours than body text

Buttons, form fields, and important graphics need enough contrast (3:1) against their background so people can see them clearly.

• 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

Your text should still be readable and usable when people increase line spacing or letter spacing to help them read better.

• 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

Everything that works with a mouse must also work with just keyboard keys like Tab, Enter, and arrow keys.

• 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

People using only a keyboard should never get stuck in one part of your page with no way to get out.

• 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

Add a ‘skip to main content’ link so people don’t have to tab through the same navigation on every page.

• 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>

When someone presses Tab to move through your page, the focus should go in an order that makes sense.

• 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

Make your link text descriptive so people know where the link will take them before they click it.

• Good: ‘Download our accessibility checklist (PDF)’
• Good: ‘Read more about WCAG compliance guidelines’
• Avoid: ‘Click here’ or ‘Read more’ without context
• Good: ‘Contact our support team’ instead of just ‘Contact us’

Provide multiple ways for people to find pages on your website, like search, navigation menus, sitemaps, or related links.

• Main navigation menu and search functionality
• Breadcrumb navigation and related article links
• Site map and category browsing
• Popular pages section and footer links

Tell assistive technologies what language your page is written in so they can pronounce words correctly.

• 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=’fr’>Bonjour</span>

When someone makes an error in a form, clearly tell them which field has the error and describe what went wrong.

• ‘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

All user interface components — buttons, inputs, checkboxes — must have a name, convey their role, and communicate their state to assistive technologies.

• 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