Divi Accessibility: How to Make Your Website More Accessible

Divi Accessibility: How to Make Your Website More Accessible

What accessibility means for a Divi site

Accessibility means people with disabilities can use your site. Aim for WCAG 2.1 level AA. That covers text contrast, keyboard navigation, semantic structure, captions and clear labels. Using Divi does not guarantee accessibility. You must check and fix content, modules and interactive components.

Common accessibility issues on Divi-built sites

• Poor heading structure and missing landmarks
• Insufficient colour contrast
• Images without useful alt text or decorative images incorrectly labelled
• Keyboard traps in custom modules, sliders or modal popups
• Links and buttons with vague labels like “click here”
• Forms lacking labels and clear error messages
• Auto-playing carousels or videos without pause controls

How Divi helps and where you must act

Divi includes accessibility improvements and there is a Divi Accessibility plugin that adds fixes. Those help with focus outlines, skip links and ARIA hints. Still, most accessibility work is content and configuration. You must edit modules, write alt text, set headings, and test with assistive tools.

Step-by-step checklist for a single page

Work through this per template or page. Start with the most-visited pages.

1. Headings and landmarks
   • Use one H1 per page. Use H2, H3 for subsections in order. Do not skip levels.
   • Prefer semantic elements: <header>, <nav>, <main>, <footer>. If Divi output does not use those, add landmark roles where needed.
2. Keyboard navigation
   • Tab through the page. Every interactive element must receive focus in a logical order.
   • Ensure visible focus styles. If you remove outlines, replace them with a clear focus state.
3. Images and media
   • Add descriptive alt text for informative images. Use empty alt (alt=“”) for purely decorative images.
   • Provide captions or transcripts for videos and audio. Offer controls to pause, stop or hide auto-play media.
4. Links and buttons
   • Make link text meaningful out of context. Avoid “read more” without context.
   • Use <button> for actions and links for navigation. Ensure both are keyboard operable.
5. Forms
   • Label every form control. Use placeholders only as hints, not as labels.
   • Return descriptive error messages and indicate errors with aria-describedby or similar.
6. Colour contrast
   • Meet WCAG 2.1 AA: at least 4.5:1 contrast for normal text, 3:1 for large text.
   • Do not rely on colour alone to convey information. Add text or icons.
7. Complex widgets
   • For sliders, accordions and modals, ensure ARIA roles, keyboard controls and focus trapping are correct.
   • Set initial focus to the modal and return focus to the triggering element when closed.

Practical Divi-specific steps

These tasks involve the Divi Builder and theme templates. They are safe to follow regardless of Divi version.

• Open each module that contains text. Confirm the correct heading tag is used. Edit the HTML if necessary.
• Replace ambiguous buttons and links text inside button modules and text modules.
• Edit image module settings to add alt text or mark images as decorative when appropriate.
• For sliders and carousels, add pause and previous/next controls and ensure they can be used by keyboard.
• Test custom code blocks for missing roles and add aria labels where needed. Avoid adding aria attributes you cannot test.

Testing checklist: automated and manual

Combine automated tools with real manual checks. Automated checks find obvious problems. Manual tests find keyboard, focus and screen reader issues.

• Run Lighthouse or axe for baseline automated issues.
• Run WAVE to spot missing alt and structural issues.
• Keyboard test: tab through, shift+tab back, use Enter and Space, test arrow keys where appropriate.
• Screen reader test: check at least one free screen reader such as NVDA on Windows or VoiceOver on macOS.
• Contrast check: use a contrast tool to confirm ratios meet WCAG 2.1 AA.

Common mistakes and how to avoid them

• Fixing only automated issues. Automated tools do not catch focus order or meaningful link text problems.
• Keeping decorative images with alt text that repeats file names. Use empty alt instead.
• Relying on visual cues like colour or bold without textual equivalence.
• Removing focus outlines for aesthetics and not providing an accessible replacement.
• Using custom scripts that change focus without managing aria-hidden or tabindex for hidden content.

Small business implementation plan

Use this plan for a site of about 10 pages. Times are estimates for an experienced editor.

Task	Time (hours)	Outcome
Automated audit with axe or Lighthouse	1	List of obvious fixes
Manual check: headings, keyboard, screen reader spot test	3	Find focus and screen reader issues
Update images, alt text, link text, headings	4	Content fixes applied
Fix forms, modals and sliders	3	Interactive fixes
Final testing and sign-off	2	Accessible launch

When to bring in a developer or specialist

• If custom JavaScript interferes with focus or navigation
• If a third-party module is not keyboard operable
• If you need ARIA patterns implemented for complex widgets

Final practical checklist

• One H1 per page and ordered headings
• Descriptive alt text or empty alt for decorative images
• Colour contrast meets WCAG 2.1 AA
• All interactive elements keyboard accessible
• Forms labelled and give clear errors
• Modals and widgets manage focus and use ARIA where appropriate
• Automated scan plus at least one screen reader test

Follow the checklist every time you edit templates or add new modules. That keeps a Divi site more accessible without major rewrites.