WordPress accessibility: how to check and fix your site

Where accessibility problems in WordPress come from

• The theme: colours, focus styles, the menu, the skip link and the heading structure of templates.
• Page builders such as Elementor, Divi or WPBakery: they make it easy to choose a heading for its size rather than its level, or to build buttons out of plain boxes.
• Plugins: sliders, pop-ups, cookie banners, form plugins and chat widgets add their own markup, which may not work with a keyboard or a screen reader.
• Content: images without alt text, links that say "click here", and text pasted with colours that are too light.

Step 1: Scan the pages that use different templates

A WordPress site usually has only a handful of templates. Scan one page of each type: the home page, a blog post, a normal page, an archive or category page, the contact form, and, with WooCommerce, a product page, the basket and the checkout. A problem found in the header or footer will be on every page, and fixing it once in the theme fixes it everywhere.

Scan a WordPress page for free

Step 2: Check the theme

If you are choosing or replacing a theme, look in the WordPress theme directory for the "Accessibility Ready" tag. Those themes were reviewed for keyboard navigation, focus styles, skip links and contrast. The default block themes, such as Twenty Twenty-Five, are a good starting point.

With an existing theme, press Tab from the top of the page: you should see a skip link, a visible focus outline on every link and button, and a menu whose sub-menus open with the keyboard. If not, these are fixed in the theme or a child theme, not in the content.

Step 3: Fix the most common problems

These problems account for most scan findings on WordPress sites. Each fix guide has the exact steps for WordPress.

• Missing alt text: in the Media Library open each image and fill in Alternative Text; in the block editor select the image and set Alt text in the sidebar. Decorative images get an empty alt.
• Skipped heading levels: change the level in the Heading block toolbar based on structure, and set the size in typography settings instead.
• Form fields without labels: in Contact Form 7, WPForms or Gravity Forms make sure every field has a label and the label is not hidden. A placeholder is not a label.
• Low contrast: adjust the colour palette in the Site Editor (Styles) or the Customizer, and check buttons, links and light grey text.
• Vague or empty links: rewrite "read more" links so they name the destination, and give icon links, such as social icons, an accessible name.

WordPress alt text fix guide

Page builders: Elementor and others

In Elementor, every Heading widget has an HTML Tag setting separate from its size; set the tag by structure (one H1 per page, then H2, H3). Give Icon and Button widgets an accessible label under Advanced, Attributes. Image widgets take their alt text from the Media Library. Use Container HTML tags such as header, main, nav and footer so screen reader users can jump between regions.

Elementor fix guides

Be careful with accessibility plugins

Plugins that only add a toolbar or overlay, with buttons to change fonts or contrast, do not fix the problems in your theme or content and can interfere with the assistive technology visitors already use. Plugins that help you find problems in the editor, or add a proper skip link and focus styles, can be useful. The lasting fix is always in the theme, the blocks and the content.

Do accessibility overlays work?

Keep it accessible

WordPress sites change constantly: new posts, new plugins, theme updates. Give editors three simple rules: always write alt text, use headings in order, and write links that make sense on their own. Then re-scan after updates, or set up monitoring that scans the site on a schedule and alerts you when new problems appear.

Questions and answers