Carrd Accessibility Checklist 2026 | WCAG 2.1 AA & EAA Compliance
Last updated: 2026-04-03
Carrd is a hugely popular single-page website builder used by freelancers, creators, indie hackers, and small businesses to create landing pages, personal portfolios, and link-in-bio sites. With over 4 million sites built and pricing starting at free, Carrd has become the go-to tool for quick, visually polished one-page websites. However, Carrd's simplicity comes with significant accessibility trade-offs. The platform generates websites as single-page applications with heavily styled div-based layouts that frequently lack semantic HTML structure. Because Carrd sites are single-page by design, issues like missing landmarks, absent heading hierarchy, and poor keyboard navigation compound since there is no page-level navigation to help users orient themselves. Common accessibility barriers include images without alt text fields in the free tier, form elements that rely on placeholder-only labels, buttons implemented as styled div elements, background videos without pause controls, and text overlaid on images without sufficient contrast. The European Accessibility Act (EAA) applies to Carrd sites serving EU customers for commercial purposes, and ADA obligations apply to US-based businesses. The fact that Carrd is a simple, inexpensive tool does not exempt site owners from legal accessibility requirements. This checklist identifies the most common accessibility failures on Carrd-built websites and provides practical remediation steps, including workarounds using Carrd's custom code embedding feature available on Pro plans.
Common Accessibility Issues
Carrd generates pages using nested div elements for all content containers, without using semantic HTML5 elements like header, nav, main, article, or footer. Screen reader users have no landmarks to navigate by and must read through the entire page linearly to find specific sections.
On Carrd Pro plans, use the Embed element with custom code to inject ARIA landmark roles. Add a script in the site footer that assigns role='banner' to the first container, role='main' to the primary content area, and role='contentinfo' to the last container. Alternatively, add id attributes to containers and use a script to apply landmark roles on page load.
<div id="container01" class="container">
<div class="inner">
<h1>My Portfolio</h1>
</div>
</div>
<div id="container02" class="container">
<div class="inner">
<p>About me...</p>
</div>
</div><div id="container01" class="container" role="banner">
<div class="inner">
<h1>My Portfolio</h1>
</div>
</div>
<div id="container02" class="container" role="main">
<div class="inner">
<p>About me...</p>
</div>
</div>Carrd's free tier does not expose an alt text field for images. Even on Pro plans, the alt text field is buried in the image element settings and is frequently left empty. Background images set on containers have no alt text mechanism at all. Screen reader users encounter images with no description of their content.
On Carrd Pro, click on each image element, open Settings, and fill in the Alt Text field with a meaningful description. For decorative images, enter a single space to generate an empty alt attribute. For informational images set as container backgrounds, add a visually hidden text element within the container describing the image content.
<img src="profile-photo.jpg"><img src="profile-photo.jpg" alt="Portrait of Jane Smith, UX designer based in Berlin">Carrd renders some button elements as styled div or span elements with click handlers rather than native <a> or <button> elements. These are not announced as interactive by screen readers and cannot be activated with keyboard Enter or Space keys.
Use Carrd's Buttons element type rather than styled text elements for all interactive actions. Verify published markup by inspecting the HTML in browser DevTools. If Carrd generates non-semantic elements, use the Embed element to add a custom accessible button with proper HTML and linking.
Carrd forms use placeholder text as the only field identifier. When users start typing, the placeholder disappears, leaving no visible label to indicate what information was requested. This affects all users, particularly those with cognitive disabilities or short-term memory difficulties.
Add a Text element above each form field that acts as a visible label. On Pro plans, use the Embed element to add proper HTML forms with <label> elements programmatically associated to inputs via matching for and id attributes. This provides both visible labels and correct screen reader associations.
<input type="email" placeholder="Your email address" class="form-input"><label for="email-field" class="form-label">Email address</label>
<input type="email" id="email-field" placeholder="e.g. [email protected]" class="form-input">A common Carrd design pattern places white text over photographic background images. Contrast varies across the image, and in many areas the text fails the WCAG 4.5:1 minimum contrast ratio. This makes text unreadable for users with low vision.
Add a semi-transparent dark overlay between the background image and the text. In Carrd, this can be done by setting the container's Overlay option to a dark color with 50-70% opacity. Verify contrast with a checker tool after applying the overlay, testing against both the lightest and darkest areas of the image.
Carrd single-page sites can be very long with many sections. Without skip navigation or section jump links, keyboard users must Tab through every interactive element in preceding sections to reach content further down the page.
On Pro plans, use an Embed element at the very top of the page to inject a skip navigation link: an anchor link pointing to the main content container's id. Style it to be visually hidden until focused. Additionally, use Carrd's built-in section links feature in the navigation element to provide in-page navigation that doubles as landmark access for keyboard users.
Carrd-Specific Tips
- Carrd Pro is essential for accessibility remediation. The free tier lacks alt text fields, custom code embedding, and several other features needed to fix common issues. Upgrade to Pro Standard ($19/year) at minimum.
- Use Carrd's Embed element to inject accessibility-enhancing code: skip navigation links, ARIA landmarks, focus styles, and prefers-reduced-motion CSS. Place one Embed at the top and one at the bottom of your site for maximum coverage.
- Test your Carrd site's heading structure using a screen reader or the HeadingsMap browser extension. Ensure headings follow a logical hierarchy (h1 > h2 > h3) without skipping levels. Carrd's text elements let you choose heading levels, so use them deliberately.
- For link-in-bio style Carrd sites, ensure every link button has descriptive text that makes sense out of context. Avoid generic text like 'Click here' or 'Link'. Screen reader users may navigate by links and need each one to be self-descriptive.
- Background videos on Carrd autoplay with no native pause control. If using video backgrounds, add a pause button via an Embed element and include a prefers-reduced-motion CSS rule to disable the video for users with motion sensitivity.
Recommended Tools
axe DevTools
A browser extension for scanning published Carrd pages for WCAG violations. Essential since Carrd's editor has no built-in accessibility checking.
WAVE
A free visual evaluation tool that highlights accessibility issues directly on your Carrd page, making structural problems and missing alt text immediately visible.
HeadingsMap
A browser extension that displays the heading structure of your page in a sidebar, helping you verify that your Carrd site has a logical heading hierarchy.
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.