Are you from the public sector?
Are you from the public sector?
Test the complete functionality of AccessGO risk-free for 7 days free of charge.
The Divi Theme is among the most popular WordPress frameworks, but presents particular accessibility requirements. With targeted adjustments, Divi can be deployed accessibly and thus meets the essential requirements for accessible websites.
This page provides a structured overview of accessibility in Divi. It explains the relevant regulatory requirements, highlights common accessibility issues, and shows how to create an accessible Divi website using practical solutions and suitable tools. The guide is intended for WordPress users, web developers, and decision-makers who want to implement accessibility in Divi professionally and effectively.
The Divi theme for WordPress is built on a modular architecture consisting of the Page Builder, a wide range of standard modules, and customizable components. While this structure offers significant flexibility, it also introduces specific accessibility challenges. Particularly important are the ways in which content is nested and rendered, as well as the implementation of navigation and interactive elements.
For accessibility in Divi, the most critical components are the standard modules (such as buttons, sliders, and forms), the overall theme structure, and the options for extending functionality through child themes or custom code. The use of the visual Page Builder can influence the semantic markup of a website and may therefore have a direct impact on accessibility. Accessibility improvements are often implemented through custom CSS or JavaScript within a child theme, or by selectively modifying individual modules to ensure compliance with accessibility standards.
| Component | Significance for Accessibility |
|---|---|
| Page Builder | Determines HTML structure, influences semantics and navigability |
| Standard Modules (e.g., Buttons, Sliders) | Common sources of errors in operability and contrasts, adjustments usually required |
| Global Theme Structure | Defines basic structure and navigation logic, affects overall accessibility |
| Child Themes & Custom Code | Enable targeted improvements and individual adjustments for accessibility |
The implementation of accessibility in Divi follows the fundamental accessibility principles that apply to all modern web applications. Within the context of a visual Page Builder, consistently adhering to the POUR principles—Perceivable, Operable, Understandable, and Robust—can be particularly challenging, as visual design often takes precedence over semantic structure. A clear and logical content hierarchy, combined with intuitive navigation, is essential for ensuring a high level of accessibility in Divi and providing an inclusive user experience for all visitors.
Typical accessibility challenges arise from the way Divi structures and renders content. Semantically important elements such as headings, lists, and landmarks are often not output correctly by default. Compared to other WordPress page builders, Divi offers extensive customization options, but it also requires particularly careful review of the generated HTML structure and interactive elements. Only through thorough testing and targeted adjustments can accessibility requirements be implemented reliably and consistently in practice.
7 days unrestricted access. No payment details required.
For evaluating the accessibility of Divi websites, the standards WCAG 2.1 AA, BITV 2.0, and the Accessibility Strengthening Act (BFSG) are authoritative. These requirements define specific success criteria that apply to various Divi components such as navigation, forms, or visual design. Compliance with these criteria is essential for an accessible website and requires targeted review of the respective modules and functions.
Both automated tools and manual testing methods are available for evaluating Divi accessibility. Particularly important is the review of typical weaknesses: navigation elements must be logically structured, forms require clear labels and error messages, and color contrasts should meet the required minimum values. Special widgets and testing systems can help systematically monitor compliance with standards.
| Success Criterion / Testing Area | Typical Divi Component / Evaluation Tool |
|---|---|
| Navigation: Keyboard Operability, Focus Management | Menu modules, header; manual testing, WAVE, axe |
| Forms: Labels, Error Messages | Form modules; BITV test, screen reader test |
| Contrasts: Readability of Texts and Controls | Button and text modules; Colour Contrast Analyser |
| Structure: Heading Hierarchy, Landmarks | Section and row modules; semantic analysis, Accessibility Insights |
Testing accessibility on Divi websites requires a systematic approach that combines automated and manual testing procedures. First, typical sources of errors are identified using tools such as WAVE, axe, or the Accessibility Checker, such as missing alternative texts or insufficient contrasts. The next step is manual review, focusing particularly on keyboard operability, the logical order of headings, and the functionality of forms and interactive modules.
Specific considerations arise when testing Divi-specific modules, as these frequently use individual settings and custom HTML structures. Typical sources of errors are inconsistent focus indicators, incorrectly marked controls, and missing ARIA attributes. Thorough audit logic therefore considers both the generated code base and individual adjustments made through the page builder.
| Testing Method | Strengths and Weaknesses for Divi Websites |
|---|---|
| Automated Tests (e.g., WAVE, axe) | Efficient at detecting obvious errors; limited with complex modules and semantic problems |
| Manual Tests (Keyboard Navigation, Screen Reader) | Indispensable for testing individual Divi modules; more time-consuming, but more comprehensive in error detection |
| Combined Audits | Cover both standard and Divi-specific weaknesses; require structured approach |
Accessible design with Divi is most effectively achieved through a structured workflow. First, standard modules such as buttons, sliders, and menus are reviewed and adjusted: buttons receive clear labels and sufficient contrasts, sliders are provided with controls and alternative texts, menus are fully operable via keyboard. In many cases, adding custom CSS or targeted JavaScript is necessary, for example to make focus indicators visible or to add ARIA attributes.
For sustainable implementation, it is recommended to use accessible templates and presets or develop custom templates that already consider core accessibility requirements. This helps avoid common errors and establish a consistent standard. Integration of widgets can provide additional functions, but is not required in every case—many adjustments can be implemented directly in the theme or via the child theme.
| Implementation Option | Advantages / Limitations |
|---|---|
| Direct Adjustment in Divi Builder (without widget) | High control, individual solutions possible; requires technical expertise |
| Use of Accessibility Widgets | Quick implementation, additional functions; possibly limited flexibility, dependency on third parties |
| Custom CSS & JavaScript | Targeted optimization for specific requirements; maintenance effort and testing needs increase |
| Accessible Templates and Presets | Consistent results, reduction of recurring errors; initial effort for development or selection |
Schedule a free consultation and speak with one of our experts.
Divi websites—like all web offerings in Germany and the EU—are subject to the requirements of the Accessibility Strengthening Act (BFSG), the Accessible Information Technology Regulation (BITV 2.0), and the international WCAG guidelines. Particularly for public institutions, but increasingly also for businesses, implementation of these standards is mandatory. Divi itself does not offer automated compliance with these requirements, but enables implementation of the required criteria through targeted adjustments.
Compared to other content management systems and themes, Divi offers high flexibility, but the responsibility for accessible design lies with the website operator. Documentation obligations and proof requirements particularly concern the creation of test reports and ongoing documentation of measures taken. These proofs are relevant in the context of audits or inquiries by supervisory authorities, especially for public institutions.
Divi websites in practice frequently face specific accessibility challenges. Typical problems concern missing or incorrectly used ARIA labels, incomplete keyboard operability, and inadequate focus indicators. Particularly when using third-party modules, additional sources of errors arise, as these do not always comply with necessary accessibility standards. Visual effects and animations can also lead to distractions or complicate operability for users with limitations.
Adapting standard templates is often difficult, as many templates were not designed accessibly and subsequent corrections can be time-consuming. Solutions include targeted addition of ARIA attributes, revising keyboard controls, and reducing or adjusting animations. Consistent testing and correction of all deployed modules is crucial to address known weaknesses.
| Challenge | Solution Approach |
|---|---|
| Missing ARIA Labels | Targeted addition of ARIA attributes in modules and templates |
| Insufficient Keyboard Operability | Adjustment of focus order and visible indicators, testing with tab navigation |
| Third-Party Modules without Accessibility | Careful selection, independent testing, and if necessary replacement with accessible alternatives |
| Strong Visual Effects and Animations | Reduction or deactivation of animations, provision of pause and stop functions |
| Difficult Adaptation of Standard Templates | Early selection of accessible templates or targeted correction of relevant components |
Numerous WordPress widgets and tools are available for improving accessibility on Divi websites. These support automated testing, provide accessibility widgets, and help specifically address typical weaknesses. Particularly useful are widgets that check contrasts, add alternative texts, or enable improved keyboard navigation. Add-ons that integrate special accessibility functions for Divi can also be deployed strategically.
When selecting and integrating these tools, attention must be paid to compatibility with Divi and the respective modules deployed. Not every widget harmonizes with the dynamic structure of the page builder or with third-party modules. Careful testing and, if necessary, adjustment of settings is therefore recommended to achieve optimal results for Divi accessibility.
| Widget/Tool | Function and Features |
|---|---|
| WP Accessibility | Adds ARIA attributes, improves contrasts, and provides keyboard operation aids; high compatibility |
| Accessibility Checker | Automated testing of content in the editor; displays errors and optimization tips directly during editing |
| One Click Accessibility | Provides accessibility widget (e.g., font sizes, contrasts); simple integration, occasional conflicts with Divi styling |
| axe DevTools, WAVE | Browser-based tools for automated analysis of accessibility problems; independent of theme used |
| Divi Accessibility (Add-on) | Special extension for Divi to optimize focus indicators, skip links, and semantic structure |
7 days unrestricted access. No payment details required.
Successful accessible Divi websites are characterized by consistent implementation of best practices in all core areas. These include logically structured navigation, clearly labeled and fully keyboard-operable forms, and accessible integration of media content. Practical examples from the public sector or from organizations with high accessibility standards demonstrate how these requirements can be implemented technically and visually with Divi. Analysis of such reference projects provides valuable guidance for one’s own development.
Typical success factors are the use of semantically correct headings, provision of alternative texts for images, integration of skip links, and reduction of visual distractions. Errors such as missing labels, insufficient contrasts, or unreachable controls can be avoided through targeted application of these best practices. Public reference projects and documented case studies provide good orientation for practical implementation.
| Best Practice | Common Error |
|---|---|
| Navigation with Skip Links and Clear Focus Management | Confusing menus, missing keyboard operability |
| Forms with Labels, Error Messages, and ARIA Attributes | Unlabeled fields, no feedback on incorrect entries |
| Accessible Media (Subtitles, Alternative Texts) | Videos without subtitles, images without alternative text |
| Reference: Public Websites with Published BITV Test | Missing documentation and proof of accessibility |
Individual Divi modules can be designed accessibly by focusing from the start on semantically correct HTML and targeted use of ARIA attributes. Particularly important is clear labeling of controls and ensuring keyboard operability. Typical pitfalls with custom modules are missing alternative texts, invisible focus indicators, and unclear role or landmark structure. Regular review with accessibility tools supports sustainable implementation.
Divi accessibility is a central topic for operators and developers of WordPress websites, requiring targeted planning and continuous maintenance. Implementing accessible solutions with Divi is possible, but demands technical understanding, careful adjustments to modules, and regular review of all deployed components.
It is essential to adhere to recognized standards, address common sources of errors, and use appropriate tools and plugins. Continuous audits, sustainable maintenance processes, and the early integration of accessible templates ensure that Divi websites remain accessible over the long term. Practice shows that with a structured approach and targeted monitoring, a high level of accessibility can be achieved even in complex Divi projects.
Check your homepage with the AccessGO quick check.
Identify risks and barriers according to WCAG standards.
After Divi updates, problems such as altered HTML structures, deleted ARIA attributes, or faulty focus indicators frequently occur. These changes can impair or reset individual accessibility adjustments.
After Divi updates, problems such as altered HTML structures, deleted ARIA attributes, or faulty focus indicators frequently occur. These changes can impair or reset individual accessibility adjustments.
Keyboard navigation in Divi can be optimized by specifically adapting menus and interactive elements for operation via tab key. Ensure visible focus indicators, a logical order, and complete accessibility of all controls.
Maintaining ongoing accessibility of Divi websites requires regular reviews, particularly when integrating external widgets. Compatibility issues can lead to new barriers and impair overall accessibility.
Third-party widgets can limit the accessibility of Divi websites if they do not comply with accessibility standards. Continuous monitoring is therefore essential to identify new barriers early.
