WordPress Accessibility: Theme/Plugin Pitfalls + Fixes

Choose the right foundation (themes)

Pitfalls

• “Pixel-perfect” themes that use divs for everything (no headings/landmarks).

• Low-contrast typography and buttons.

• Fancy menus/sliders with broken keyboard focus.

Fixes

• Start with an accessibility-ready theme or a lean, semantic base.

• Verify one H1 per template, proper H2/H3, and landmarks (header, nav, main, footer).

• Bake in visible focus styles and AA contrast tokens from day one.

Skip link (drop into header.php)

<a class="skip-link screen-reader-text" href="#main">Skip to content</a>

Blocks & content (Gutenberg)

Pitfalls

• Heading blocks used for styling (H3 as a big label), no logical order.

• Images with missing or vague alt text.

• Link text like “click here”.

Fixes

• Train editors: one H1, then logical H2/H3.

• Use the Alt Text field; keep it 5–15 words and purposeful.

• Write meaningful link text (“View pricing”, “Download brochure”).

• Use the List and Table blocks for real lists/tables—avoid faking with line breaks.

Adjustable can reinforce readability with Text Options, Reading Ruler, Dictionary, and Light/Dark/Colour modes, but remember: content structure must be correct first.

Navigation & menus

Pitfalls

• Mega menus implemented with divs; no keyboard support.

• Hover-only open/close; Esc doesn’t close.

Fixes

• Use WordPress menus rendered as real links; toggle submenus with buttons.

• Ensure: Tab enters the menu, Esc closes, focus returns to the trigger.

• Mirror hover styles on :focus-visible.

Forms (contact, checkout, search)

Pitfalls

• Placeholder-only labels; inaccessible error messaging.

• Per-keystroke validation that interrupts typing.

Fixes

• Use visible <label for> for every field; groups use <fieldset><legend>.

• Validate on blur + submit; focus the first error; tie messages via aria-describedby.

• Add autocomplete attributes (email, address-line1, postal-code, etc.).

Media (images, video, PDFs)

Pitfalls

• Decorative images with non-empty alt (noise for screen readers).

• Captions/transcripts missing.

• PDFs uploaded without tags/reading order.

Fixes

• For decorative images, set empty alt (alt="").

• Provide captions for video and transcripts on the page.

• For PDFs, export tagged versions and link with type + size (“PDF, 1.2 MB”).

• Prefer HTML pages for living content; keep PDFs for downloads.

Plugins (the silent breaker)

Pitfalls

• Visual builders and marketing plugins that inject unlabelled controls or break focus.

• Carousels/sliders with auto-advance and no pause.

Fixes

• Vet plugins on a staging site with keyboard & screen-reader tests.

• Replace div-based controls with buttons/links; add ARIA only when needed.

• Provide pause/stop for any moving content and respect reduced motion.

Adjustable’s Page Options let users hide images/animations, highlight links, or scale pages, reducing friction when third-party UI gets heavy.

Performance & stability (Core Web Vitals)

Pitfalls

• Layout shift from late-loading fonts/ads.

• Oversized images and bloated script bundles.

Fixes

• Pre-size images; serve modern formats; lazy-load non-critical media.

• Reserve space for embeds/ads; use font-display: swap.

• Keep plugins lean; remove what you don’t need.

Focus management & traps (modals, drawers)

Pitfalls

• Modals that don’t trap focus or fail to return focus to trigger.

• Off-canvas menus that are tabbable while hidden.

Fixes

• On open: move focus inside, trap, and on close return to trigger.

• Hide off-canvas content with inert (or aria-hidden + remove from Tab order).

Minimal CSS for visible focus (enqueue once)

:root { --focus-ring: 2px solid #111318; }
:where(a,button,input,select,textarea,[role="button"]):focus-visible {
  outline: var(--focus-ring); outline-offset: 3px;
}

International & reading support

• If you serve multiple languages, ensure lang attributes are correct and switch content appropriately.

• Adjustable adds Language Translation and Text to Speech, helping global and low-vision users consume your content without you duplicating pages.

Governance: stop regressions

• Add a Definition of Done: headings, labels, focus, contrast, keyboard, motion.

• Run a quick scan + keyboard pass on staging before launch.

• Document editor rules in a one-page style guide inside WordPress.

• Schedule quarterly reviews of templates and high-traffic posts.

Quick testing routine (10–12 minutes)

1. Keyboard pass (5 min): Tab through nav → content → forms → dialogs. No traps; focus always visible.

2. Screen reader skim (3–4 min): Title, headings, links list, form labels, and error announcements.

3. Mobile spot check (2–3 min): Target sizes, reflow at 320 px, zoom allowed; sticky bars don’t hide focus.

Copy-paste checklist (Markdown)

How Adjustable helps (after structural fixes)

• Accessibility Profiles for quick, user-friendly presets.

• Text Options and Page Options (scaling, hide images/animations, highlight links) to reduce friction on dense pages.

• Reading Ruler, Cursor Adjustment, and Screen Mask to improve focus on long posts or forms.

• Text to Speech and Language Translation to broaden reach and comprehension.

• Dictionary for instant definitions in complex content.

• Light/Dark/Colour modes to meet user preferences.

• Configurable toolbar or widget placement to suit your theme.

Try Adjustable

FAQs

Are “accessibility-ready” themes enough?
They’re a solid start, not a guarantee. You still need to verify headings, focus, contrast, and component behaviour.

Which WordPress plugins cause the most trouble?
Anything that injects interactive UI (menus, sliders, popups, form builders). Test each install/update with keyboard and a quick screen-reader skim.

Do toolbars make a site compliant?
Toolbars like Adjustable don’t replace structural fixes. They increase comfort, control, and reach—lifting engagement while you maintain accessible templates and content.

How do I keep editors from breaking accessibility?
Provide a one-page editor guide (headings, links, alt text), add a pre-publish checklist, and review top posts monthly.

Next steps

• Audit your active theme with the checklist and fix tokens, headings, and focus.

• Test your top 10 plugins on staging; replace or wrap any that fail keyboard checks.

• Add Adjustable to improve readability, language access, and task completion while you iterate.

• Read next: Accessible Forms, Keyboard Accessibility, Color Contrast Accessibility.