Accessibility Code Fix Guides
These guides cover the WCAG 2.1 AA issues that show up most often in automated scans, manual audits, and ADA demand letters. Each page walks through what the problem is, why it matters for real users, how WCAG addresses it, and how to fix it in HTML, CSS, or framework code with copy-pastable examples.
Every guide is written for developers and product teams who want to fix the underlying code rather than install an overlay widget. Pair these guides with manual keyboard testing and a screen reader pass before considering an issue resolved.
Real-label vs placeholder, fieldsets and legends, aria-describedby for help and error text, plus a manual testing checklist.
Replace clickable divs, fix hover-only menus, audit focus order, keep modals usable, and prevent keyboard traps.
Brand-friendly :focus-visible styles for buttons, links, inputs, navigation, and custom components without dropping outlines.
Decide between empty, descriptive, and functional alt text for product images, icons, logos, charts, and decorative graphics.
Practical contrast fixes for body text, buttons, links, placeholders, text-over-image hero sections, error states, and chart colors.
Replace clickable divs with real buttons, give icon-only buttons accessible names, manage disabled and loading states, and avoid common ARIA pitfalls.
Make link text describe its destination, handle 'click here' patterns, label external links, and meet contrast requirements for inline links.
Use a single h1, keep hierarchy contiguous, label sections clearly, and avoid styling-only headings that confuse assistive tech.
Use aria-label, aria-labelledby, and aria-describedby correctly — and know when native HTML is the better answer.
Focus management, the native dialog element, escape-to-close, scroll lock, role=dialog, and ARIA patterns for accessible modals.
More fix guides are in the works. New pages are added as they pass an editorial quality review covering accuracy, code examples, manual testing steps, and source linking.
Run a free WCAG 2.1 AA scan on your site
ADA CodeFix scans your pages, identifies likely WCAG failures, and generates developer-reviewable code fixes — not vague descriptions, real HTML and CSS you can ship.
Scan My Site Free