Elementor will let you build an accessible page. It will also let you build one where a screen reader user hears “link, link, link, read more, read more” and a keyboard user can’t tell where they are. The editor doesn’t stop you, and some of the most popular design choices make things worse.
This is the list we work through on our own builds. It’s Elementor-specific. For the wider picture (why it matters, the law in Australia, what standard to aim for), start with our website accessibility basics for Australian businesses.
Headings: set the level, then the size
In Elementor, the Heading widget’s HTML Tag setting (H1 to H6, or div, span, p) decides the structure. The typography settings decide how it looks. Keep those separate in your head.
The rules:
- One H1 per page, describing the page (“Physiotherapy in Lennox Head”).
- H2 for each main section, H3 for items within a section.
- Don’t skip levels for looks. If you want an H3 to look bigger, change its size.
- Small labels above headings (“OUR SERVICES”) are paragraphs or spans, not H4s.
Widgets with headings inside them catch people out. The Icon Box and Image Box widgets have a Title HTML Tag setting, which defaults to a heading level that may not fit your structure. Accordion and Toggle widgets have the same setting for their item titles. Loop item templates repeat whatever heading level you give them, so a card title set to H2 becomes twelve H2s.
Global header and footer templates are a common source of stray headings. Footer column titles like “Contact” and “Quick links” don’t need to be headings at all.
Link and button text
A screen reader user can pull up a list of every link on a page. On many Elementor sites, that list reads: “Learn more, Learn more, Learn more, Read more, Here, Button.”
Fix it at the source. Write button text that makes sense on its own:
| Instead of | Write |
|---|---|
| Learn more | See our hot water services |
| Read more | Read the full privacy policy |
| Download | Download the price list (PDF) |
| Submit | Send my enquiry |
If a design really needs short button labels, give each one a distinct accessible name. Elementor’s Button widget lets you add custom attributes on the Advanced tab with Pro (including aria-label), but use this sparingly. Visible, descriptive text helps everyone, not only screen reader users.
Watch for icon-only links in headers and footers: a phone icon, a Facebook icon, a hamburger menu. Each needs a text label that a screen reader can read. Elementor’s Social Icons widget generates a label from the network name, but custom icon links built from the Icon widget usually don’t have one unless you add it.
Alt text
Elementor’s Image widget takes its alt text from the WordPress Media Library. Set it there, ideally when you upload. A few rules we follow:
- Describe what matters in context. “Electrician installing a switchboard in a Ballina home” beats “IMG_4021” and beats “electrician Ballina electrical services best electrician”.
- Decorative images (background textures, dividers, stock flourishes) should have empty alt text, so screen readers skip them.
- Don’t start with “Image of”. Screen readers already announce it’s an image.
- If an image contains text (a flyer, an infographic), the alt text or nearby content needs to carry that text.
Background images set on a container have no alt text at all. That’s fine for decoration. If the image carries meaning (a photo of your team, your shopfront), use an Image widget instead.
Colour contrast
WCAG requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, which it defines as roughly 24px regular or 18.5px bold and above. The W3C’s explanation of contrast minimums has the detail.
In Elementor, the best place to fix contrast is Site Settings > Global Colors. Check each text and background pairing you actually use, with any free contrast checker, and adjust the globals. Every widget using those globals updates at once.
The usual failures we see:
- Light grey body text on white, chosen because it “looks softer”
- White text over a photo with no overlay. Add a container overlay at 40 to 60% so text stays readable whichever part of the photo it sits on.
- Brand colours that look great on a logo but fail as button text. A pale green button with white text is a classic.
- Placeholder text in forms, which is usually too faint to read
Focus states
Keyboard users move through a page with the Tab key, and the focus outline shows where they are. Two things go wrong in Elementor builds.
First, someone removes the outline because it looked untidy, often with a line of custom CSS like outline: none. Never remove it without replacing it with something just as visible. If you’re adding CSS for this, our guide to custom CSS in Elementor covers where to put it so you can find it again.
Second, buttons and links styled with hover effects but no focus style. A hover colour change helps mouse users only. Use :focus-visible styles that match or exceed the hover state.
Test it: click into the address bar, then press Tab repeatedly through your homepage. If you lose track of where you are at any point, so will your visitors.
Widget gotchas
Sliders and carousels. Autoplaying content that moves for more than five seconds needs a way to pause it. Elementor’s carousels offer a pause on hover option, which doesn’t help keyboard or touch users. Our honest advice: avoid autoplay. Most hero sliders get one slide seen anyway.
Tabs and accordions. Fine when used as intended. Don’t hide essential content (prices, opening hours, booking details) inside them, and check they work with the keyboard.
Forms. In the Form widget, keep labels visible. Hiding labels and relying on placeholders means the hint disappears as soon as someone starts typing, and placeholder contrast is usually poor. Mark required fields, and make sure error messages say what’s wrong (“Please enter a phone number”) rather than just turning a box red.
Popups. A popup should be closable with the Escape key and a visible close button, and it shouldn’t appear before someone has done anything. Check your popup’s advanced settings don’t disable closing on Escape.
Video backgrounds. Moving backgrounds behind text are a contrast and distraction problem. If you must, keep them slow, add an overlay and don’t rely on them to carry information.
Motion effects and entrance animations. Heavy scrolling effects can make some people feel unwell. Use them lightly, and keep animation durations short.
A pre-launch check
Before a page goes live, we do this:
- Check the heading outline (a browser extension that lists headings makes this quick).
- Tab through the whole page with the keyboard.
- Check every text and background pairing against 4.5:1.
- Read through the Media Library alt text for every image on the page.
- Read every link and button out of context. Does each make sense alone?
- Zoom the browser to 200% and confirm nothing overlaps or disappears.
Elementor’s Ally plugin and other accessibility scanners can catch some of these, but no automated tool catches all of them. A scanner can tell you an image has alt text. It can’t tell you the alt text is useless.
That’s where a person with a keyboard and a contrast checker comes in. For an existing Elementor site, send it through for a manual pass over the headings, links, contrast and focus states, and we can make the fixes as a WordPress and Elementor job. For new sites, this checklist is built into how we work in our web design service.