Skip to main content
Guides

The Practical WCAG 2.1 Audit Checklist for 2026

Published on: Saturday, May 23, 2026 By UXAudit.Now Team

sisyphus

Accessibility audits are simpler than the WCAG specification makes them sound. WCAG 2.1 has 78 success criteria split into 4 principles (Perceivable, Operable, Understandable, Robust). Most accessibility failures on production sites cluster around 12 of those — and most teams can fix them in a sprint or two if they know what to look for.

This article is the 12-check practical accessibility audit we run via the axe-core Smart Plugin on every UXAudit.Now Agent run. Use it as a checklist on your own site this afternoon.

Why accessibility audits are non-optional in 2026

Two reasons:

Regulatory. The European Accessibility Act enforcement started 2025, the US ADA continues to drive litigation. Public-facing sites for B2B or B2C in regulated industries (finance, healthcare, government) need provable WCAG conformance.

Operational. Accessibility failures correlate with general UX failures. Sites that fail WCAG often fail mobile-tap-targets, color contrast, keyboard navigation — issues that hurt every user, not just disabled users. Fixing accessibility is fixing UX for everyone.

The 12 checks (in order — top failures we see in audits)

1. Color contrast — text vs background

WCAG 2.1 AA requires 4.5:1 contrast for body text, 3:1 for large text (18pt+). axe-core auto-scans this on every audit.

Common fail: Brand muted-gray text on a slightly-darker brand background. Looks elegant; fails contrast. Test with a contrast checker (or just run the axe-core plugin).

2. Focus indicators on all interactive elements

Tab through your site with the keyboard. Can you SEE where focus is at every step? A visible outline / ring / underline / color shift?

Common fail: outline: none global reset with nothing replacing it. The button looks elegant but keyboard users can’t see where they are.

First focusable element on every page should be a “Skip to main content” link that lets keyboard users bypass the nav. Visible on focus, hidden otherwise.

Audit cue: Tab once from a fresh page load. Is the first focus a skip link?

4. Alt text on content images

All images that convey information need alt text. Decorative images get alt="" (intentionally empty, not missing).

Common fail: Product images with alt="image.jpg" (the filename). Screen-reader users hear “image dot jpg” — useless.

5. Form labels associated with inputs

Every form input needs a <label for> that matches the input’s id. Placeholder text is NOT a label substitute (it disappears when typing).

Common fail: Modern minimalist forms that hide labels and use placeholder-only. Screen readers can’t find the field’s purpose.

6. Heading hierarchy is semantic + sequential

H1 → H2 → H3 should reflect content hierarchy, not visual styling. Don’t skip levels (H1 → H3 with no H2). Don’t have multiple H1s on a single page.

Common fail: Designer styled H4 to look like a section header but used it because of font size, not because the content is 4 levels deep. Screen readers navigate by heading level.

7. Keyboard reachability for every interactive element

Every button, link, dropdown, modal-close — all reachable by Tab key. Custom JS widgets often break this.

Common fail: Image-based “buttons” that are <div> with onclick — invisible to keyboard.

8. ARIA roles where semantics are unclear

If you use <div> for a button (please don’t — use <button>), at minimum add role="button" + tabindex="0" + keyboard event handler.

Better fix: Use semantic HTML — <button> for buttons, <a> for links, <form> for forms. ARIA is the fallback when semantic HTML can’t express the pattern.

9. Color isn’t the only way to convey information

“Required fields are in red” only works for sighted users without color-blindness. Required fields need: asterisk (visible), label text (“Email *”), and aria-required="true".

Common fail: Status colors (red = error, green = success) with no secondary indicator.

10. Resizable text without breaking layout

Users should be able to zoom to 200% without horizontal scroll, lost content, or broken UI.

Common fail: Fixed-pixel layouts that overflow when text is enlarged. Use rem / em / responsive units.

11. Time limits on form submissions / sessions

Long forms or session timeouts need a way to extend the time, or warn before timeout, or save state.

Common fail: Banking site that logs out after 10 min with no warning, mid-form.

12. Documents (PDFs) accessible too

Linked PDFs, especially ones critical for accessibility (privacy policy, terms), need to be properly tagged. Image-only PDFs are not accessible to screen readers.

The fix: Generate PDFs from HTML / Word with proper headings + alt text, not from image scans.

What axe-core catches vs what humans must catch

axe-core (the engine behind UXAudit.Now’s accessibility Smart Plugin) catches ~57% of WCAG failures automatically. The other ~43% require human judgment:

  • Whether alt text is meaningful (axe catches missing alt, not bad alt)
  • Whether heading hierarchy reflects content (axe catches level-skip, not semantic mismatch)
  • Whether focus indicators are visible enough (axe checks presence, not quality)

This is why every UXAudit.Now audit pairs the Smart Plugin output (automated) with the manual UX Review tool (human judgment). Together they cover the full WCAG surface.

Run an accessibility audit on your site

The Smart Plugins suite (which includes axe-core, plus 7 other analyzers) ships with every UXAudit.Now Agent audit. Run a free audit — 5 minutes, full accessibility section in the report, severity-prioritized findings with concrete fix patterns.

For the broader Smart Plugins context: Smart Plugins solution page. For WCAG-related glossary terms: Accessibility, axe-core, WCAG.

Stay Updated with the Latest Insights!

Get the best of UX insights, tips, and trends delivered straight to your inbox