Duda Accessibility Checklist 2026 | WCAG 2.1 AA & EAA Compliance
Last updated: 2026-03-28
Duda is a popular website builder used by agencies and SaaS platforms to create client websites at scale. While Duda has made strides in accessibility with features like built-in alt text fields and semantic HTML output, many Duda sites still fall short of WCAG 2.1 AA standards due to misconfigured widgets, inaccessible custom code sections, and content that lacks proper structure. With the European Accessibility Act (EAA) enforcement underway across EU member states, agencies building client sites on Duda must ensure every site they deliver meets accessibility requirements. This is especially critical for agencies managing portfolios of small business websites, where each site may serve customers who rely on assistive technologies. Duda's white-label capabilities mean accessibility failures can affect dozens or hundreds of client sites simultaneously if templates are not built with accessibility in mind from the start. This checklist covers the most common accessibility barriers found on Duda-built websites and provides concrete, actionable fixes. Each item references the specific WCAG success criterion it addresses, the severity of the issue, and step-by-step remediation guidance that works within Duda's editor and widget system. We recommend addressing critical and serious issues first, as these represent the most significant barriers for users relying on screen readers, keyboard navigation, and other assistive technologies.
Common Accessibility Issues
Duda's image gallery and slideshow widgets allow bulk image uploads, but the alt text field is often skipped during rapid content population. Screen reader users encounter unlabeled images with no context, missing the visual information these galleries are meant to convey. This is particularly problematic for product galleries and portfolio showcases.
Open each gallery or slideshow widget in the Duda editor and click on individual images to access their properties panel. Add descriptive alt text that conveys the purpose and content of each image. For purely decorative images, set the alt text to empty. When creating site templates for agency clients, include placeholder alt text instructions so content editors know to fill them in.
<div class="dm-gallery-item">
<img src="portfolio-1.jpg" class="dm-gallery-img">
</div><div class="dm-gallery-item">
<img src="portfolio-1.jpg" alt="Modern kitchen renovation with white marble countertops and pendant lighting" class="dm-gallery-img">
</div>Duda allows embedding custom HTML widgets for advanced functionality. These widgets often lack proper ARIA roles, labels, and keyboard interaction patterns. Interactive elements within custom HTML like tabs, accordions, and modals are frequently inaccessible to keyboard and screen reader users because they rely solely on mouse click handlers.
When adding custom HTML widgets, ensure all interactive elements have proper ARIA roles and labels. Add keyboard event handlers alongside mouse events. Use aria-expanded for collapsible sections, role='tablist' for tab interfaces, and ensure modals trap focus properly. Test custom widgets with keyboard-only navigation before publishing.
<div class="custom-tabs">
<div onclick="showTab(1)">Tab 1</div>
<div onclick="showTab(2)">Tab 2</div>
<div class="tab-panel">Content 1</div>
</div><div class="custom-tabs" role="tablist" aria-label="Product information">
<button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">Tab 1</button>
<button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">Tab 2</button>
<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">Content 1</div>
</div>Duda's pre-built sections and templates frequently use light text on gradient backgrounds or overlay text on images without sufficient contrast. The dynamic nature of background images means contrast ratios can vary across the image, making some text readable in one area but failing contrast requirements in another.
Add a semi-transparent dark overlay behind text placed on images. In the Duda editor, select the section and adjust the overlay opacity until text meets the minimum 4.5:1 contrast ratio for normal text. For gradient backgrounds, check contrast at multiple points along the gradient. Use Duda's design settings to choose text colors that meet WCAG requirements against the lightest part of the background.
Duda's built-in form widget sometimes generates visible placeholder text instead of proper HTML labels, or uses labels that are not programmatically linked to their inputs via the for/id attribute pairing. Screen reader users cannot reliably identify which field they are interacting with.
In the form widget settings, ensure every field has a visible label (not just placeholder text). Check the generated HTML to verify label elements use the for attribute matching the input's id. If Duda's built-in forms do not generate proper labels, use the custom HTML widget to build forms with correct label associations. Always include aria-required='true' on mandatory fields.
Many Duda templates do not include a skip navigation link, forcing keyboard users to tab through the entire header and navigation menu on every page before reaching the main content area. This is especially burdensome on sites with large mega-menus or multiple navigation levels.
Add a skip navigation link as the first focusable element in the site header using Duda's custom HTML widget or header code injection. Style it to be visually hidden until focused. Link it to an anchor on the main content area. This is a simple addition that dramatically improves keyboard navigation experience.
Duda's responsive editor allows independent layout adjustments for mobile, tablet, and desktop views. When columns are reordered visually for mobile without updating the DOM order, the reading order experienced by screen reader users does not match the visual presentation, causing confusion.
When adjusting layouts for different breakpoints, ensure the visual order matches the logical reading order in the HTML. Use Duda's mobile editor to preview how content reflows and check that the tab order makes sense. If content must appear in a different visual order on mobile, use CSS flexbox order properties rather than physically moving elements in a way that disrupts DOM order.
Duda-Specific Tips
- Use Duda's built-in accessibility widget (available in the Widget panel) to add an accessibility toolbar to your site. While this is not a substitute for proper accessibility implementation, it provides users with options to adjust contrast, font size, and cursor visibility.
- When building templates for agency clients, create a section in the template guide specifically for accessibility requirements, including alt text standards, heading hierarchy rules, and color contrast minimums.
- Leverage Duda's dynamic pages feature with accessibility in mind: ensure dynamically generated content includes proper heading levels, alt text from collection fields, and semantic markup.
- Test your Duda sites with keyboard navigation by pressing Tab through every page. Duda's editor preview mode supports this. Pay special attention to popup widgets and multi-step forms.
- Use Duda's SEO and accessibility settings panel to set the page language attribute, which is critical for screen readers to use the correct pronunciation engine.
Recommended Tools
axe DevTools
A browser extension that scans Duda-built pages for WCAG violations with detailed remediation guidance, ideal for testing published sites.
WAVE
A free web accessibility evaluation tool that provides visual feedback about the accessibility of your Duda site by injecting icons and indicators directly into the page.
Lighthouse
Built into Chrome DevTools, Lighthouse includes an accessibility audit that scores your Duda site and identifies specific elements that need attention.
Further Reading
Other CMS Checklists
Get our free accessibility toolkit
We're building a simple accessibility checker for non-developers. Join the waitlist for early access and a free EAA compliance checklist.
No spam. Unsubscribe anytime.