WordPress Accessibility Checklist 2026 | WCAG 2.1 AA & EAA Compliance
Last updated: 2026-03-22
WordPress powers over 40% of all websites on the internet, making its accessibility impact enormous. Despite the WordPress core team's commitment to accessibility, many WordPress sites fall short of WCAG 2.1 AA standards due to poorly coded themes, inaccessible plugins, and content that lacks proper semantic structure. With the European Accessibility Act (EAA) now in effect and enforcement beginning across EU member states, ensuring your WordPress site meets accessibility standards is no longer optional for businesses serving European customers. This is particularly important for organizations that process transactions, provide public services, or offer digital products to customers within the European Union. This checklist identifies the most common accessibility barriers found on WordPress sites and provides concrete, actionable fixes you can implement today. Whether you are a site owner, developer, or content editor, each item includes the specific WCAG success criterion it addresses, the severity of the issue, and step-by-step remediation guidance. Many issues can be resolved through theme settings, plugin configuration, or simple content editing practices without requiring deep technical expertise. We recommend working through the critical and serious issues first, as these represent the most significant barriers for users who rely on assistive technologies such as screen readers, keyboard navigation, and voice control software.
Common Accessibility Issues
WordPress makes it easy to upload images, but the alt text field in the Media Library is often left blank or filled with generic filenames like 'IMG_2847.jpg'. Screen reader users encounter these images with no context, missing critical information conveyed visually. This is especially problematic for product images, infographics, and images that contain text.
Edit each image in the WordPress Media Library and add descriptive alt text that conveys the image's purpose and content. For decorative images, explicitly set the alt text to empty (the alt attribute will be alt=""). In the block editor, select the image block and use the Alt Text field in the block settings panel. For featured images, go to the post editor and click on the featured image to access its alt text setting.
<img src="team-photo.jpg" alt="IMG_3841" class="wp-image-142">
<img src="decorative-border.png" class="wp-image-98"><img src="team-photo.jpg" alt="Our development team of six people standing in front of the office entrance" class="wp-image-142">
<img src="decorative-border.png" alt="" class="wp-image-98" role="presentation">Many WordPress themes generate navigation menus that lack proper ARIA landmarks, do not support keyboard interaction for dropdown submenus, and omit skip navigation links. Keyboard users must tab through every menu item on every page load before reaching the main content, which is extremely frustrating and time-consuming.
Choose a theme that includes a skip-to-content link or add one manually by placing an anchor link at the very top of your header.php template. Ensure your navigation uses the <nav> element with an aria-label. For dropdown menus, verify they can be opened and closed with Enter/Space keys and that focus is managed properly. The WordPress nav menu walker can be extended to add ARIA attributes.
<div class="menu-wrapper">
<div class="menu">
<a href="/">Home</a>
<a href="/about">About</a>
<div class="dropdown">
<a href="/services">Services</a>
<div class="sub-menu" style="display:none">
<a href="/web">Web</a>
</div>
</div>
</div>
</div><a class="skip-link screen-reader-text" href="#main-content">Skip to content</a>
<nav aria-label="Primary navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li>
<a href="/services" aria-expanded="false" aria-haspopup="true">Services</a>
<ul class="sub-menu">
<li><a href="/web">Web</a></li>
</ul>
</li>
</ul>
</nav>
<main id="main-content">Many popular WordPress themes ship with light gray text on white backgrounds, low-contrast placeholder text, or stylized headings that fail the minimum 4.5:1 contrast ratio for normal text and 3:1 for large text. This affects users with low vision, color blindness, and anyone viewing the site in bright lighting conditions.
Use the WordPress Customizer or your theme's settings panel to adjust text and background colors. Check all color combinations with a contrast checker tool. Pay special attention to body text, link colors (both default and visited states), placeholder text in forms, button text, and footer text. If your theme doesn't allow sufficient customization, add custom CSS via Appearance > Additional CSS to override problematic colors.
Content editors frequently choose heading levels in WordPress based on visual appearance rather than document structure, jumping from H1 to H4 because they prefer the smaller size, or using multiple H1 tags on a single page. Screen reader users rely on heading hierarchy to understand page structure and navigate efficiently between sections.
Ensure each page has exactly one H1 (typically the page or post title, automatically generated by most themes). Use headings in sequential order without skipping levels: H1, then H2 for main sections, H3 for subsections, and so on. In the block editor, use the Heading block and select the appropriate level from the toolbar. If you want a heading to look smaller, use CSS to style it rather than choosing a lower heading level.
Many WordPress form plugins generate forms without proper label associations, missing fieldset/legend groupings for related fields, and error messages that are not programmatically associated with their respective inputs. Screen reader users cannot determine which field they are filling out, and error messages may not be announced.
When using Contact Form 7, ensure every input has a corresponding [label] tag wrapping it or use the label_first option. Add aria-required="true" to required fields. For error handling, use aria-describedby to associate error messages with inputs. Consider switching to a more accessible form plugin like Gravity Forms or WPForms, which have better built-in accessibility support. Always test your forms with keyboard-only navigation.
Some WordPress themes and page builder plugins include hero sections or background sections with auto-playing video or audio. This can be disorienting for screen reader users, interfere with screen reader audio output, and cause distress for users with vestibular disorders or cognitive disabilities.
Remove auto-play from all media elements or provide a clearly visible and keyboard-accessible pause/stop button that appears before the media in the DOM order. If using a page builder like Elementor or Divi, check the section settings for auto-play options and disable them. For embedded videos, ensure the player controls are keyboard accessible and properly labeled.
WordPress themes frequently suppress the default browser focus outline using CSS rules like outline: none or outline: 0 without providing an alternative visible focus indicator. This makes it impossible for keyboard users to see which element currently has focus as they tab through the page.
Check your theme's CSS for any rules that remove outlines on focus. Replace them with a visible focus style. A common accessible pattern is to use a 2px solid outline with sufficient contrast against the background, or use box-shadow for a more styled appearance. Apply these styles to all interactive elements: links, buttons, form inputs, and any custom interactive components.
a:focus,
button:focus,
input:focus {
outline: none;
}a:focus-visible,
button:focus-visible,
input:focus-visible {
outline: 3px solid #1a73e8;
outline-offset: 2px;
}
/* Fallback for browsers without :focus-visible */
a:focus,
button:focus,
input:focus {
outline: 3px solid #1a73e8;
outline-offset: 2px;
}WordPress-Specific Tips
- Use a theme that carries the 'Accessibility Ready' tag in the WordPress Theme Directory. These themes have passed a specific accessibility review and include features like skip links, proper heading structure, ARIA landmarks, and keyboard navigation support.
- Install the WP Accessibility plugin by Joe Dolson to automatically fix common issues such as missing skip links, removal of tabindex attributes, enforcement of alt text on images, and addition of language attributes. It also provides a toolbar for users to adjust font size and contrast.
- When using the Gutenberg block editor, leverage the built-in heading level selector and always check the Document Outline feature (accessible via the document overview panel) to verify your heading hierarchy before publishing.
- Run the WordPress Site Health check (Tools > Site Health) which flags some accessibility-related issues. Combine this with the Accessibility Checker plugin for more thorough automated scanning directly within your WordPress dashboard.
- Avoid page builder plugins that generate excessive nested div structures without semantic HTML. If you must use a page builder, Elementor and Beaver Builder have made significant accessibility improvements — keep them updated and use their accessibility-focused settings.
Recommended Tools
WP Accessibility
A comprehensive WordPress plugin by accessibility expert Joe Dolson that fixes common accessibility issues automatically, adds a skip link, removes tabindex, enforces alt text requirements, and provides user-facing accessibility tools.
Accessibility Checker by Equalize Digital
Scans your WordPress content for accessibility issues directly in the editor, providing WCAG-referenced warnings and errors with actionable fix suggestions for each post and page.
Sa11y
An accessibility quality assurance tool that provides real-time, page-level accessibility checks with visual annotations directly on the front end of your WordPress site.
Further Reading
Other CMS Checklists
Get our free accessibility toolkit
We're building a simple accessibility checker for non-developers. Join the waitlist for early access and a free EAA compliance checklist.
No spam. Unsubscribe anytime.