Tilda Accessibility Checklist 2026 | WCAG 2.1 AA & EAA Compliance

Last updated: 2026-03-28

Tilda Publishing is a block-based website builder popular across Europe and growing rapidly worldwide, particularly among designers, creative agencies, and small businesses. Tilda's visual-first approach produces stunning websites, but this design emphasis often comes at the expense of accessibility. Many Tilda sites rely heavily on the Zero Block editor for pixel-perfect layouts, which generates absolutely positioned elements that can severely disrupt reading order and keyboard navigation. With the European Accessibility Act (EAA) now being enforced across EU member states, Tilda users in Europe face direct compliance obligations. This is particularly relevant given Tilda's strong European user base, where businesses creating promotional websites, landing pages, and online stores must meet accessibility standards or face potential fines and legal action. The visual block-based building approach, while intuitive for designers, can mask underlying accessibility issues that only surface when users interact with the site via screen readers, keyboard navigation, or other assistive technologies. This checklist identifies the most common accessibility barriers on Tilda-built websites and provides practical fixes. Each item references the specific WCAG success criterion, severity level, and step-by-step remediation instructions that work within Tilda's block editor and Zero Block system. Prioritize critical and serious issues first for the greatest accessibility impact.

Common Accessibility Issues

critical

Zero Block Elements Lack Reading Order and Semantic Structure

WCAG 1.3.2

Tilda's Zero Block editor allows free-form positioning of elements on a canvas, producing absolutely positioned HTML elements. The visual layout may look logical, but the underlying DOM order often does not match the visual reading order. Screen readers announce elements in DOM order, not visual order, causing a confusing experience where headings may appear after paragraphs and related content is scattered.

How to fix:

When building Zero Block layouts, pay attention to the layer order in the layers panel on the left. Arrange layers so that the DOM order matches the intended reading order (top-to-bottom, left-to-right). Place headings before their associated content in the layer stack. For complex layouts, consider using standard Tilda blocks instead of Zero Block, as they generate more semantic HTML with proper reading order.

Before 
<div class="t396__elem tn-elem" style="position:absolute;top:400px">
  <p>Description paragraph</p>
</div>
<div class="t396__elem tn-elem" style="position:absolute;top:200px">
  <h2>Section Heading</h2>
</div>
After 
<div class="t396__elem tn-elem" style="position:absolute;top:200px">
  <h2>Section Heading</h2>
</div>
<div class="t396__elem tn-elem" style="position:absolute;top:400px">
  <p>Description paragraph</p>
</div>
critical

Images in Blocks Missing Alternative Text

WCAG 1.1.1

Tilda's block editor includes many image-centric blocks (covers, galleries, team sections) where the alt text field is hidden in secondary settings. Content editors frequently miss these fields, resulting in images with empty or auto-generated alt attributes. Background images set via CSS in Zero Block have no alt text mechanism at all.

How to fix:

For every image block, click on the image and open the Settings panel to find the Alt Text field. Write descriptive alt text conveying the image content and purpose. For purely decorative images, confirm the alt attribute is set to empty. For critical content conveyed through CSS background images in Zero Block, add a visually hidden text element nearby that provides the same information to screen reader users.

Before 
<div class="t-cover__carrier" style="background-image:url(important-infographic.jpg)">
</div>
After 
<div class="t-cover__carrier" style="background-image:url(important-infographic.jpg)" role="img" aria-label="Q3 revenue growth chart showing 40% increase year-over-year">
</div>
serious

Missing Keyboard Focus Indicators on Interactive Elements

WCAG 2.4.7

Tilda's default CSS removes or minimizes focus outlines on links, buttons, and form fields. Combined with custom-styled buttons using Zero Block, keyboard users cannot see which element currently has focus as they navigate the page.

How to fix:

Add custom CSS in Site Settings > More > HTML code > Inside <head> to restore visible focus indicators. Apply focus-visible styles to all interactive elements including Tilda's button classes (.t-btn), links, and form inputs. Use a high-contrast outline or box-shadow that works against your site's background colors.

Before 
.t-btn:focus,
a:focus {
  outline: none;
}
After 
.t-btn:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 95, 204, 0.3);
}
serious

Tilda Forms Missing Proper Label Associations

WCAG 1.3.1

Tilda's form blocks use placeholder text as the primary field identifier rather than visible persistent labels. When users begin typing, the placeholder disappears, leaving no indication of what information the field requires. Screen readers may not announce placeholder text consistently across all browser and AT combinations.

How to fix:

In form block settings, enable the 'Show field titles' option to display persistent visible labels above each field. Verify in the generated HTML that each label has a for attribute matching its input's id. If Tilda does not generate proper label associations, add custom JavaScript via the HTML code field to programmatically create the association.

serious

Animated Blocks and Auto-Playing Videos Without Pause Controls

WCAG 2.2.2

Tilda offers animated cover blocks, auto-playing background videos, and scroll-triggered animations that cannot be paused. These can be disorienting for users with vestibular disorders, distracting for users with attention disabilities, and can interfere with screen reader operation.

How to fix:

For background video blocks, add a visible pause/play button using custom code. Respect the prefers-reduced-motion media query by adding CSS that disables animations for users who have enabled reduced motion in their operating system settings. For scroll-triggered animations, consider providing a control to disable them.

Before 
.t-animate {
  animation: fadeInUp 1s ease;
}
After 
.t-animate {
  animation: fadeInUp 1s ease;
}

@media (prefers-reduced-motion: reduce) {
  .t-animate {
    animation: none !important;
    transition: none !important;
  }
}
serious

No Skip Navigation or ARIA Landmarks

WCAG 2.4.1

Tilda pages typically lack skip navigation links and do not generate ARIA landmark roles for header, navigation, main content, and footer regions. Keyboard and screen reader users have no efficient way to jump between page sections.

How to fix:

Add a skip navigation link using Tilda's custom HTML code injection at the top of the page. Add ARIA landmark roles to major page sections using custom JavaScript that runs on page load. Assign role='banner' to the header, role='navigation' to the nav block, role='main' to the primary content area, and role='contentinfo' to the footer.

Tilda-Specific Tips

  • Prefer standard Tilda blocks over Zero Block for content-heavy sections. Standard blocks generate more semantic HTML and maintain proper reading order automatically, while Zero Block prioritizes visual positioning over document structure.
  • Use Tilda's Site Settings > More > HTML code sections to inject accessibility-enhancing CSS and JavaScript globally. Add focus styles, skip navigation, ARIA landmarks, and prefers-reduced-motion support here so they apply across all pages.
  • When using Zero Block, always check the layer order matches the intended reading order. Test by disabling CSS in your browser to see the raw DOM order, which is what screen readers will follow.
  • Set the correct language attribute for your site in Site Settings. This is critical for screen readers to use the correct pronunciation engine, especially important for Tilda's multilingual European user base.
  • Test every page with the Tab key from top to bottom. Tilda's preview mode allows keyboard testing. Pay particular attention to popup blocks, modal forms, and multi-step checkout flows in Tilda's e-commerce features.

axe DevTools

A browser extension that identifies WCAG violations on published Tilda pages with detailed fix guidance, essential for catching issues that Tilda's editor does not flag.

WAVE

A free web accessibility evaluation tool that visually annotates accessibility issues directly on your Tilda pages, making it easy to spot missing alt text, contrast failures, and structural problems.

Colour Contrast Analyser

A desktop application for checking color contrast ratios between text and background colors used in your Tilda site, essential for verifying compliance when using custom color schemes in Zero Block.

Further Reading

Other CMS Checklists