Skip to main content
SweepHound

Platform Guide

WordPress Accessibility Guide

WordPress powers over 40% of the web. That reach comes with enormous variability in accessibility — a well-chosen theme with carefully selected plugins can be near-compliant out of the box, while a poorly built theme with a dozen conflicting plugins can fail dozens of WCAG success criteria on every page. The platform itself is not the problem; it is how it gets configured.

Theme Selection

The single most impactful accessibility decision you make on WordPress is your theme. The WordPress.org theme directory includes an “accessibility-ready” tag for themes that have passed a baseline accessibility review. This does not guarantee WCAG conformance, but it means the theme has been checked for skip links, keyboard navigation, correct heading structure, sufficient contrast, and visible focus indicators.

When evaluating a theme, look for:

  • The accessibility-ready tag in the theme directory
  • Semantic HTML structure with proper landmark regions
  • A visible skip-to-content link on keyboard focus
  • Focus styles that are visible on all interactive elements
  • Responsive design that does not break at 200% zoom

Common Theme Issues

Even popular themes ship with recurring accessibility failures:

  • Missing skip links — The most common failure. Without a skip link, keyboard users must tab through the entire navigation on every page load. See our keyboard navigation guide for implementation details.
  • Poor heading structure — Theme authors use heading levels for visual sizing rather than document structure. Sidebars with h3 widget titles when the page has no h2 are a screen reader navigation problem.
  • Low contrast text — Light gray body text on white backgrounds is endemic in WordPress themes. Check your theme against WCAG contrast requirements.
  • Inaccessible navigation — Dropdown menus that only open on hover, hamburger menus without ARIA attributes, and mobile menus that trap focus incorrectly.
  • Missing form labels — Search forms, comment forms, and newsletter signup forms frequently use placeholder text instead of proper labels.

Block Editor (Gutenberg)

The WordPress block editor has built-in accessibility features that many content authors overlook:

  • Heading level enforcement — Gutenberg warns when you skip heading levels. Pay attention to these warnings — they exist because screen reader users navigate by heading level.
  • Alt text prompts on image blocks — The image block includes an alt text field in the sidebar. Train your content team to fill it in for every informative image and leave it empty (with the “Mark as decorative” toggle) for decorative images. Refer to our alt text guide for writing useful descriptions.
  • Block-level ARIA — Some blocks support custom HTML anchors and ARIA attributes through the Advanced panel. Use this for landmark roles on group blocks and custom IDs for in-page navigation.
  • Table block headers — The table block lets you designate header rows and columns. Always enable these for data tables so screen readers can associate cells with their headers.

Plugin Conflicts

Plugins are the most common source of accessibility regressions on WordPress. These categories cause the most frequent failures:

  • Sliders and carousels — Auto-advancing slides without pause controls, missing keyboard navigation, no ARIA live region announcements. If you must use a slider, choose one that explicitly advertises WCAG compliance and test it yourself.
  • Popup builders — Newsletter popups, exit-intent overlays, and cookie consent banners that lack focus trapping, have no keyboard-accessible close button, or fail to return focus to the triggering element when dismissed.
  • Contact form plugins — Forms with placeholder-only inputs (no visible labels), error messages that are not programmatically associated with their fields, and CAPTCHA challenges that block screen reader users.
  • Page builders — Visual page builders often generate deeply nested div structures with no semantic meaning, inline styles that override focus indicators, and custom components that do not map to standard ARIA patterns.

Manual Fixes

When your theme does not provide accessibility basics, you can add them through your child theme's functions.php and custom CSS:

Adding a Skip Link

If your theme lacks a skip-to-content link, add one by hooking into wp_body_open:

add_action('wp_body_open', function() {
  echo '<a class="skip-link screen-reader-text"
          href="#primary">Skip to content</a>';
});

Then add CSS to make it visible on focus:

.skip-link:focus {
  clip: auto;
  clip-path: none;
  height: auto;
  width: auto;
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100000;
  padding: 8px 16px;
  background: #000;
  color: #fff;
  text-decoration: none;
}

Custom Focus Styles

Many themes strip or hide focus outlines. Restore them with a global rule in your child theme's stylesheet:

:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: 2px;
}

Want to find common accessibility issues on your WordPress site? Run a free SweepHound scan and get code-level guidance tailored to your theme and plugins.