Canva Websites Accessibility Checklist 2026 | WCAG 2.2 AA & EAA Compliance
Last updated: 2026-06-13
Canva Websites lets anyone turn a Canva design into a published website in minutes - pick a template, drag elements around the canvas, hit publish, and you have a live page on a canva.site subdomain or your own custom domain. Millions of small businesses, creators, and event organizers use it precisely because it requires zero web knowledge. But that design-first workflow is also why Canva sites fail accessibility audits in very predictable ways. In Canva, everything is a design decision made by eye: a section title is whatever text you made big, a link is whatever you styled to look clickable, and a chart or badge is often a flattened graphic with the words baked into pixels. The editor never warns you that your pale brand palette fails contrast minimums, that the image you dragged in has no alternative text, or that a screen reader will read your beautifully designed page as one long, structureless stream. Because Canva offers no custom code injection on websites, you cannot patch problems with CSS or ARIA after the fact - the only fixes are the ones you make inside the editor, which makes knowing the right settings essential. With the European Accessibility Act now enforceable for businesses selling to EU consumers and ADA Title III demand letters routinely targeting small-business sites in the United States, a Canva site is legally a website like any other. This checklist covers the failures we see most often on published Canva sites and the exact editor-level fix for each one. None of this is legal advice; consult a qualified attorney for your jurisdiction.
Common Accessibility Issues
Canva's text menu offers 'Add a heading', 'Add a subheading', and 'Add a little bit of body text' presets that map to real heading elements when the site is published. But nothing stops you from grabbing body text and scaling it up to 60px to act as a section title. Visually identical, structurally invisible: screen reader users navigating by headings skip straight past it, and the published page has no usable outline. Sites assembled from many duplicated text boxes often end up with no headings at all, or several competing H1s.
Always start section titles from the 'Add a heading' and 'Add a subheading' presets in the Text panel, never from resized body text. Keep one main heading per page and use subheadings in a logical order beneath it. After publishing, check the live page with a headings outline tool (such as the WAVE extension's Structure tab) to confirm the hierarchy actually rendered - judge the published HTML, not the canvas.
<!-- Body text scaled up to look like a heading -->
<p style="font-size: 60px; font-weight: 700;">Our Services</p><!-- Canva heading preset rendered as a real heading -->
<h2>Our Services</h2>Every photo, illustration, logo, and graphic element you drag onto a Canva website needs a text alternative, but Canva's alt text field is tucked away and empty by default. Published pages routinely ship dozens of unlabeled images, so a screen reader either announces useless filenames or says nothing at all - and if the image is a linked logo or a button-like graphic, the user has no idea what it does.
Select each image or graphic, open the options menu (the three dots), choose 'Alternative text', and write a short description of what the image shows or does - 'Smiling barista handing a customer a coffee', not 'image1.png'. For purely decorative shapes and background flourishes, leave the alt text empty so screen readers skip them. For a linked logo, describe the destination: 'Back to homepage'.
<img src="f3a9b2c1.png"><img src="f3a9b2c1.png" alt="Smiling barista handing a customer a coffee">Canva's color picker, brand kits, and template palettes give no contrast feedback whatsoever. Templates frequently pair white text with pastel backgrounds, or place text directly over busy photos, falling far below the 4.5:1 ratio WCAG requires for body text and 3:1 for large text. Because the whole product is built around aesthetic palettes, low-contrast combinations ship constantly - and people with low vision or color vision deficiency simply cannot read the result.
Check every text/background pairing in your design with the WebAIM Contrast Checker: body text needs at least 4.5:1, large text (24px+, or 19px bold) at least 3:1. When text sits over a photo, add a solid or high-opacity overlay block behind it rather than trusting the image to stay dark enough. Adjust your brand kit colors once at the source so every future design inherits passing combinations.
/* White text on pastel pink - roughly 1.8:1, fails */
color: #FFFFFF;
background-color: #F8BBD0;/* White text on deep plum - roughly 8.0:1, passes */
color: #FFFFFF;
background-color: #6A1B4D;Canva makes it effortless to design a pricing card, schedule, menu, or infographic as a single graphic - and many users import flattened PNGs exported from other Canva designs. Once words become pixels, screen readers cannot read them, they blur when zoomed to 200%, and they cannot reflow on small screens. An entire restaurant menu or event schedule published as one image is invisible to assistive technology.
Rebuild text-heavy graphics using Canva's real text elements layered over shapes and images, so the words publish as selectable, readable HTML text. If you must keep an image of text (a logo is the accepted exception), put the full equivalent content in real text on the same page or in the image's alt text. As a quick test: if you cannot select the words with your cursor on the published page, a screen reader cannot read them either.
<!-- Entire menu flattened into one image -->
<img src="menu-spring-2026.png" alt="Our menu"><!-- Real text the screen reader can read -->
<h2>Spring Menu</h2>
<h3>Espresso - $3.50</h3>
<p>Double shot, single origin Ethiopian roast.</p>In Canva you turn any text or element into a link, and the styling is whatever you designed - there is no default underline and no prompting for meaningful text. The result is pages full of 'Click here', 'Learn more', and 'Book now' links that all sound identical to a screen reader user pulling up a links list, plus inline links distinguished from surrounding text by color alone, which fails users who cannot perceive that color difference.
Write link text that describes the destination on its own: 'Book a table for dinner' instead of 'Click here'. When several cards share a call to action, differentiate each one ('Read the catering FAQ', 'See wedding packages'). Underline inline text links or otherwise mark them with a non-color cue - in Canva that means applying underline formatting to the linked text, since you cannot add CSS later.
<a href="/booking" style="color: #E91E63; text-decoration: none;">Click here</a><a href="/booking" style="text-decoration: underline;">Book a table for dinner</a>Published Canva sites get an auto-generated navigation bar (with a mobile hamburger on small screens) built from your page sections. Keyboard users need to Tab through that nav, open the mobile menu, and activate every button and link with Enter - and they need to see where focus is at each step. Decorative elements that merely look like buttons but were never given a link are unreachable, and the default focus indicator can be nearly invisible against some brand color schemes.
Test the published site using only the keyboard: Tab through the navigation, open the mobile menu at a narrow window width, and activate every interactive element with Enter. Anything that looks clickable but never receives focus needs a real link attached in the editor. If the focus outline disappears against your background colors, lighten or darken adjacent sections so the indicator stays visible - you cannot restyle the outline itself on Canva, so the surrounding contrast is your lever.
<!-- Decorative shape that looks like a button but has no link -->
<div class="shape button-look">Get started</div><!-- Element with a real link attached in the editor -->
<a href="#contact" class="shape button-look">Get started</a>Canva encourages animated elements - entrance effects, animated stickers, looping GIFs, and background videos - and on a published website these typically autoplay with no pause, stop, or hide control. Content that moves for more than five seconds alongside other content violates WCAG 2.2.2, distracts readers with attention-related disabilities, and large fast movement can trigger vestibular symptoms in susceptible visitors.
Use animation sparingly: prefer effects that play once briefly over infinite loops, and avoid animated stickers and looping GIFs near body text. If you embed video, use a player with visible pause controls (YouTube and Vimeo embeds provide them) rather than a decorative autoplaying loop. Since Canva offers no site-wide pause button, restraint at design time is the only reliable fix.
<!-- Infinite looping GIF next to body text, no controls -->
<img src="confetti-loop.gif" alt=""><!-- Embedded player with user controls, no autoplay -->
<iframe src="https://www.youtube.com/embed/VIDEO_ID" title="Studio tour video"></iframe>Canva Websites-Specific Tips
- Start every section title from Canva's 'Add a heading' or 'Add a subheading' text presets; never scale up body text to act as a heading, and keep one main heading per page.
- Open the three-dot menu on every image and graphic and fill in 'Alternative text'; leave it empty for purely decorative shapes so screen readers skip them.
- Run every text/background pair from your brand kit through a contrast checker once, fix the palette at the source, and add solid overlays behind any text placed over photos.
- Keep words as real Canva text elements layered over shapes - never publish menus, schedules, or pricing as flattened images of text.
- Underline inline links and write each link's text so it describes its destination; you cannot add CSS later, so formatting in the editor is your only tool.
- Before sharing the URL, Tab through the published site with the keyboard at both desktop and mobile widths, and confirm the navigation, hamburger menu, and every button are reachable and operable.
Recommended Tools
WAVE Browser Extension
Run it on the published canva.site URL (not the editor) to catch missing alt text, contrast failures, missing headings, and empty links in the HTML Canva actually generates.
WebAIM Contrast Checker
Check your Canva brand kit and template colors against the 4.5:1 and 3:1 minimums; Canva's color picker gives no contrast feedback at all.
axe DevTools
Browser extension for automated WCAG testing on the live site. Useful for confirming heading order, accessible names on the auto-generated navigation, and link labels.
Keyboard-only testing (Tab, Enter, Escape)
The fastest way to find unlinked decorative 'buttons', an unopenable mobile menu, and invisible focus on a published Canva site - no tooling required.
NVDA + Firefox / VoiceOver + Safari
Screen-reader testing reveals what the flattened-graphic and resized-text shortcuts actually sound like: whether headings exist, images speak, and links make sense out of context.
Canva Websites Accessibility At a Glance
| Plugin / Tool | Area | Common Failure | WCAG | Best Fix |
|---|---|---|---|---|
| Headings text presets | Resized body text as fake heading | 1.3.1 | Use heading/subheading presets in order | |
| Images alt text field | Alt text empty by default | 1.1.1 | Three-dot menu > Alternative text | |
| Color brand kit | Pastel palettes below 4.5:1 | 1.4.3 | Fix brand kit; overlay behind text on photos | |
| Graphics flattened text | Menus/schedules as images of text | 1.4.5 | Rebuild with real text elements | |
| Links styled by eye | 'Click here' + color-only cues | 2.4.4 | Descriptive labels, underline inline links |
Frequently Asked Questions
Are Canva websites accessible out of the box?
Partially, and less than most dedicated website builders. Canva does generate real HTML text from its text elements, maps its heading presets to actual heading tags, and produces a navigation bar automatically - so the foundation is there. But almost everything that determines whether a real audit passes depends on choices Canva leaves entirely to you with no warnings: alt text is empty by default, the color tools give no contrast feedback, templates freely place text over photos, links ship without underlines or descriptive labels, and nothing stops you from building your whole page out of resized body text and flattened graphics. Crucially, Canva Websites offers no custom code injection, so unlike WordPress or Webflow you cannot patch problems afterwards with CSS or ARIA - the editor settings are the whole game. Treat the published URL as the thing under test: scan it with WAVE or axe, Tab through it with the keyboard, and fix findings inside the editor.
Can a Canva website comply with the European Accessibility Act or ADA?
It can get to a defensible WCAG 2.2 AA standard for the page types Canva supports, but you have to work within the editor's limits. The recurring audit findings on Canva sites - missing alt text, low-contrast brand palettes, fake headings made from resized text, menus published as images, vague 'click here' links, and looping animations - are all fixable with editor settings and design discipline, and this checklist maps each one to its fix. The honest caveat is about ceilings rather than floors: because you cannot inject code, anything Canva's renderer gets wrong at a structural level cannot be patched by you, so complex needs (custom forms, e-commerce checkouts, applications) are better served by platforms with more control. For a typical brochure, portfolio, event, or link-in-bio site, a carefully built Canva page can pass an automated scan and a manual keyboard and screen reader check. This is general guidance, not legal advice; consult a qualified attorney about your specific obligations.
How do I add alt text to images on a Canva website?
Select the image or graphic on the canvas, click the three-dot options menu, and choose 'Alternative text' - a field opens where you can describe the image. Write a short, specific description of what the image shows or does: 'Hand-thrown ceramic mugs in the studio' rather than 'photo' or the filename. If the image is also a link (a logo that returns home, a graphic acting as a button), describe the destination or action instead, like 'Back to homepage'. For purely decorative shapes, dividers, and background textures, leave the field empty so screen readers skip them rather than reading noise. Two habits make this stick: add alt text the moment you place each image instead of sweeping at the end, and after publishing, run the live URL through the WAVE extension, which flags every image that still lacks a text alternative.
Further Reading
Other CMS Checklists
- Carrd Accessibility Checklist
- Durable Accessibility Checklist
- Godaddy-website-builder Accessibility Checklist
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.