WordPress Accessibility: Complete Guide to Making Your Site Compliant

WordPress and Web Accessibility

WordPress powers over 40% of all websites on the internet, making it the most popular content management system in the world. If you run a WordPress site that serves EU customers, you need to ensure it meets the accessibility requirements of the European Accessibility Act (EAA), which mandates WCAG 2.1 Level AA compliance.

The good news is that WordPress has made significant strides in accessibility over recent years. The WordPress Accessibility Team actively works to improve the platform's core accessibility. However, many accessibility issues arise from themes, plugins, and the content you create. This guide covers everything you need to know to make your WordPress site fully accessible.

WordPress Core Accessibility

WordPress core has been increasingly focused on accessibility since the formation of the WordPress Accessibility Team. Key accessibility features in modern WordPress include:

• Accessible admin dashboard with keyboard navigation and screen reader support
• Built-in alt text fields for all media
• Heading structure tools in the block editor
• Skip navigation links in default themes
• ARIA landmarks in recent default themes
• Focus management in the block editor

However, the core only provides the foundation. The choices you make regarding themes, plugins, and content determine whether your public-facing site is accessible.

Choosing an Accessible WordPress Theme

Your theme is the single biggest factor in your site's accessibility. Here is what to look for:

The "Accessibility Ready" Tag

WordPress.org has an "Accessibility Ready" tag for themes that meet specific accessibility requirements. These themes have been reviewed against a set of accessibility criteria including keyboard navigation, proper use of headings, skip links, form labels, and color contrast. While not a guarantee of full WCAG compliance, it is a strong starting point.

Key Features to Look For

• Semantic HTML: The theme should use proper HTML elements (nav, header, main, footer, article, section) rather than generic divs for everything
• Skip navigation links: A "Skip to content" link should be the first focusable element on each page
• Keyboard navigation: All interactive elements must be accessible via keyboard, including dropdown menus, modals, and carousels
• Visible focus indicators: When users tab through elements, a visible outline or highlight should indicate the focused element
• Responsive design: The theme must work well on all screen sizes without horizontal scrolling at 320px width (WCAG 1.4.10 Reflow)
• Sufficient contrast: Default colors should meet the 4.5:1 contrast ratio for normal text

Themes to Consider

The default WordPress themes (Twenty Twenty-Four, Twenty Twenty-Five, Twenty Twenty-Six) are generally well-built for accessibility. For commercial themes, look for those from developers who explicitly prioritize accessibility and have the Accessibility Ready tag.

Essential WordPress Accessibility Plugins

Accessibility Checkers

• Editoria11y (Editorial Accessibility): Checks content as you create it, flagging issues like missing alt text, improper headings, and ambiguous link text
• WP Accessibility: Adds accessibility features like skip links, language attributes, toolbar options, and fixes common theme issues
• Sa11y: A content-focused accessibility checker that runs on the front end, highlighting issues in context

Plugins to Avoid

Avoid overlay-style accessibility plugins that add a widget toolbar to your site. These overlays do not fix underlying accessibility issues and can interfere with assistive technologies. Genuine accessibility requires fixing your actual code and content.

Creating Accessible Content in WordPress

Images and Media

• Always add alt text: Use the Alt Text field in the media library for every image. Describe what the image shows and its purpose in context.
• Decorative images: If an image is purely decorative and adds no information, you can leave the alt text empty (not missing — deliberately empty).
• Video captions: All videos must have captions. Use YouTube or Vimeo's captioning tools, or add captions via a plugin.
• Audio transcripts: Provide text transcripts for all audio content, including podcast episodes.

Headings and Structure

• Use a logical heading hierarchy: Start with H1 (your page title), then H2 for major sections, H3 for subsections, and so on. Never skip heading levels.
• Do not use headings for styling: If you want large or bold text that is not a section heading, use CSS classes instead of heading elements.
• One H1 per page: Each page should have exactly one H1 element, which is typically the page or post title.

Links

• Descriptive link text: Never use "click here" or "read more" as link text. Instead, describe the link destination: "Read our guide to WCAG contrast requirements."
• Distinguish links: Links within body text should be visually distinguishable from surrounding text by more than just color (e.g., underline).
• New window warnings: If a link opens in a new window or tab, indicate this in the link text or with an icon that has appropriate alt text.

Forms

• Label every field: Every form field must have a visible label that is programmatically associated using the label element or aria-labelledby.
• Error messages: Error messages must be specific, descriptive, and associated with the relevant field.
• Required fields: Indicate required fields both visually and programmatically (using the required attribute).

Testing Your WordPress Site

Automated Testing

Run your WordPress site through EAAPass for a comprehensive automated WCAG 2.1 AA audit. This will identify issues across multiple pages, including those introduced by your theme, plugins, and content.

Manual Testing Checklist

• Keyboard navigation: Can you navigate your entire site using only the keyboard? Tab through every page, use Enter to activate links and buttons, and use Escape to close modals.
• Screen reader: Test with a screen reader (NVDA on Windows, VoiceOver on Mac). Can you understand all content and complete all tasks?
• Zoom: Zoom your browser to 200%. Is all content still visible and functional without horizontal scrolling?
• Color independence: Turn off CSS colors. Can you still understand all information and identify all interactive elements?

Common WordPress Accessibility Issues

Here are the most frequent accessibility issues we see on WordPress sites:

1. Missing or poor alt text: Images uploaded without alt text or with generic text like "IMG_1234"
2. Inaccessible navigation menus: Dropdown menus that only work with a mouse hover
3. Missing form labels: Contact forms and search fields without proper labels
4. Low contrast text: Light gray text on white backgrounds, especially in footers and secondary text
5. Missing skip navigation: No way for keyboard users to skip past the main navigation
6. Inaccessible sliders and carousels: Image sliders that cannot be controlled with a keyboard
7. Broken heading hierarchy: Jumping from H2 to H4, or using headings purely for visual styling
8. Missing language attribute: The HTML lang attribute not set or set incorrectly

Start Fixing Your WordPress Site Today

Making your WordPress site accessible is achievable, even without deep technical expertise. Start with the right theme, use accessible plugins, create your content with accessibility in mind, and test regularly with tools like EAAPass.

Run your free WordPress accessibility audit now and see exactly what needs to be fixed to achieve WCAG 2.1 AA compliance.