HubSpot CMS Accessibility Checklist 2026 | WCAG 2.1 AA & EAA Compliance

Last updated: 2026-04-03

HubSpot CMS Hub is a popular content management platform used by thousands of marketing teams, agencies, and mid-market businesses to build websites, landing pages, and blogs tightly integrated with HubSpot's CRM and marketing automation tools. While HubSpot has made strides in recent years toward accessibility awareness, many HubSpot-built websites still contain significant WCAG violations stemming from the platform's template marketplace, drag-and-drop page editor, and default module behaviors. Common issues include CTA buttons rendered as non-semantic div elements, form modules that rely on placeholder text instead of visible labels, auto-rotating testimonial sliders without pause controls, and insufficient color contrast in popular marketplace themes. The platform's strength in marketing automation can also introduce accessibility challenges: pop-up forms, chatbot widgets, and dynamic smart content modules often trap keyboard focus or fail to announce changes to screen readers. With the European Accessibility Act (EAA) now in effect and ADA litigation continuing to rise in the United States, businesses running their websites on HubSpot CMS must proactively audit and remediate accessibility issues. This checklist covers the most common accessibility barriers found on HubSpot CMS websites, with platform-specific remediation guidance that works within HubSpot's template system, module framework, and design manager.

Common Accessibility Issues

critical

CTA Modules Rendered as Non-Semantic Elements

WCAG 4.1.2

HubSpot's CTA (Call-to-Action) module generates buttons using span or div elements styled to look like buttons, rather than native button or anchor elements. Screen readers do not announce these as interactive elements, and keyboard users cannot activate them with the Enter or Space keys as expected.

How to fix:

In the Design Manager, modify CTA module templates to use native <a> or <button> elements. If you cannot change the module template, add role='button' and tabindex='0' to the CTA container, along with a keyboard event handler for Enter and Space keys. For global CTAs created in the Marketing > Lead Capture > CTAs tool, switch to using the newer CTA (Beta) module which generates more semantic markup.

Before 
<div class="hs-cta-wrapper">
  <span class="hs-cta-node" id="cta_button_123">
    <div class="cta_button" style="color:#fff;background:#ff7a59">
      Get Started Free
    </div>
  </span>
</div>
After 
<div class="hs-cta-wrapper">
  <a class="hs-cta-node cta_button" href="/demo"
     style="color:#fff;background:#ff7a59">
    Get Started Free
  </a>
</div>
critical

Form Modules Missing Visible Labels

WCAG 1.3.1

HubSpot form modules default to showing placeholder text inside input fields rather than persistent visible labels above them. When users begin typing, the placeholder disappears, leaving no visual indication of what information the field requires. Additionally, some HubSpot form fields lack proper label-input associations in the generated HTML.

How to fix:

In the form editor (Marketing > Lead Capture > Forms), enable the 'Inline label position' setting and select 'Above field' to display persistent labels. In the form module settings on the page, verify that 'Set as label' is enabled. For custom form templates in the Design Manager, ensure every input has a corresponding <label> element with a for attribute matching the input's id.

Before 
<div class="hs-form-field">
  <div class="input">
    <input type="email" placeholder="Email address" class="hs-input">
  </div>
</div>
After 
<div class="hs-form-field">
  <label for="email-input">Email address</label>
  <div class="input">
    <input type="email" id="email-input" class="hs-input">
  </div>
</div>
critical

Pop-Up Forms and Chat Widgets Create Keyboard Traps

WCAG 2.1.2

HubSpot's pop-up forms (lead flows), live chat widget, and chatbot conversations can trap keyboard focus. When these elements appear, focus is not moved into them predictably, and pressing Escape or Tab may not dismiss or exit them. The chat widget in particular sits in a fixed position and can intercept Tab keystrokes on the main page.

How to fix:

For pop-up forms, configure them to appear on scroll or exit intent rather than immediately on page load, giving users time to orient. In the Design Manager, add JavaScript to manage focus: move focus into the pop-up when it opens, trap focus within it while open, and return focus to the triggering element when closed. For the chat widget, test thoroughly with keyboard-only navigation and file a support ticket if focus management issues persist, as the widget JavaScript is controlled by HubSpot.

serious

Testimonial and Image Sliders Without Pause Controls

WCAG 2.2.2

Many HubSpot marketplace themes and custom modules include auto-rotating carousels for testimonials, logos, or hero images. These carousels typically lack pause, stop, or manual navigation controls, making content inaccessible to users who need more time to read or who experience motion sensitivity.

How to fix:

Edit the slider module in the Design Manager to add visible previous/next buttons and a pause/play toggle. Set the default state to paused. Add an aria-live='polite' region that announces slide changes. Respect the prefers-reduced-motion media query by disabling auto-rotation when the user has requested reduced motion in their operating system settings.

Before 
<div class="testimonial-slider" data-autoplay="true" data-interval="3000">
  <div class="slide active">Quote 1</div>
  <div class="slide">Quote 2</div>
</div>
After 
<div class="testimonial-slider" data-autoplay="false" role="region" aria-label="Customer testimonials" aria-roledescription="carousel">
  <button class="slider-prev" aria-label="Previous testimonial">&#8592;</button>
  <button class="slider-pause" aria-label="Pause auto-rotation">&#10074;&#10074;</button>
  <button class="slider-next" aria-label="Next testimonial">&#8594;</button>
  <div class="slide active" role="group" aria-label="Slide 1 of 2">Quote 1</div>
  <div class="slide" role="group" aria-label="Slide 2 of 2">Quote 2</div>
  <div aria-live="polite" class="sr-only"></div>
</div>
serious

Insufficient Color Contrast in Marketplace Themes

WCAG 1.4.3

Many popular HubSpot marketplace themes use light gray text on white backgrounds for secondary content, muted placeholder colors in forms, and low-contrast button states. HubSpot's theme settings allow color customization, but the default values in many themes do not meet WCAG minimum contrast ratios of 4.5:1 for normal text.

How to fix:

In Settings > Website > Themes, audit all color variables defined in the theme. Check text-to-background contrast for body text, headings, links, button text, form labels, and placeholder text using a contrast checker tool. Update theme color settings so all text combinations meet 4.5:1 for normal text and 3:1 for large text. Pay special attention to the 'secondary text color' and 'muted text color' variables that themes commonly set too light.

moderate

Blog Listing Pages Missing Article Landmarks

WCAG 1.3.1

HubSpot blog listing templates often render blog post summaries as generic div elements without using HTML5 article elements or proper heading hierarchy. Screen reader users navigating by landmarks or headings cannot efficiently browse the blog listing to find posts of interest.

How to fix:

In the Design Manager, edit the blog listing template to wrap each post summary in an <article> element. Ensure each article contains a heading (h2 recommended for listing pages) linked to the full post. Add an aria-label or heading to the blog listing section itself so screen reader users understand the page structure.

HubSpot CMS-Specific Tips

  • Use HubSpot's built-in accessibility scanner in the page editor (available in CMS Hub Professional and Enterprise) to catch common issues before publishing. It checks contrast, alt text, and heading structure but does not cover all WCAG criteria.
  • When selecting themes from the HubSpot Marketplace, search for themes that mention accessibility or WCAG in their description. Test the theme demo page with a keyboard and screen reader before purchasing.
  • Add global accessibility enhancements via Settings > Website > Pages > Site Header HTML. Inject skip navigation links, prefers-reduced-motion CSS overrides, and focus-visible styles here so they apply to every page.
  • HubSpot's Smart Content feature dynamically swaps page sections based on visitor data. Ensure that all smart content variations meet accessibility standards, not just the default version. Screen reader users should receive the same quality of accessible content regardless of which variant is served.
  • For HubL templates, use the |escape filter on user-generated content to prevent XSS attacks, and always include alt text parameters in image modules using the img tag's alt attribute within your HubL template code.

axe DevTools

A browser extension for identifying WCAG violations on published HubSpot pages, particularly useful for catching CTA, form, and module-level issues that HubSpot's built-in checker may miss.

WAVE

A free visual accessibility evaluation tool ideal for content editors working in HubSpot who want to quickly verify that their published pages meet basic accessibility requirements.

HubSpot Accessibility Scanner

HubSpot's built-in page accessibility checker available in CMS Professional and Enterprise tiers. Provides in-editor feedback on contrast, alt text, and heading issues.

Further Reading

Other CMS Checklists