Accessibility is the law in many jurisdictions, a ranking signal, and the right thing to do. Here’s the practical WCAG 2.2 checklist.
Why Accessibility Matters
15% of the global population has a disability; accessible sites serve them. Accessibility is legally required in Ontario (AODA), the EU (European Accessibility Act as of 2025), and growing in the US (Title III ADA). Google uses accessibility signals in ranking. Accessible sites also rank better because good structure (semantic HTML, headings, alt text) helps both screen readers and search engines. Accessibility is the highest-leverage UX investment.
WCAG 2.2 Levels
WCAG 2.2 defines three conformance levels: A (minimum), AA (legal standard for most jurisdictions), AAA (aspirational, impractical for most content). Aim for AA. WCAG organizes guidelines into four principles: Perceivable, Operable, Understandable, Robust. WCAG 2.2 added new success criteria around target size, drag interactions, focus appearance — small but important updates for modern interfaces.
Semantic HTML Foundation
Most accessibility comes from using HTML elements correctly. Buttons are `<button>`, not `<div onClick>`. Navigation is `<nav>`. Main content is `<main>`. Headings hierarchy is correct (one H1, then H2, H3 nested properly). Lists are `<ul>` or `<ol>`. Forms have `<label>` linked to inputs. Clean semantic HTML is accessible by default; broken semantics require ARIA patches that developers often get wrong.
Keyboard Navigation
Every interaction must be possible with keyboard alone. Tab order should match visual order. Focus must be visible (not outline: none without replacement). Skip links for users to jump past repeated content. Custom components (modals, dropdowns, carousels) need keyboard handlers — arrow keys, Escape, Enter. Test by unplugging your mouse and using the site. Most accessibility failures are caught in 10 minutes of keyboard testing.
Images, Videos, Alt Text
Every image needs alt text describing its purpose in context. Decorative images use `alt=""`. Images of text should be real text (text-in-image is a major accessibility failure). Videos need captions and transcripts. Audio needs transcripts. Animated content needs a pause mechanism. Videos that autoplay with sound violate WCAG outright — if you autoplay, start muted and give visible controls.
Color and Contrast
Body text needs 4.5:1 contrast ratio against its background. Large text (18pt+) needs 3:1. UI elements (buttons, form borders) need 3:1. Color alone can’t convey meaning (red error text needs an icon or label too — colorblind users need redundancy). Test with tools like axe DevTools, WAVE, or Lighthouse. Most contrast failures happen on marketing pages where designers prioritize aesthetics over readability; push back and fix them.
Forms and Error Handling
Every form input needs a visible label (not placeholder-as-label). Errors must be associated with the field via aria-describedby. Error messages must be announced to screen readers on submission (role="alert"). Required fields marked with both asterisk and text. Group related fields with `<fieldset>` and `<legend>`. Auto-complete attributes help users with disabilities AND privileged users alike — enable them.
Need help with web development?
Get a free audit of your web development setup. We’ll show you exactly where the opportunities are.
Get Free Audit →