Showit Accessibility Checklist 2026 | WCAG 2.1 AA & EAA Compliance
Last updated: 2026-04-30
Showit is the website builder most photographers, wedding planners, and brand designers reach for when they want a fully visual canvas without writing code. The platform's strength is also its biggest accessibility risk: every text block, button, and decorative element is positioned absolutely on a free-form canvas, which means heading hierarchy, reading order, and tab order are all decided by what the user drags onto the page rather than by underlying HTML structure. A typical Showit site renders two completely separate documents (one for desktop, one for mobile) and a third hybrid for tablet, meaning a single accessibility issue often has to be fixed in three places. The standard photographer template ships with light gray sans-serif body text on white backgrounds, full-bleed hero videos that auto-play and loop, and image-based testimonials where the testimonial copy is baked into a JPEG. With the European Accessibility Act enforceable since 28 June 2025 against any business with EU customers and ADA demand letters increasingly targeting photographer and creative websites in the United States, Showit users need a checklist that addresses the canvas-builder model directly. This guide walks through the issues a non-developer can fix today inside the Showit editor: text hierarchy, contrast, alt text, form labels, mobile parity, the WordPress blog integration that powers the Journal section, and the auto-play media that comes preconfigured in most templates. Each issue maps to the specific WCAG 2.1 success criterion it violates so you can document remediation in your accessibility statement.
Common Accessibility Issues
Showit's canvas treats every text element the same: it is a positioned block that you size and style visually. Most users style headings by changing the font size and weight rather than selecting a heading level from the text settings. The result is that a page that looks like it has H1, H2, and H3 sections actually renders as styled paragraphs, leaving screen-reader users with no way to navigate the page by heading and breaking the WCAG 1.3.1 requirement that information and relationships be programmatically determinable.
Click each text block on the canvas, open the Text panel on the right side, and select the correct heading level from the Tag dropdown (H1 for the page title, H2 for major sections, H3 for subsections). Use exactly one H1 per page (typically the hero title). After tagging, use the canvas Outline panel to verify the order is sequential. Repeat the process on the mobile canvas and any tablet variants because Showit treats them as separate documents and does not propagate tag changes between them.
<div class="showit-text" style="font-size: 64px; font-weight: 700">Wedding Photography in Devon</div>
<div class="showit-text" style="font-size: 32px">Recent Sessions</div><h1 class="showit-text" style="font-size: 64px; font-weight: 700">Wedding Photography in Devon</h1>
<h2 class="showit-text" style="font-size: 32px">Recent Sessions</h2>Because elements are positioned absolutely on the Showit canvas, the DOM order matches the order each element was added to the page rather than the visual reading order. A keyboard user pressing Tab through the page often jumps from the top hero to the footer link, then back to the middle column, then to the navigation. This makes WCAG 2.4.3 (Focus Order) effectively impossible to satisfy without intentional intervention.
Open the Layers panel on the canvas and reorder elements top-to-bottom in the same sequence a sighted visitor would read them: navigation first, then hero heading, then hero subheading, then body sections in visual order, then footer. Showit ties tab order to layer order, so this single action fixes keyboard navigation. Repeat the layer reorder on the mobile canvas, where the visual order is usually different (single column instead of multi-column), and verify by tabbing through the published URL with the keyboard alone.
The most popular Showit photographer templates ship with body text styled in soft grays like #999999 or #b3b3b3 over white backgrounds, which fails the WCAG 1.4.3 minimum 4.5:1 contrast ratio. The footer copy, captions, and form labels in these templates are often even lighter. Visitors with low vision, anyone in bright outdoor lighting, and older audiences cannot read the text reliably.
Open Site > Site Style and update the body text color to a value that meets 4.5:1 against your page background (pure black is 21:1; a medium-dark gray like #555555 reaches 7.5:1 against white). Test the new color against every background you use on the site, including any colored section overlays. Re-publish, then test the live URL with the WebAIM Contrast Checker for at least the body, captions, footer, and form-label combinations. Showit applies site styles globally only if individual blocks have not been overridden, so check each text block on each canvas.
/* Showit default photographer template */
.showit-text--body { color: #b3b3b3; } /* 1.9:1 on white, fails 1.4.3 *//* Updated to meet 4.5:1 */
.showit-text--body { color: #555555; } /* 7.5:1 on white, passes 1.4.3 */Almost every Showit photographer template ships with a hero video that auto-plays, loops, and is muted, with no visible pause or stop control. WCAG 2.2.2 (Pause, Stop, Hide) requires that any moving content longer than five seconds have a mechanism to pause it. Auto-playing video also violates 2.3.1 (Three Flashes or Below Threshold) for any wedding-recap reels with quick-cut edits, and it can trigger vestibular reactions in users with motion sensitivity.
Open the canvas, select the hero video element, and either replace it with a static image or add a Media block that exposes the play/pause control. If you keep the auto-play behavior, add a visible pause button on the canvas and link it to the video element using Showit's interaction settings. As a minimum, respect prefers-reduced-motion by uploading a still poster image and only loading the video on click. Test on the mobile canvas as well, where most templates ship the same auto-play video at full screen.
It is common in Showit templates for testimonials, pricing tables, and 'about me' biography sections to be flattened into JPEG or PNG images so that the typography matches the brand exactly. Without alt text, screen-reader users hear nothing where the testimonial or price would have been. Even when alt text is added, very long quotes do not belong inside an alt attribute because screen readers read the entire string at once with no navigation.
Replace flattened image testimonials and pricing tables with native Showit text blocks styled to match the brand. If you must keep an image (for example because the design uses a custom display font you do not have a webfont for), add a descriptive alt attribute summarizing the content ("Five-star testimonial from Sarah K. about her engagement session") and place the full quote as visible text below the image. For pricing images, always provide the same prices as native text on the page so search engines and screen readers can both read them.
<img src="/images/testimonial-sarah.jpg"><img src="/images/testimonial-sarah.jpg" alt="Five-star testimonial from Sarah K. (full text below)">
<blockquote>
<p>"Working with this team made our wedding day stress-free."</p>
<cite>Sarah K., Devon</cite>
</blockquote>Showit's built-in contact form (and most third-party form embeds dropped onto a Showit canvas, including HoneyBook, Dubsado, and 17hats) defaults to placeholder-only labels. As soon as a visitor begins typing, the placeholder disappears and the field has no visible name. Cognitive-disability users lose the prompt, screen-magnification users cannot scroll back to recover it, and many screen readers do not announce placeholder text reliably across browsers.
Open the Showit form element and enable the Show Labels option in the Form Settings panel; if the option is missing for your form provider, drop a Showit Text block above each field with a visible label. For HoneyBook or Dubsado embeds, edit the form template inside the booking-software dashboard and switch every field to display a persistent label rather than a placeholder. Always provide a real label even if it duplicates the placeholder text, since labels and placeholders serve different purposes.
<input type="email" placeholder="Your email" name="email"><label for="contact-email">Your email</label>
<input id="contact-email" type="email" name="email" autocomplete="email" required>Showit treats the mobile canvas as a separate document, so content updates made on desktop do not flow through automatically. Over time, the mobile version commonly ends up missing recent testimonials, pricing changes, or service details that exist on desktop. Users on mobile (which is more than half of typical photographer-site traffic) and screen-reader users who navigate landmarks may encounter a different, less complete experience, breaking WCAG 1.3.2 (Meaningful Sequence) and the spirit of equal access.
After every desktop content change, open the mobile canvas and confirm the same content is present and in the correct reading order. Use Showit's split-screen preview to compare the two side-by-side. Establish a publishing rule: never publish a desktop change without also reviewing mobile. For long-running clients, audit the mobile version monthly to catch drift. If you maintain multiple Showit sites, consider creating a content-parity checklist as a Showit-canvas template you copy into every project.
Showit hosts the Journal section through a connected WordPress install, which means accessibility issues there are governed by the WordPress theme rather than by the Showit canvas. The default Showit-WordPress theme commonly ships with no skip link, missing post-meta heading levels, and visually styled blockquotes that are not marked up as <blockquote>. Visitors who arrive on a blog post often encounter a different (and worse) accessibility experience than the rest of the site.
Inside the WordPress dashboard at /wp-admin, install the Accessibility Checker plugin by Equalize Digital and run it across every published Journal post. Add a skip link by editing the Showit-WordPress header.php (or use the WP Accessibility plugin to inject one). Ensure each Journal post uses heading blocks (not styled paragraphs) for section titles, and that featured images carry descriptive alt text. Cross-reference the WordPress Customizer color settings against the Showit site styles so the Journal looks and meets contrast like the rest of the site.
<!-- Showit-WordPress theme default header -->
<body>
<header>...</header>
<main>...</main>
</body><body>
<a class="skip-link" href="#main">Skip to main content</a>
<header>...</header>
<main id="main">...</main>
</body>Showit-Specific Tips
- Treat the desktop canvas, mobile canvas, and WordPress Journal as three separate audit targets. Run an automated scan on each one after every publish.
- Disable the platform-wide auto-play default for hero videos. Most Showit templates can be edited so the hero block uses a static image first and only loads video on user interaction.
- When choosing a photographer template, look for ones that already pass 4.5:1 contrast on body text. Showit's marketplace tags some templates with accessibility notes; favor those.
- Set up Showit's tablet canvas only if you actively maintain it. If you cannot keep all three canvases in sync, disable the tablet variant and let it inherit the desktop canvas to reduce drift.
- After every publish, test the live URL with axe DevTools in Chrome. Showit's editor preview does not render the same HTML as the published site, so issues like duplicate IDs or missing landmarks only show up after publish.
Recommended Tools
axe DevTools
Browser extension that scans Showit pages for WCAG violations including missing heading levels, low contrast, and tab-order issues, with code-level remediation guidance.
WebAIM Contrast Checker
Free tool to verify the gray body-text colors common in Showit photographer templates meet WCAG 4.5:1 contrast against your background.
Equalize Digital Accessibility Checker
WordPress plugin that scans the Journal posts powered by Showit's WordPress integration and surfaces accessibility errors directly in the editor.
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.