Ghost CMS Accessibility Guide 2026: ADA Compliance and WCAG
Ghost is one of the most developer-friendly publishing platforms, known for its clean HTML output and excellent performance. Accessibility-wise, Ghost has a solid foundation — but compliance ultimately comes down to your theme. Here's what you need to know.
Ghost Accessibility at a Glance
1. What Ghost Provides Natively
Ghost has invested in clean, standards-compliant HTML output. Several accessibility foundations come built-in:
Semantic HTML from the Editor
Ghost's editor outputs proper semantic HTML. Headings become <h2>–<h6> elements (H1 is reserved for the post title, which Ghost handles automatically). Lists become <ul> and <ol>. Quotes become <blockquote>. This semantic foundation is critical for screen reader navigation and is better than many WordPress page builders that wrap everything in <div> elements.
Page Title Handling
Every Ghost post and page automatically gets a <title> tag populated from the post title. The post title also renders as the single <h1> on the page. This is correct behavior for WCAG 2.4.2 (Page Titled) and 1.3.1 (proper heading structure starts with H1).
Language Attribute
Ghost sets the lang attribute on the <html> element based on your publication's configured locale. This satisfies WCAG 3.1.1 and ensures screen readers use the correct language for pronunciation.
Alt Text Support in the Editor
When you insert an image in Ghost's editor (Koenig), you can click the image to reveal an alt text input. This field populates the alt attribute on the rendered <img> tag. You must fill this in for every image — Ghost does not auto-generate alt text.
For images that are purely decorative (separators, abstract backgrounds), leave the alt text field empty. Ghost will render alt="", which signals to screen readers that the image should be skipped.
Clean URL and Navigation Structure
Ghost generates clean, predictable URLs and navigation structures. The navigation system renders as an <nav> element, which satisfies WCAG landmark requirements. Ghost's built-in tag and author pages have consistent URL patterns that aid orientation for users with cognitive disabilities.
2. What Your Theme Controls (and Where Most Problems Live)
Ghost's accessibility is fundamentally split: the CMS controls content structure, the theme controls presentation and interaction. Most WCAG failures on Ghost sites come from the theme layer.
Featured Image Alt Text
Ghost allows you to set alt text for post feature images via the post settings sidebar. However, many Ghost themes render the feature image as a CSS background-image on a <div> rather than as an <img> element. Background images cannot have alt text and are invisible to screen readers.
To check: right-click your feature image and inspect the element. If you see background-image: url() in the CSS rather than an <img> tag, your theme is rendering it inaccessibly. Fix by editing the theme to use:
{{! Ghost Handlebars template — feature image as <img> }}
{{#if feature_image}}
<img
src="{{feature_image}}"
alt="{{feature_image_alt}}"
class="post-feature-image"
loading="eager"
/>
{{/if}}Color Contrast
Color contrast is entirely determined by your theme's CSS. Common contrast failures in Ghost themes:
- Post metadata — publication date, reading time, author byline are typically styled with light gray text that often fails 4.5:1 at small sizes
- Tag pills — small rounded tag labels with light backgrounds are frequently too low contrast
- Footer links — footer text on dark backgrounds may pass, but hover states sometimes drop contrast below threshold
- Dark mode variants — if your theme supports dark mode, contrast must be verified in both light and dark modes
- Code blocks — syntax highlighting color schemes may have low-contrast tokens for comments, keywords, or strings
Focus Indicators
Ghost themes frequently suppress browser default focus rings with outline: none or outline: 0 and either provide a subtle custom focus style or none at all. WCAG 2.4.7 (Level AA) requires that keyboard focus is visible. Many Ghost themes fail this criterion.
Fix by adding focus styles to your theme's CSS:
/* Add to your Ghost theme's screen.css */
:focus-visible {
outline: 3px solid #0070f3;
outline-offset: 2px;
border-radius: 2px;
}
/* Remove the blanket outline: none if present */
/* Search for "outline: none" and "outline: 0" in your CSS */Skip Navigation
Ghost's Casper theme includes a skip navigation link. Most third-party themes do not. Without a skip link, keyboard users must Tab through the entire navigation menu on every page before reaching content — a WCAG 2.4.1 failure.
Add to the top of your theme's default.hbs template:
{{! Add inside <body>, before <header> }}
<a href="#ghost-main" class="skip-nav">Skip to main content</a>
{{! Add corresponding id to main content wrapper }}
<main id="ghost-main">
{{{body}}}
</main>/* Skip nav CSS */
.skip-nav {
position: absolute;
top: -40px;
left: 0;
background: #0070f3;
color: white;
padding: 8px 16px;
text-decoration: none;
font-weight: bold;
z-index: 100;
}
.skip-nav:focus {
top: 0;
}Navigation Accessibility
Ghost's navigation system renders as a <nav> element with Ghost helper templates. Common theme issues:
- Mobile hamburger menu — must be a
<button>with anaria-labeland properaria-expandedstate. Many Ghost themes use a checkbox hack or an unsemantic element. - Dropdown menus — if your theme has dropdown navigation, each dropdown must be keyboard accessible (Tab into submenu, Escape to close) and use appropriate ARIA (
aria-haspopup,aria-expanded). - Active page indicator — the current page in navigation should have
aria-current="page"for screen reader users. Ghost's navigation helper adds a.nav-currentclass that themes can use witharia-current.
3. Accessibility Best Practices for Ghost Content Editors
Accessibility isn't just a developer concern — content editors make decisions that directly affect it on every post published.
Use Heading Structure Correctly
Ghost's editor gives you Heading 2 and Heading 3 as the main heading options within a post (H1 is the post title). Use H2 for major sections and H3 for subsections within those. Never use headings for visual styling — if you want large text, use a styling trick, not a heading element. Never skip heading levels (e.g., H2 directly to H4).
Write Meaningful Alt Text
For every image you insert, click it and add alt text. Good alt text describes what's in the image for someone who cannot see it: 'Bar chart showing 42% growth in Q3 2025 website traffic' is far better than 'chart' or 'image'. For images that are purely decorative (borders, abstract backgrounds, icons that have adjacent text labels), leave alt text empty.
Write Descriptive Link Text
Avoid links that say 'click here', 'read more', 'here', or 'this'. Screen reader users often navigate between links in isolation — the link must make sense without surrounding context. Write: 'Read the full WCAG 2.2 accessibility guide' not 'Click here to read more'.
Use Ordered and Unordered Lists Correctly
Use Ghost's bulleted list for unordered items and numbered list for sequential steps. Do not use manual numbers (1. 2. 3.) in plain text paragraphs — this creates a visual list that screen readers do not recognize as a list structure.
Don't Rely on Color Alone
WCAG 1.4.1 requires that color is not the only means of conveying information. If you use colored callout cards or highlighted text to indicate importance, also use text (e.g., 'Warning:', 'Important:', 'Note:') or an icon with appropriate alt text.
Add Captions or Transcripts for Video/Audio
If you embed YouTube videos or audio content, WCAG 1.2.2 requires captions for pre-recorded video and audio. YouTube's auto-captions are acceptable for most cases but should be reviewed for accuracy on technical content. For audio-only content (podcasts), a text transcript is required.
4. How to Audit Your Ghost Site for WCAG 2.1 AA
Automated Scan
Start with an automated accessibility scan. Automated tools catch 30–40% of WCAG issues — mainly structural problems and contrast failures.
- axe DevTools (Chrome extension, free) — excellent at catching missing alt text, contrast failures, and landmark issues
- WAVE (WebAIM, free) — visual overlay showing errors in context; good for identifying problem areas quickly
- Lighthouse (Chrome DevTools, built-in) — gives a quick accessibility score and highlights issues
- RatedWithAI — scan your full Ghost site by URL; generates a report across all post/page templates
Ghost-Specific Manual Checks
🔍 Scan Your Ghost Site for Free
RatedWithAI scans your published Ghost site by URL and generates a WCAG 2.1 AA compliance report with prioritized fixes. Works on Ghost(Pro) and self-hosted instances.
5. Casper vs. Custom Themes: Accessibility Comparison
Ghost's default Casper theme is maintained by the Ghost Foundation and has the best accessibility baseline of any Ghost theme. Here's how it compares to typical third-party themes:
| Feature | Casper (Default) | Typical 3rd-Party Theme |
|---|---|---|
| Skip navigation link | ✓ Included | Usually missing |
| Semantic nav landmark | ✓ <nav> element | Varies |
| Feature image as <img> | ✓ In most views | Often CSS background |
| Focus indicators | Partial — can be subtle | Usually suppressed |
| Mobile menu accessibility | Good — button with aria | Often poor — checkbox hack |
| Color contrast | Generally meets AA | Frequently fails on metadata |
| Dark mode support | ✓ Built-in | Often missing or untested |
| Heading hierarchy | ✓ H1 = post title | Usually correct |
| ARIA landmarks | Partial | Often missing |
If accessibility is important to your Ghost site and you're using a third-party theme, plan to spend time auditing and patching it. The time investment is typically 4–8 hours for an experienced developer to bring a commercial Ghost theme up to WCAG 2.1 AA.
Sponsored
Also audit your site's full technical health
SEMrush Site Audit checks 130+ issues — missing alt text, broken links, slow pages. Free crawl up to 100 pages, no credit card required.
6. Frequently Asked Questions
Is Ghost CMS accessible by default?
Ghost's content engine is accessible by design — it produces semantic HTML and exposes alt text and other accessibility attributes. However, accessibility compliance depends heavily on your theme. Most Ghost themes have accessibility gaps. Using Ghost's default Casper theme gives you the best starting point, but you should still audit before claiming WCAG compliance.
Ghost vs. WordPress for accessibility — which is better?
Ghost generally produces cleaner HTML than WordPress page builders (Elementor, WPBakery, Divi), which are notorious for accessibility failures. However, a well-configured WordPress site with a good theme (like Astra or GeneratePress with accessibility checks) can match or exceed Ghost. The real comparison is theme quality, not the CMS itself. Ghost's constraint of not having a massive plugin ecosystem is actually an accessibility advantage — there are far fewer ways to introduce accessibility failures.
Does Ghost's built-in membership feature affect accessibility?
Ghost's membership and subscription flows (gating content, email capture forms, portal UI) add interactive elements that carry accessibility requirements. The Ghost Portal overlay (for membership management) is maintained by the Ghost team and has reasonable accessibility, but it should be tested with a screen reader and keyboard. Paywalled content should be clearly indicated before users hit the paywall — confusion about what content is free vs. gated creates cognitive barriers.
Can I use accessibility overlay tools on Ghost?
Accessibility overlay tools (like UserWay or accessiBe widget) can be added to Ghost via the Code Injection settings (Site-wide header/footer). However, overlay tools are widely criticized by accessibility experts and the disability community as providing false compliance coverage. They do not fix underlying WCAG failures — they attempt to patch them at runtime, often creating new problems. Overlays should not be used as a substitute for proper accessibility work, and they do not provide legal protection from ADA lawsuits.
Audit Your Ghost Site for Accessibility Issues
Run a free WCAG 2.1 AA scan on your Ghost site. Get a report showing exactly what to fix — from feature image alt text to contrast failures to keyboard navigation gaps.