Loading content...
Track your progress toward WCAG compliance with this interactive checklist
1.1.1 Non-text Content
Provide text alternatives for all images, icons, and other non-text content so screen readers can convey the information.
1.2.1 Audio-only and Video-only (Prerecorded)
Provide transcripts for audio-only content and descriptions or transcripts for video-only content.
1.2.2 Captions (Prerecorded)
Provide captions for all prerecorded videos with sound.
1.2.3 Audio Description or Media Alternative (Prerecorded)
Provide a transcript or audio description for prerecorded video content.
1.2.4 Captions (Live)
Provide captions for live videos with sound.
1.2.5 Audio Description (Prerecorded)
Provide audio descriptions for all prerecorded videos.
1.3.1 Info and Relationships
Use proper HTML elements (headings, lists, tables) so assistive technologies understand the page structure.
1.3.2 Meaningful Sequence
Ensure the DOM order matches the visual order so content makes sense when read linearly.
1.3.3 Sensory Characteristics
Don't rely on shape, size, or location alone for instructions (e.g., 'click the round button').
1.3.4 Orientation
Content must work in both portrait and landscape orientations.
1.3.5 Identify Input Purpose
Use HTML autocomplete attributes on form fields collecting user data.
1.4.1 Use of Color
Never rely on color alone to convey information. Add icons, text labels, or patterns.
1.4.2 Audio Control
Don't auto-play audio for more than 3 seconds without a way to stop it.
1.4.3 Contrast (Minimum)
Text must have at least 4.5:1 contrast ratio with its background (3:1 for large text).
1.4.4 Resize text
Ensure text can be zoomed to 200% without breaking the layout or hiding content.
1.4.5 Images of Text
Use real text instead of images of text whenever possible.
1.4.10 Reflow
Content must reflow to fit 320px width without horizontal scrolling.
1.4.11 Non-text Contrast
Interactive elements and meaningful graphics need 3:1 minimum contrast.
1.4.12 Text Spacing
Content must adapt to increased text spacing without breaking.
1.4.13 Content on Hover or Focus
Popups (like tooltips) must be dismissible, hoverable, and persistent.
2.1.1 Keyboard
Every interactive element must be usable with just a keyboard (no mouse required).
2.1.2 No Keyboard Trap
Users must be able to navigate away from any element using only the keyboard.
2.1.4 Character Key Shortcuts
Single-key shortcuts must be turn-off-able or remappable.
2.2.1 Timing Adjustable
Users must be able to turn off, adjust, or extend time limits.
2.2.2 Pause, Stop, Hide
Users must be able to pause, stop, or hide moving or auto-updating content.
2.3.1 Three Flashes or Below Threshold
No content should flash more than 3 times per second.
2.4.1 Bypass Blocks
Provide skip links to allow users to bypass repetitive navigation and jump to main content.
2.4.2 Page Titled
Every page must have a unique, descriptive title.
2.4.3 Focus Order
Tab order must follow a logical sequence that matches visual layout.
2.4.4 Link Purpose (In Context)
Link text should make sense on its own or within its context.
2.4.5 Multiple Ways
Provide multiple ways to find pages (e.g., search, sitemap, navigation).
2.4.6 Headings and Labels
Headings and labels must be descriptive and clear.
2.4.7 Focus Visible
Keyboard focus must be clearly visible with sufficient contrast and size.
2.4.11 Focus Not Obscured (Minimum)
Focused elements must not be completely hidden by sticky headers, footers, or other overlays.
2.5.1 Pointer Gestures
Don't require complex gestures (like pinch-to-zoom) without simple alternatives.
2.5.2 Pointer Cancellation
Actions should trigger on the 'up' event, not the 'down' event, to allow cancellation.
2.5.3 Label in Name
The accessible name (for screen readers) must match the visible label.
2.5.4 Motion Actuation
Don't require device motion (shaking, tilting) without an alternative.
2.5.7 Dragging Movements
Provide alternatives to drag-and-drop interactions like buttons or direct input.
2.5.8 Target Size (Minimum)
Touch targets must be at least 24x24 pixels to be easily tappable.
3.1.1 Language of Page
Set the language attribute on the html tag (e.g., <html lang='en'>).
3.1.2 Language of Parts
Mark up changes in language within the page (e.g., <span lang='fr'>).
3.2.1 On Focus
Focusing on an element should not automatically trigger navigation or form submission.
3.2.2 On Input
Changing a setting (like a checkbox) shouldn't unexpectedly change the page context.
3.2.3 Consistent Navigation
Keep navigation consistent across pages.
3.2.4 Consistent Identification
Use consistent icons and labels for the same functions (e.g., search icon).
3.2.6 Consistent Help
Help links and contact information should appear in consistent locations across pages.
3.3.1 Error Identification
Clearly identify form errors and describe them in text that screen readers can access.
3.3.2 Labels or Instructions
Every form field needs a clear label or instruction explaining what to enter.
3.3.3 Error Suggestion
Suggest fixes for errors when possible (e.g., 'Did you mean...?').
3.3.4 Error Prevention (Legal, Financial, Data)
Prevent serious errors by allowing reversal, checking, or confirmation.
3.3.7 Redundant Entry
Don't make users re-enter information they've already provided in the same session.
3.3.8 Accessible Authentication (Minimum)
Provide authentication methods that don't require solving puzzles, remembering passwords, or transcribing text.
4.1.1 Parsing
Ensure HTML is well-formed with no parsing errors.
4.1.2 Name, Role, Value
Use proper ARIA attributes and semantic HTML so assistive technologies understand component purpose.
4.1.3 Status Messages
Use ARIA live regions to announce status messages without moving keyboard focus.
