Updated for Divi 5: every tip below works in Divi 5 (and in Divi 4). I've updated the alt text steps and the viewport tag that Divi 5 adds to your pages.
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
Alt text is a short description of an image that screen readers read out loud and browsers show when the image doesn't load. Every image that carries meaning needs one. Purely decorative images can have an empty alt, so screen readers skip them.
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 to add alt text in Divi 5
When you upload an image to your Media Library, you can add an alt text and title. Then, when you choose that image in the Image module, Divi automatically copies those values into the module.
Want to change it for just one instance? In Divi 5, go to the module's Advanced tab → Attributes → Add Attribute, and add an alt attribute for the image. (In Divi 4: Advanced tab → Attributes → Image Alternative Text.)
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 WCAG AA, normal text needs a contrast ratio of at least 4.5:1 against its background, and large text (about 24px, or 19px bold) at least 3:1.
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 (in Divi 5: color variables in the Variable Manager), 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
Every link, button, menu item and form field on your site should be reachable with the Tab key and show a visible focus outline when it's selected.
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-visible,
button:focus-visible {
outline: 2px solid rgba(255, 0, 188, 0.6)!important;
outline-offset: 3px;
}You can add this bit of CSS in Divi → Theme Options → General → Custom CSS, or to your child theme stylesheet. :focus-visible shows the outline only for keyboard navigation, not when someone clicks with a mouse. 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
Divi adds a viewport meta tag with maximum-scale=1.0 and user-scalable=0. Lighthouse (the audit behind Google PageSpeed Insights) flags it as an accessibility error, because it tries to stop visitors from zooming in.
This is the tag Divi 5 adds to every page:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />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 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.
