How to Fix Every Accessibility Issue
The Accessibility Checker tests your pages against WCAG 2.2 Level AA — the legal standard for accessibility in the UK, EU and most of the world. This index covers fixes for every category it flags: colour contrast, missing alt text, keyboard navigation traps, focus indicators, ARIA misuse, form labels, heading structure and timed content. Real fixes, not just "add an alt attribute" checklists.
By WCAG criterion
The most common findings, ordered by frequency on real audits:
🎨 Fix insufficient colour contrast LIVE
WCAG 1.4.3: text needs 4.5:1 contrast against background (3:1 for large text). The brand-colour-vs-accessibility compromise patterns. How to test, override theme colours globally, and convince stakeholders to change a palette.
🖼️ Fix missing or wrong alt text LIVE
WCAG 1.1.1: every meaningful image needs descriptive alt. Decorative images get alt="", never omit. The "what does this image add to the content" test. How to bulk-fix in WordPress, Shopify and static HTML.
⌨️ Fix keyboard navigation traps LIVE
WCAG 2.1.1 and 2.1.2: every interactive element must be reachable and operable by Tab/Shift+Tab/Enter. Custom dropdowns that trap focus, modals that lose focus on close, skip-to-content links done wrong.
🎯 Fix missing focus indicators LIVE
WCAG 2.4.7: focused elements must be visually distinct. The outline: none; mistake. Custom focus rings that meet contrast, the :focus-visible vs :focus distinction.
🏷️ Fix unlabelled form fields LIVE
WCAG 1.3.1 and 3.3.2: every input needs a programmatically-associated label. Why placeholder is not a label, the visually-hidden-label pattern for icon-only fields, and required-field indicators that work with screen readers.
📐 Fix heading hierarchy violations LIVE
WCAG 1.3.1: one h1, then nested h2/h3 without skipping. Screen-reader users navigate by heading — broken hierarchy breaks their navigation. How to audit and fix without redesigning visual hierarchy.
📢 Fix missing or wrong ARIA labels LIVE
Icon buttons without accessible names, aria-label on elements that already have visible text (which overrides the visible text), aria-hidden="true" on focusable elements (which traps screen readers).
🔗 Fix vague link text LIVE
WCAG 2.4.4: "click here", "read more", "learn more" fail when screen readers list all links out of context. How to write descriptive link text without breaking the visual design.
By platform
Where accessibility fixes are applied depends on your CMS or framework:
📰 Fix accessibility in WordPress PLANNED
Theme fixes, accessibility-ready theme selection, WP Accessibility plugin patterns, Gutenberg block accessibility, the common a11y issues from page builders (Elementor, Divi, WPBakery).
🛒 Fix accessibility in Shopify PLANNED
Theme accessibility audits, the common patterns in Dawn and other free themes that fail WCAG, app-injected widgets that destroy keyboard navigation.
⚛️ Fix accessibility in React / Next.js PLANNED
Headless UI vs Radix vs Reach UI for accessible components, the focus-management patterns for SPAs, route-change announcements for screen readers, and the eslint-plugin-jsx-a11y rules to enforce in CI.
What our Accessibility Checker tests
The checker runs axe-core rules against your page and reports every WCAG 2.2 Level AA violation, plus AAA recommendations. For the complete reference, see the Accessibility Guide or view a sample accessibility report.
♿ Run the checker first
Before fixing, audit your live page and get the prioritised violation list. Most sites have 4-6 recurring issues across the template — fix the template and you fix the whole site.
Run Accessibility Checker →