Web Accessibility doesn’t have to be scary – let’s start with the basics
Let’s be real – “accessibility” sounds like one of those big, intimidating words that belong in thick UX reports or government websites. But here’s the truth: making your Divi site more accessible doesn’t have to be scary. Or hard. Or involve a PhD in WCAG compliance.
It’s really about this: can your visitors read, navigate, and interact with your site… without frustration? If the answer is “umm, maybe?” – this post is for you.
We’ll skip the jargon and get straight to the good stuff: practical, beginner-friendly tips you can implement today. No coding required. Just smart tweaks that make your site easier to use for everyone – from screen reader users to folks tapping their phones one-handed with a toddler on their lap (been there).
Ready? Let’s make your Divi site a little more human-friendly.
Make it make sense – add meaningful alt text to your images
Divi makes it super easy to add beautiful images… but are they actually saying anything?
For visitors using screen readers – or those on slow connections – your alt text is what tells them what’s there. So skip the generic “image123” and write short, descriptive text that actually explains what the image is or does. Example:
❌ “Image”
✅ “Woman smiling while working on laptop in cozy home office”
How it works in Divi?
When you upload an image to your Media Library, you can add an alt text and title. Then, when you insert that image using the Image Module, Divi will automatically pull those values.
Want to change it for just one instance? Go to the module’s Advanced tab → Attributes and set a custom alt.
But note: if you later edit the alt text in the Media Library, the already-added module won’t update. It keeps the version it pulled in originally.
Contrast is kindness – use accessible color combinations for your text and backgrounds
That dreamy pale grey text on a white background? It may look chic, but it’s a readability nightmare. Many users (not just those with visual impairments!) struggle with low contrast.
My favorite tool to test and tweak color combos is the Accessible Color Generator by Erik Kennedy. You pop in your current color and background—and it shows you the closest variations that meet AA or AAA standards, with specific suggestions for large and small text.
💡 If you’re using Divi’s Global Colors, you can fix contrast issues sitewide in just a few clicks.
Say what you mean –use clear, descriptive labels for buttons and links
Buttons like “Click here” or “Read more” don’t help anyone – especially users relying on screen readers. Your button or link text should clearly say what’s going to happen.
Instead of:
❌ “Read more”
Try:
✅ “See all case studies”,
✅ “View full pricing table”,
✅ or “Download free template”
It’s a small change, but it helps everyone navigate more confidently.
💡 And don’t forget: make sure your buttons are large enough and have enough spacing around them to tap easily on mobile.
Don’t forget keyboard users – make sure your site works without a mouse
Some visitors navigate entirely by keyboard – so it’s important that they can see where they are on the page.
🧪 Try this:
Open your site, put your hands off the mouse, and press Tab.
Do you see a visible outline when links and buttons get focus?
If not, add this little CSS glow-up:
a:focus,
button:focus {
outline: 2px solid rgba(255, 0, 188, 0.6)!important;
outline-offset: 3px;
}You can add this bit of CSS to your Theme Options or child theme stylesheet. It’s subtle but effective – and makes navigation so much easier for keyboard users.
💡 Also, try to avoid complex or overly customized interactions (like hover-only menus or sliders with no keyboard support).
About that “mobile zoom” thing… why your site might still fail accessibility audits (even if users can zoom)
Some audits (like Google PageSpeed) flag the <meta name="viewport"> tag used by Divi:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">This technically tells browsers to block zooming – which is against accessibility guidelines. But… in practice most mobile browsers (like Chrome and Safari) ignore this and do allow pinch-to-zoom anyway.
So should you bother fixing it?
✅ Yes – because even if it’s not breaking the user experience, it does impact your audit score and WCAG compliance.
💡 Good news: I wrote a separate post with a ready-to-use fix:
👉 How to Fix the ‘user-scalable=no’ Accessibility Error in Divi
Final thoughts (and a heads-up)
Making your site more accessible doesn’t mean overhauling everything. It starts with small, thoughtful steps – like better button text or more readable colors.
And while Divi gives us a lot of flexibility, it’s not perfect. There are several plugins on the Elegant Themes Marketplace that go deeper and fix specific accessibility issues or structural quirks in Divi.
But hopefully, this little overview points you in the right direction—and shows how much you can do already with just a few smart tweaks.
Got a favorite accessibility tip or tool?
Drop it in the comments – I’d love to hear what works for you!
0 Comments