Get Your Free Accessibility & Inclusion Toolkit
Download NowDivi is a popular WordPress theme and visual page builder by Elegant Themes. It offers a wide range of pre-built layouts and design options, making it a favorite among business owners. However, while Divi is powerful and versatile, ensuring your Divi website is fully accessible requires some extra attention, especially if you want to meet modern accessibility standards. Let’s walk through the steps to improve accessibility on your Divi website.
What do Divi accessible websites look like?
A Divi website that follows accessibility best practices doesn’t just look professional, it functions well to provide equal access to all users, regardless of ability. Accessible Divi websites are designed to meet the Web Content Accessibility Guidelines (WCAG), recognised as the gold standard for web accessibility. Following these standards ensures that everyone (including people with disabilities) can navigate, understand, and interact with the content.
Accessible Divi websites are built with features like proper heading structure, keyboard navigability, readable contrast ratios, and screen reader compatibility. We’ll explore these elements later in this guide.
What are the consequences of ignoring accessibility on your Divi website?
Over 1.3 billion people worldwide live with some form of disability, and many websites remain partially or completely inaccessible to them. Every user deserves a fair, inclusive online experience, regardless of ability.
Accessibility also makes business sense. The global disability community and their households control several trillion dollars in spending power. By excluding users with disabilities, you’re not just denying access, you’re potentially losing customers.
Legally, failing to meet accessibility standards can lead to costly legal consequences. Many countries worldwide require websites to be accessible, often using guidelines like WCAG as the benchmark for compliance. Ensuring your Divi site is accessible can help you avoid legal issues and improve inclusivity for all users.
In short, neglecting accessibility risks alienating users, missing out on significant revenue, and facing legal action. Making your Divi website accessible isn’t just the right thing to do, it’s essential.
Get a free automated accessibility scan of your websites homepage. This will identify and highlight any compliance issues on your website, including inaccessible forms. Followed by recommendations on how to implement the necessary changes to make your website more accessible.
How to build accessible websites using the Divi builder
Building an accessible website with the Divi Builder means going beyond aesthetics to ensure that every visitor, regardless of ability, can navigate, understand, and interact with your content. Let’s take a closer look at the practical steps for meeting WCAG standards using Divi’s settings and modules:
Ensure clear colour contrasts
Colour contrast is the difference in brightness between foreground (like text) and background colours. Adequate contrast ensures that text and essential visual elements are readable for users with visual impairments, including colour blindness or low vision.
According to the WCAG guidelines, regular-sized text must have a minimum contrast ratio of 4.5:1 against its background. For larger text (above 18pt or 14pt bold), the required ratio drops to 3:1.
How to fix colour contrast in Divi:
- Global settings: Go to the Theme Customiser > General Settings > Typography to adjust the Body Text colour. For backgrounds, head to Background > Background colour to ensure good contrast across the site.
- Within individual modules, like the Text Module, you can set both text and background colours. Go to the Content tab and use the Background option to change background colours as required.
You can also check out our Colour Contrast Checker tool here.
Use descriptive anchor text for hyperlinks
Hyperlinks connect pages, guide users through content, and provide structure to your site. Because links play such a critical role in usability, they must be created with accessibility in mind, starting with descriptive anchor text.
For example, instead of vague phrases like “click here” anchor text should clearly describe the destination or purpose of the link, like “View our accessibility checklist”.
Creating accessible links in Divi:
- Global settings: Go to Theme Customiser > General Settings > Typography > Body Link colour to set the default styling for your site’s body text links.
- To style links in the header menu, navigate to Header & Navigation > Fixed Navigation Settings.
- Module-specific settings: For more granular control, individual modules, like the Menu or Text Module, let you change link appearance under the Design tab.
Build accessible forms
Website forms allow users to get in touch, submit information, make purchases, and more. But despite their importance, forms are frequently built in ways that make them difficult or impossible for people with disabilities to use. To make your forms accessible, make sure they are keyboard accessible, have proper HTML markup, such as <label> and <fieldset> tags, and clear field labels.
While Divi provides a powerful drag-and-drop form builder, its default settings are not accessibility-friendly. The Divi Contact Form module hides labels by default, making it difficult for screen readers to interpret form inputs.
To fix this, you can use the following CSS to display the form labels:
.et_pb_contact_form_label {
display: block;
}
Divi doesn’t offer built-in options to adjust the colour and contrast of form elements in the Contact Form module. To meet WCAG contrast requirements, you’ll need to apply custom CSS.
Use disability-friendly fonts
Fonts are an important aspect of web accessibility. Disability-friendly fonts are simple and familiar with easily distinguishable letters and characters. Recommended options include Arial, Calibri, Century Gothic, Helvetica, Tahoma, and Verdana.
Choosing fonts in Divi:
- You can set global font styles in Divi by navigating to Theme Customiser > General Settings > Typography. This allows you to adjust font size, family, style, and colour sitewide.
- For individual page adjustments, use the Design tab within each Text module to fine-tune font settings as needed.
Add descriptive image alt text
Image alt text (alternative text) is a short description attached to images in your website’s code. While it acts as a fallback when images fail to load, its most important purpose is to provide screen reader users with information about the image.
A poor example of alt text for a product image is “Red shoes.” A more effective version would be: “Pair of bright red leather sneakers with white soles and laces, viewed from the side.”
To do this effectively, only meaningful images should have alt text. Decorative images, like background flourishes or dividers, should have empty alt=”” tags to avoid cluttering the user experience.
Adding alt text in Divi:
- When uploading images to your WordPress media library, include alt text in the provided field. Divi will use this text when images are added to your site.
- However, if you’re editing an existing image in a Divi Image module, update the alt text manually under: Advanced > Attributes > Image Alternative Text
Provide captions and transcripts for videos
Videos are highly engaging, as many people prefer to consume information visually. But you must also made video content accessible for users with vision or hearing impairments. You can do this by including captions with dialogue and relevant non-speech elements (e.g. [applause]). Transcripts offer a text-based alternative, which is especially valuable for deaf-blind users and those who prefer using screen readers.
Using video in Divi:
- You can add videos using Divi’s Video or Video Slider modules.
- If you embed from YouTube or Vimeo, check the auto captions are active and accurate. For self-hosted videos, consider using a player that supports captions and provides transcripts directly below the video for easy access.
Utilise proper heading structure
Headings aren’t just for visual styling, they define the structure of your web page for all users, especially those using assistive technologies. Screen reader users rely on headings to navigate quickly, so disorganised heading structure can be confusing. Every page should have one <h1> tag, followed by logically nested <h2>, <h3>, etc.
Using headings in Divi:
- Use the Text module to apply heading levels (H1–H6) via the drop-down menu in the editor.
- Divi also includes a Heading module, where you can assign the heading level in the Design tab.
Check any PDFs on the website are accessible
PDFs shared on your website should also follow WCAG best practices. Common issues include poor tagging, lack of alt text, and reading order errors.
To ensure PDF accessibility, you must use a logical reading order and proper tags for headings, lists, tables etc to allow screen readers to navigate the content effectively.
Creating accessible PDFs for your Divi site:
- Tools like Adobe Acrobat and Microsoft Word offer accessibility options. You can also use PDF accessibility checkers to validate your documents.
- You can offer PDF downloads through the Call to Action module, linking to a PDF stored in your media library.
Monitor the readability of your digital content
Good readability ensures your content can be understood by people with various cognitive, language, or literacy challenges. One common accessibility pitfall in Divi is the use of sliders, such as the image slider, post slider and video slider.
These modules often:
- Auto-rotate too quickly
- Are hard for screen readers to navigate
- Distract users with cognitive impairments
Avoid sliders where possible, or ensure they can be paused, stopped, or manually controlled.
Similarly, Toggle and Accordion modules may not be fully keyboard-navigable, which can make them difficult for some users. Test them carefully or avoid them when accessibility is a top priority.
Proper use of ARIA-Labels
ARIA (Accessible Rich Internet Applications) attributes help screen readers understand the purpose of elements that don’t use standard HTML tags. They’re especially important for navigation menus, dynamic content like error messages and popups, and iInteractive elements such as buttons and sliders.
While Divi uses semantic HTML to some extent, it doesn’t provide built-in ARIA support or offer a way to manually insert ARIA attributes.
Add skip to content links
A skip-to-content link allows users to bypass repeated navigation (like the site menu) and jump straight to the main content. This is especially helpful for keyboard and screen reader users.
To be effective, a skip link should be the first element in the HTML source and be visible when focused.
Unfortunately, Divi doesn’t include skip links by default, so you’ll need to add the HTML manually.
Ensure any plugins added to the site are WCAG compliant
Plugins extend your Divi site’s functionality, but they can also introduce accessibility barriers if not chosen carefully.
Before adding any plugin to your Divi site:
- Test keyboard accessibility
- Avoid flashing elements that could trigger seizures (more than 3 flashes per second).
- Check user forums for any reported accessibility issues.
Our Website Accessibility Checklist guides you through the essential elements of an inclusive website with simple, actionable steps. Whether you’re just getting started or looking to improve your existing site, this checklist will help you create a better experience for all users.
Tools and strategies to ensure Divi accessibility compliance
Ensuring your Divi website is accessible to all users requires a combination of automated testing, manual evaluation, and team-wide awareness. These strategies work together to help you meet WCAG guidelines and maintain ongoing accessibility compliance.
Run an automated accessibility check of your website
One of the first steps you should take is to run an automated accessibility check. This can quickly identify common issues such as missing alt text, insufficient colour contrast, and problematic heading structures. The Recite Me Website Accessibility Checker is an excellent tool for this. It provides a comprehensive scan of your site and highlights gaps that need to be addressed. While automated tools can’t catch everything, they serve as a critical starting point for your accessibility efforts.
Manual testing with an accessibility checklist
Alongside automated testing, it’s equally important to conduct manual checks using a structured accessibility checklist. This allows you to test your site from the perspective of real users, especially those relying on assistive technologies. The Recite Me Website Accessibility Checklist offers a step-by-step guide to help you evaluate key areas such as keyboard navigation, screen reader compatibility, and appropriate use of headings, links, and multimedia.
Accessibility training for employees contributing to your website
Lastly, accessibility is a shared responsibility, and everyone involved in building or managing your website should understand the basics of inclusive design. The Recite Me Accessibility Training program is designed to educate teams on web accessibility principles and best practices. Through this training, content creators, developers, and marketers can learn how to avoid common barriers and contribute to a more inclusive online experience.
Final thoughts on Divi accessibility
While Divi is a powerful and widely used WordPress theme and page builder, it doesn’t fully support accessibility out of the box. Several built-in limitations can make Divi websites non-compliant with accessibility standards by default.
The good news is that you don’t have to settle for that. You can use the practical steps in this guide to address many of Divi’s accessibility gaps, from improving colour contrast and form usability to structuring headings and adding alt text. Consider implementing a regular testing schedule, as well as training your employees on how to enhance website accessibility.
Divi accessibility FAQs
Looking for a recap or quick summary? Here are a few of our most frequently asked questions to help you get to grips with the essentials:
Is Divi accessible by default?
Divi includes some accessible features but does not meet full WCAG compliance by default, so manual adjustments are needed.
Can I make Divi websites WCAG-compliant?
Yes, with proper use of headings, image alt text, colour contrast, and ARIA roles, Divi websites can meet WCAG standards.
Does Divi support screen readers?
Divi uses semantic HTML, which helps screen readers, but additional tweaks are often required for full compatibility.
How do I fix colour contrast issues in Divi?
Adjust text and background colours in the Theme Customiser or module settings to meet minimum contrast ratios.
Are Divi forms accessible?
By default, Divi hides form labels. Use custom CSS to display labels and improve keyboard and screen reader access.
Can I add alt text to images in Divi?
Yes. Add alt text when uploading images to the media library, or directly in the Image module settings.
Does Divi support skip-to-content links?
No, Divi does not include them by default. You must manually add skip links with custom code.
