Ghost Accessibility Checklist 2026 | WCAG 2.1 AA & EAA Compliance
Last updated: 2026-03-22
Ghost is a modern publishing platform favored by bloggers, newsletters, and content-focused businesses for its clean editor experience and built-in membership and subscription features. Ghost themes are built with Handlebars templating, which gives theme developers full control over the HTML output. While this means Ghost has no inherent bloat or framework overhead that could interfere with accessibility, it also means that accessibility is entirely dependent on how the theme is coded. The default Casper theme provides a reasonable baseline, but many premium Ghost themes prioritize visual design over semantic correctness and keyboard operability. Ghost's minimal plugin ecosystem means that most accessibility fixes must be implemented at the theme level rather than through add-ons. The built-in membership portal and newsletter subscription forms add another layer of accessibility concerns, as these interactive components must work for all users regardless of how they access the site. As the European Accessibility Act enforcement begins, Ghost site owners must pay particular attention to their theme code, the Portal membership widget, embedded content, and content authoring practices to ensure WCAG 2.1 AA compliance across the entire user experience.
Common Accessibility Issues
Ghost's built-in Portal widget for membership signup, login, and account management renders as an iframe overlay that can present significant accessibility barriers. The Portal may lack proper focus trapping when open, may not return focus to the trigger element when closed, and the iframe content may not be fully navigable by keyboard. Screen readers may not announce the Portal's presence or content correctly.
Ensure the Portal trigger button has a descriptive accessible name (aria-label or visible text). When the Portal opens, focus should move into the iframe. Add an event listener to trap focus within the Portal while it is open and handle the Escape key to close it. If the default Portal widget is not sufficiently accessible, consider using Ghost's Content API to build a custom membership flow with fully accessible HTML forms.
<div onclick="javascript:void(0)" class="gh-portal-btn">
Subscribe
</div><button type="button"
class="gh-portal-btn"
aria-label="Open subscription portal"
data-portal="signup">
Subscribe
</button>Ghost's editor allows adding images to posts and setting featured images, but the alt text field is easy to overlook. Many Ghost themes render featured images using the {{feature_image}} helper without any alt text, and content images inserted through the editor may lack descriptions. The Handlebars template may not even include an alt attribute on the feature image tag.
In your theme's Handlebars templates, always include alt text for featured images using the {{feature_image_alt}} helper. For content images within the post body, Ghost's editor includes an alt text option when clicking on an image; train authors to always fill this in. Update the theme's post template to include the alt attribute with a fallback.
{{#if feature_image}}
<img src="{{feature_image}}" class="post-hero">
{{/if}}{{#if feature_image}}
<img src="{{feature_image}}"
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}Featured image for {{title}}{{/if}}"
class="post-hero">
{{/if}}Ghost themes often render the site navigation as a series of anchor links within a generic div container, missing the nav element and ARIA labels that screen readers use to identify navigation regions. Mobile navigation toggle buttons may use div or span elements instead of proper button elements, and skip-to-content links are frequently absent.
Wrap all navigation sections in nav elements with descriptive aria-label attributes (e.g., 'Primary navigation', 'Footer navigation'). Add a skip-to-content link as the first focusable element in the template. Use proper button elements for mobile menu toggles with aria-expanded to communicate state.
<div class="site-nav">
{{navigation}}
</div>
<div class="menu-toggle" onclick="toggleMenu()">
<span class="hamburger"></span>
</div><a href="#main-content" class="sr-only sr-only-focusable">Skip to content</a>
<nav aria-label="Primary navigation">
{{navigation}}
<button type="button"
class="menu-toggle"
aria-expanded="false"
aria-label="Toggle navigation menu">
<span class="hamburger" aria-hidden="true"></span>
</button>
</nav>
<main id="main-content">Ghost's editor supports embedding content from external services like YouTube, Twitter, and CodePen using embed cards. These embeds render as iframes in the page output, but Ghost does not automatically add title attributes to these iframes. Screen reader users encounter untitled frames and cannot determine what content the iframe contains without navigating into it.
Ghost themes can add title attributes to iframes using JavaScript that runs on page load. Create a script that queries all iframes without title attributes and sets appropriate titles based on the iframe source URL. For YouTube embeds, extract the video title from the URL or use a data attribute. Include this script in your theme's default.hbs layout.
Many Ghost themes, including variations of Casper, use light text colors on background images for hero sections, tag descriptions with reduced opacity text, and meta information (dates, reading time, author names) in low-contrast gray. These decorative choices consistently fail the 4.5:1 minimum contrast ratio for normal text.
Audit all text colors in your theme against their background colors using a contrast checker. For text overlaid on images, add a semi-transparent dark overlay behind the text or use a text-shadow technique to ensure readability. Update meta text colors to meet at least 4.5:1 contrast ratio. In your theme's CSS, replace any use of opacity to lighten text with explicit color values that meet contrast requirements.
Ghost-Specific Tips
- Use Ghost's {{feature_image_alt}} and {{feature_image_caption}} Handlebars helpers in your theme templates to ensure featured images always carry accessible alt text and captions provided by content editors.
- Since Ghost has no plugin ecosystem, all accessibility enhancements must be built into your theme. Create a dedicated accessibility partial (partials/accessibility.hbs) that includes skip links, ARIA landmarks, and any JavaScript-based accessibility enhancements, then include it in your default.hbs layout.
- When using Ghost in headless mode with a front-end framework, ensure that the front-end rendering layer handles focus management during client-side navigation, includes proper page title updates for screen readers, and announces route changes via an ARIA live region.
- Test the Ghost Portal membership widget thoroughly with keyboard and screen reader, as it renders in an iframe that may not inherit your theme's accessibility improvements. Consider building a custom membership page using Ghost's Content API if the default Portal is not accessible enough.
Recommended Tools
axe DevTools
A browser extension that performs comprehensive accessibility audits on your Ghost theme's rendered output, identifying WCAG violations and providing specific remediation guidance for each issue.
Pa11y
An automated accessibility testing tool that can be run against your Ghost site from the command line or integrated into CI/CD pipelines, testing multiple pages and generating reports on WCAG compliance.
Lighthouse
Google's built-in Chrome DevTools auditing tool that includes an accessibility category, checking for common WCAG violations, ARIA usage issues, and semantic HTML problems in your Ghost theme output.
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.