Digging things up…
Digging things up…
Quick reference for WCAG 2.1/2.2 success criteria at A, AA and AAA levels for web accessibility.
SEO & Web Tools
Free SEO and website tools to audit performance, check technical health, and preview how your pages appear in search and social. No sign-up, results in seconds.
Related SEO tools
Full five-area audit covering SEO, performance, usability, technical health and content. PDF delivered to your inbox.
Use tool →⚡Check your site's LCP, INP and CLS scores against Google's benchmarks. See exactly where you pass or fail.
Use tool →🔍See how your page appears in Google search results. Check title length, description, canonical, and all OG tags.
Use tool →🤖Fetch and validate your robots.txt file. Catch accidental blocks, missing sitemap references, and syntax errors.
Use tool →Explore more from Dino Media: All Free Tools · Our Services · Digital Glossary · Our Work
Free Website Health Check
Our free health check audits your website for SEO, performance, and usability — giving you a clear roadmap to better rankings.
Level
Principle
1.1.1Level APerceivableNon-text Content
All non-text content (images, icons, video) has a text alternative (alt text, label, or caption).
How to fix: Add alt="" to all <img> tags. Empty alt for decorative images. Use aria-label for icon buttons.
1.3.1Level APerceivableInfo and Relationships
Information, structure, and relationships conveyed through presentation can be programmatically determined.
How to fix: Use semantic HTML: headings (h1–h6), lists (ul/ol), tables with <th>, form labels with <label>.
1.4.1Level APerceivableUse of Color
Color is not the only visual means of conveying information.
How to fix: Add icons, patterns, or text labels alongside color coding. Don't rely on "red = error" alone.
1.4.3Level AAPerceivableContrast (Minimum)
Text has a contrast ratio of at least 4.5:1 (normal text) or 3:1 (large text ≥18pt or 14pt bold).
How to fix: Use a contrast checker. For brand colors, ensure white/dark text meets the ratio.
1.4.4Level AAPerceivableResize Text
Text can be resized up to 200% without loss of content or functionality.
How to fix: Use relative units (rem, em). Don't use overflow: hidden on containers with text.
1.4.10Level AAPerceivableReflow
Content can be presented without scrolling in two directions at 320px width.
How to fix: Ensure responsive layouts work at 320px. Avoid fixed pixel widths on text containers.
2.1.1Level AOperableKeyboard
All functionality is operable through a keyboard interface.
How to fix: Test by tabbing through the site. Ensure focus is visible and logical. Use <button> not <div onClick>.
2.1.2Level AOperableNo Keyboard Trap
Keyboard focus is not trapped in any component unless the user is aware and can escape.
How to fix: Modals should trap focus (intentional) but must be closeable via Escape. Test all interactive components.
2.4.3Level AAOperableFocus Order
If content can be navigated sequentially, the focus order preserves meaning and operability.
How to fix: Use logical DOM order. Avoid tabindex values > 0. CSS grid/flex visual reordering can break this.
2.4.7Level AAOperableFocus Visible
Any keyboard operable user interface has a visible keyboard focus indicator.
How to fix: Never do outline: none without a replacement. Use :focus-visible for custom focus styles.
3.1.1Level AUnderstandableLanguage of Page
The default human language of each web page can be programmatically determined.
How to fix: Add lang="en" (or appropriate code) to the <html> element.
3.3.1Level AUnderstandableError Identification
Input errors are identified and described to the user in text.
How to fix: Show specific error messages next to fields. Don't rely on color or icons alone.
3.3.2Level AAUnderstandableLabels or Instructions
Labels or instructions are provided when content requires user input.
How to fix: Use <label> for all inputs. Add placeholder text as a supplement, not replacement. Describe format requirements.
4.1.1Level ARobustParsing
Content implemented using markup languages has complete start/end tags, no duplicate attributes.
How to fix: Validate HTML. Fix unclosed tags. Ensure unique IDs.
4.1.2Level ARobustName, Role, Value
UI components have accessible names, roles, and states that can be determined programmatically.
How to fix: Use semantic HTML. Add aria-label to icon buttons. Use aria-expanded, aria-selected, etc. on custom components.
4.1.3Level AARobustStatus Messages
Status messages can be programmatically determined through role or properties without focus.
How to fix: Use aria-live="polite" for non-critical updates (toasts). aria-live="assertive" for critical alerts.