Making an Elementor site accessible: seven things that break

Elementor can build a fully accessible site. It also makes a handful of specific mistakes very easy, and they turn up on nearly every Elementor site we look at.

None of these is a reason to avoid the builder. They are things to check.

1. Heading levels chosen by size

Every heading widget has an HTML tag dropdown that is independent of its styling. The path of least resistance is to pick the tag that looks right.

Do the opposite: pick the correct level for the document, then set the size in the widget’s typography controls.

What to check: one h1 per page, no skipped levels. More in heading structure.

2. Icon boxes and buttons with no accessible name

An icon-only button, a social icon row, a hamburger toggle: all of these ship with no text, and unless you add a label they are announced as “link” or “button” and nothing else.

In Elementor, add a label in the widget’s accessibility settings where it offers one, or add an aria-label via the Advanced tab’s custom attributes:

aria-label|Open the menu

3. The hero text over an image

Elementor’s background image sections encourage text directly over photographs. Contrast then varies across the text and frequently fails.

The fix is a background overlay — Elementor has one built in, under the section style settings. A dark overlay at 40 to 60 per cent usually clears it. Measure rather than eyeballing it: see colour contrast.

4. Carousels and sliders

Sliders are the single most common serious problem on builder sites. The usual faults:

Auto-advancing with no pause. WCAG 2.2.2 requires a way to pause anything that moves for more than five seconds.
Arrows and dots that are not reachable by keyboard, or have no accessible name.
Off-screen slides still in the tab order, so focus disappears to somewhere invisible.

If you can, do not use a slider. Evidence that anybody interacts with the second slide is thin. If you must, turn off autoplay and test it with the keyboard.

5. Tiny click targets

Social icons, close buttons on popups, and pagination arrows routinely come out below 24 by 24 CSS pixels, which fails WCAG 2.2’s target size criterion.

Elementor gives you padding controls on all of them. Use them.

6. Popups

Elementor popups need care:

Focus should move into the popup when it opens.
Escape should close it.
Focus should return to whatever opened it.
The close button needs an accessible name and a usable size.

Test every popup with the keyboard. This is the control that most often traps people.

7. The stored content is not the page

This one is invisible, and it affects your tooling rather than your visitors.

Elementor writes a stripped text copy of the page into post_content. On one real page we measured, that copy was 3,808 bytes of bare headings against 69,503 bytes of actual rendered page.

Any accessibility tool that reads post_content is therefore checking something that is not your page, and will report it as nearly clean.

Accessibility Remediation asks the builder for the real output instead. If you use a builder it does not recognise, the wsak_builder_content filter is where to point it at the rendered markup. See Choosing what to check.

A practical order for an existing Elementor site

Fix the theme header and footer. Those repeat on every page.
Fix your global widgets and templates. Same leverage.
Run a scan, and sort by what comes up most rather than by page.
Tab through one page of each template type.
Only then start on individual pages.

Most Elementor sites are a small number of mistakes multiplied by a large number of pages. Fixing them in that order turns a four-hundred-finding report into an afternoon.

Questions people ask

Is Gutenberg more accessible than Elementor?

Core blocks produce leaner markup and give you fewer chances to break structure, which helps. But an inattentive Gutenberg site is still inaccessible. See Gutenberg and accessibility.

It is an overlay. It does not change the markup underneath.

Can I fix these without touching the builder?

Some. A skip link, focus outlines, link underlines and form labels can be supplied site-wide. Heading levels and alt text have to be fixed where they are authored.

To see which of these your Elementor site actually has, the plugin is free on WordPress.org.