WordPress and WooCommerce accessibility: what to check and fix

Is your WordPress site covered?

The European Accessibility Act, in Germany the BFSG, does not care which system a website is built with. It covers services for consumers, such as online shops, bookings and banking, by businesses that are not microenterprises. A WooCommerce shop that sells to consumers in the EU is a typical case. A company website that only presents the business usually is not, unless consumers can conclude a contract on it.

If you are not sure, the guide to online shops explains where the line runs.

What we find on WordPress sites

In test scans of well-known WordPress and WooCommerce sites, the same errors came up again and again:

• Slider buttons too small to hit. The dots under a gallery or slider are often a few pixels wide. WCAG 2.2 asks for at least 24 by 24 pixels, or enough space around them.
• Image links without a name. When an image in a post links to the file itself, a screen reader only announces "link".
• Icon buttons without a name. A search button with only a magnifying glass says "button" and nothing more.
• Pale text in blocks. Quotes, captions and names under testimonials often have too little contrast against the background.

Most of it does not come from WordPress itself. It comes from the theme, the page builder and the plugins: sliders, galleries, cookie banners, chat windows and forms each bring their own markup.

Why an accessibility plugin is not the answer

The WordPress plugin directory is full of plugins that promise accessibility with a toolbar or an "overlay". They change how a page looks for the visitor, but they do not fix the code. A button without a name still has no name, and a screen reader still cannot read it. We do not sell such a widget, and we advise against relying on one.

Where the errors are fixed

• The theme. Header, menu, product tiles and footer appear on every page. Fix an error there and it is gone everywhere. Themes in the WordPress directory with the tag "accessibility-ready" have been reviewed for the basics and are a good starting point.
• Plugins. If a slider or form plugin produces errors you cannot fix through its settings, replace it or ask the developer for an update.
• Content. Alt texts belong in the media library, headings in the right order, and link texts that say where they lead. That is the editors' job, not the developers'.

Luentis groups findings by template, so you see whether an error sits in the theme or on a single page.

What the scan does not cover

We check public pages. The customer account, the last steps of the WooCommerce checkout and the WordPress admin are behind a login and are not part of the scan. Whether an alt text makes sense, or whether the checkout works with the keyboard, takes a person to judge. Our guided check helps you with that.

How to go about it

1. Check your homepage for free and see which errors the automatic rules find.
2. With the single audit, we check up to 250 pages and show which errors sit in the theme, with the code to fix them.
3. Fix the theme first, then the plugins, then the content.
4. Answer the guided check and publish your accessibility statement.

Building WordPress sites for clients? Read how agencies work with Luentis.