Wcag Compliance

How to make WordPress ADA compliant: a step-by-step guide

AccessYes Team
AccessYes editorial team

In this article: A practical, step-by-step walkthrough for making your WordPress site ADA compliant. Built for small business and e-commerce owners who want to reduce legal risk and serve all their customers. By the end, you will know what changes to make, which tools to use, and how to publish an accessibility statement.

ADA lawsuits against websites have been rising every year. In 2023 alone, more than 4,600 federal accessibility lawsuits were filed in the United States — the majority targeting small and mid-sized businesses. If your WordPress site sells products, books appointments, or collects leads, it is considered a place of public accommodation under the Americans with Disabilities Act, and inaccessible design can expose you to real legal risk.

The good news is that knowing how to make WordPress ADA compliant does not require a developer or a complete redesign. This guide walks you through the practical steps: what ADA website requirements actually mean for your site, how to use an ADA compliance WordPress plugin to handle the heavy lifting, and how to publish an accessibility statement that demonstrates good faith.


What ADA compliance means for your WordPress site

The ADA does not specify a technical standard for websites by name, but courts and the Department of Justice consistently reference WCAG 2.1 Level AA as the benchmark for digital accessibility. WCAG stands for Web Content Accessibility Guidelines, published by the W3C.

At Level AA, your site needs to meet requirements across four principles: content must be perceivable (users can see or hear it), operable (users can navigate it without a mouse), understandable (content is clear and predictable), and robust (it works with assistive technologies like screen readers).

For a WordPress site owner, the most common failure points are:

  • Low colour contrast between text and backgrounds
  • Images without descriptive alt text
  • Forms that cannot be completed using a keyboard alone
  • Videos without captions
  • Menus that screen readers cannot parse correctly

Fixing all of these in code is possible, but time-consuming. That is where an ADA compliance WordPress plugin becomes genuinely useful.


Step 1: Install an accessibility plugin

The fastest first step in any WordPress disability compliance effort is adding a dedicated accessibility plugin. AccessYes is a free WordPress plugin that adds an accessibility widget to your site. Site visitors can use it to adjust how the site looks and behaves to suit their needs — increasing text size, switching to a high-contrast mode, enabling a dyslexia-friendly font, pausing animations, and more.

To install AccessYes:

  1. Log into your WordPress dashboard.
  2. Go to Plugins > Add New Plugin.
  3. Search for AccessYes.
  4. Click Install Now, then Activate.
  5. The accessibility widget will appear on your site immediately, usually in the bottom-right corner.
Tip

You can change the widget position under Settings > AccessYes. If your site has a live chat button or cookie banner in the bottom-right corner, move the widget to the bottom-left to avoid overlap.

An accessibility widget addresses the user experience layer of compliance: it gives visitors with disabilities control over how they interact with your content. It does not automatically fix underlying code issues — you will still need to work through the steps below.


Step 2: Fix colour contrast and visual accessibility

Colour contrast is one of the most common WCAG failures and one of the easiest to fix. WCAG 2.1 Success Criterion 1.4.3 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold).

Use the WebAIM Contrast Checker{rel=“noopener noreferrer” target=“_blank”} to test your current text and background colours. Enter your hex codes and it will tell you instantly whether you pass or fail.

Common fixes:

  • Light grey text on white backgrounds almost always fails. Darken the text or darken the background.
  • Coloured buttons with white text: check the specific hex values — many brand colours do not meet the 4.5:1 threshold.
  • Placeholder text in form fields: placeholder text is typically styled at low opacity. Replace it with a visible <label> element and use placeholder text only as supplementary guidance.

In WordPress, you can adjust colours through Appearance > Customise (classic themes) or the Site Editor (block themes). If your theme does not give you enough control, add custom CSS under Appearance > Additional CSS.

Important

Do not rely on the AccessYes high-contrast mode to fix underlying contrast failures. That feature gives users an option — it does not replace accessible default colours. Auditors and automated testing tools evaluate your site's default state.


Step 3: Audit and fix your images, forms, and navigation

Images and alt text

Every meaningful image on your site needs a descriptive alt attribute. In WordPress, you can add or edit alt text by going to Media > Library, clicking an image, and filling in the Alternative Text field. For images added directly inside posts or pages, click the image block and find the Alt text field in the right-hand panel.

Rules for writing useful alt text:

  • Describe what is shown, not what the image is (“A bakery owner handing a customer a paper bag” not “image of person”).
  • For purely decorative images, leave the alt text field empty — do not write “decorative” or leave it blank by accident. An empty alt="" tells screen readers to skip the image.
  • For product images in WooCommerce, add alt text to every product photo. These are often left blank by default.

Forms

Forms are a major accessibility failure point. Check that:

  • Every input field has a visible <label> linked to it using the for attribute
  • Error messages explain what went wrong and where (“Email address is required” not “Error”)
  • Users can tab through the entire form and submit it without using a mouse

Most contact form plugins (Gravity Forms, WPForms, Contact Form 7) support accessible markup — but only if you configure them correctly. Check the documentation for your form plugin’s accessibility settings.

Open your site and press Tab on your keyboard. You should see a visible focus indicator (an outline or highlight) move through each interactive element in a logical order. If focus is invisible, add CSS to restore it:

:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

Never set outline: none or outline: 0 without providing an alternative visible focus style.

96.3% of the top one million home pages have detectable WCAG failures Source: WebAIM Million Report, 2024

Step 4: Publish an accessibility statement

An accessibility statement is a public page on your site that explains your commitment to accessibility, what standard you are working toward (WCAG 2.1 Level AA), any known limitations, and how users can contact you if they encounter a barrier.

Publishing an accessibility statement will not shield you from a lawsuit on its own, but it demonstrates good faith effort — which matters in legal proceedings and can influence how complaints are resolved.

Your WordPress accessibility statement should include:

  • The accessibility standard you aim to meet (WCAG 2.1 Level AA)
  • The date the statement was last reviewed
  • A list of any known accessibility issues you are actively working to fix
  • A contact method for users to report problems (email address or form)
  • A response timeframe (for example, “We aim to respond within 2 business days”)

Create a new page in WordPress (Pages > Add New), title it “Accessibility Statement”, and link to it from your site footer. Keep the language plain and direct.

Note

The W3C provides a free Accessibility Statement Generator that walks you through each section. It takes about 10 minutes to complete and produces a statement you can paste directly into WordPress.


Step 5: Run an automated audit and keep a record

Automated tools will not catch every accessibility issue — estimates suggest they find around 30–40% of WCAG failures — but they are a fast way to identify the most common problems and track your progress over time.

Run your site through WAVE by WebAIM{rel=“noopener noreferrer” target=“_blank”} or Google Lighthouse (built into Chrome DevTools under the Lighthouse tab). Both tools are free and generate a report with errors, warnings, and guidance.

Save a copy of your audit report and date it. If you are ever challenged legally, a documented record of your remediation efforts is far more useful than no record at all. Repeat the audit every time you make significant changes to your site — publishing new pages, changing your theme, or updating WooCommerce.


Next steps

Making your WordPress site ADA compliant is an ongoing process, not a one-time task. Start with the steps that have the biggest impact: install an accessibility plugin, fix your contrast failures, add alt text to your images, and publish an accessibility statement.

From there, work through your forms and navigation, run a full automated audit, and schedule a review every quarter.

If you have not installed AccessYes yet, download it free from the WordPress plugin directory and get the accessibility widget live on your site in under five minutes. For a deeper look at what WCAG Level AA requires, read our guide to understanding WCAG 2.1 success criteria for WordPress sites.

Related articles