ClickFunnels Accessibility Checklist 2026 | WCAG 2.1 AA & EAA Compliance

ClickFunnels countdown and 'evergreen' timers are central to its urgency tactics, but they are typically rendered as a canvas element or as text that updates every second with no accessible status role. Screen reader users either hear nothing (so the deadline that gates the offer is invisible to them) or, if the digits live in a live region, hear the time announced over and over, drowning out the rest of the page. Time-based urgency that a sighted user can read but a screen reader user cannot also raises a fairness problem if the timer changes pricing or availability.

<!-- digits updated every second inside a live region -->
<div aria-live="assertive">
  <span class="cf-timer">02</span>:<span class="cf-timer">59</span>:<span class="cf-timer">58</span>
</div>

<!-- ticking display hidden from AT, real deadline in text -->
<div class="cf-timer" aria-hidden="true">02:59:58</div>
<p>This offer ends Friday, May 30 at 11:59pm Eastern.</p>
<div aria-live="polite" class="sr-only" data-milestone>Less than 1 minute remaining.</div>

The signature ClickFunnels 'two-step' order form and exit-intent popups open as overlays on top of the current page. By default focus stays on the page behind the overlay, focus is not trapped inside the dialog, and the dialog is not announced as a dialog. A keyboard user who triggers the popup keeps tabbing through the hidden page underneath; a screen reader user gets no indication that a form has appeared and may never find it. Because this overlay is usually where the visitor actually buys, the failure blocks the conversion entirely for these users.

<div class="cf-popup" style="display:block">
  <h3>Get Your Free Guide</h3>
  <input type="email" placeholder="Email">
  <button>Send it</button>
</div>

<div class="cf-popup" role="dialog" aria-modal="true" aria-labelledby="cf-popup-title">
  <h3 id="cf-popup-title">Get Your Free Guide</h3>
  <label for="cf-popup-email">Email address</label>
  <input type="email" id="cf-popup-email" autocomplete="email">
  <button>Send it</button>
  <button aria-label="Close dialog">&times;</button>
</div>
<!-- JS: move focus in, trap focus, Escape closes, restore focus, set page inert -->

Funnel templates frequently embed a 'video sales letter' that autoplays on page load with the player controls deliberately hidden so visitors cannot skip ahead. Audio that starts automatically and plays for more than three seconds with no easy way to pause or stop it fails WCAG 1.4.2, interferes with screen reader speech, and is distressing for people with cognitive or attention disabilities. Hidden controls also mean keyboard users cannot pause the video at all.

Opt-in and order forms in ClickFunnels usually rely on placeholder text ('Your Name', 'Email Address', 'Card Number') with no persistent visible label. Placeholders disappear as soon as the visitor types, are not reliably announced as labels by screen readers, and typically fail contrast because placeholder gray is very light. Users who rely on labels lose track of which field they are completing, and anyone who returns to review the form sees only their own input with no field name.

<input type="text" placeholder="Your Name">
<input type="email" placeholder="Email Address">

<label for="cf-name">Your name</label>
<input type="text" id="cf-name" autocomplete="name" placeholder="e.g. Jordan Lee">
<label for="cf-email">Email address</label>
<input type="email" id="cf-email" autocomplete="email">

To get pixel-perfect brand fonts and badge graphics, funnel builders often place the main headline, price, or guarantee as an image rather than as live text. The single most important message on the page then has no machine-readable equivalent: screen readers announce only whatever alt text exists (frequently a filename or nothing), the text does not reflow or scale when a low-vision user zooms, and it cannot be translated or selected. Pricing and guarantee claims locked inside images are also easy to forget to update.

Order bumps (the highlighted 'Yes, add this to my order!' box on the checkout) and one-click upsells rely heavily on visual styling, a colored box, and an arrow to convey what the checkbox does. The checkbox itself often has no programmatic label, or its label is a separate styled block of text that is not associated with the input. Screen reader users hear an unlabeled checkbox and cannot tell what they are agreeing to buy, and the price added by the bump may not be announced at all.

<div class="order-bump">
  <input type="checkbox" id="bump">
  <div class="bump-copy">YES! Add the Advanced Workbook</div>
</div>

<div class="order-bump">
  <input type="checkbox" id="bump">
  <label for="bump">Yes, add the Advanced Workbook for $27 to my order</label>
</div>

Conversion-optimized templates frequently use light text on bright accent buttons, thin gray sub-headlines, and pale 'limited time' urgency text that fall below the 4.5:1 contrast ratio for normal text (3:1 for large text). These choices are intentional design flourishes, but they make the call-to-action and the fine print hard to read for people with low vision and for anyone on a phone in daylight, which on a funnel page directly suppresses conversions for those users.