Notion Sites Accessibility Checklist 2026 | WCAG 2.1 AA & EAA Compliance
Last updated: 2026-03-24
Notion Sites allows users to publish Notion pages as public websites, providing a quick and easy way to create documentation, portfolios, landing pages, and knowledge bases without any coding. While the simplicity of publishing directly from Notion is appealing, the generated HTML output presents several accessibility challenges that site owners need to understand and address. Notion's editor was primarily designed as a productivity tool, not a website builder, so the rendered HTML prioritizes Notion's internal data model over semantic web standards. Page structure relies heavily on nested div elements rather than proper semantic HTML landmarks, heading hierarchy can be inconsistent depending on how content was organized in Notion, and images may lack alt text if it was not provided in the Notion editor. Additionally, Notion's database views, toggle blocks, and embedded content introduce interactive patterns that may not be fully keyboard accessible or properly announced to screen readers. With accessibility regulations like the European Accessibility Act now being enforced and ADA compliance becoming a concern for any public-facing website, Notion Sites publishers must be aware of these limitations and take proactive steps to maximize the accessibility of their published content. This checklist covers the most significant accessibility barriers in Notion Sites and provides practical workarounds that operate within Notion's content editing capabilities.
Common Accessibility Issues
Notion allows users to add captions to images, but the caption text is rendered as a visible figcaption element, not as the image's alt attribute. If no caption is provided, the image is rendered with an empty or missing alt attribute. Many Notion Sites publishers are unaware that captions and alt text serve different purposes, resulting in informative images that are invisible to screen reader users.
Add descriptive captions to every informative image in your Notion page before publishing. While Notion renders these as visible captions rather than alt attributes, this ensures some descriptive text is associated with the image. For critical images, include the description in the surrounding text content as well. If you have access to custom domain settings, consider using a reverse proxy or Cloudflare Worker to inject proper alt attributes from caption text into the published HTML.
<figure class="notion-image">
<img src="/image/team-photo.png"
style="width:100%">
</figure><figure class="notion-image">
<img src="/image/team-photo.png"
alt="The A11yFix team at our annual accessibility summit"
style="width:100%">
<figcaption>
The A11yFix team at our annual accessibility summit
</figcaption>
</figure>Notion Sites renders the page title as an H1 element, but the rest of the heading structure depends entirely on how the author used Notion's Heading 1, Heading 2, and Heading 3 blocks. Notion only offers three heading levels, and authors frequently use them for visual sizing rather than logical hierarchy, creating heading jumps (e.g., H1 to H3) that confuse screen reader navigation. Additionally, the published output lacks semantic landmark elements like nav, main, aside, and footer.
Organize your Notion content with a deliberate heading hierarchy: use Heading 1 for major sections, Heading 2 for subsections within those, and Heading 3 for further subdivisions. Never skip heading levels for visual styling purposes. Since Notion does not generate landmark elements, consider the overall page structure carefully and ensure the heading hierarchy alone provides a navigable document outline. If using a custom domain with middleware, inject landmark elements around the generated content.
<h1>My Portfolio</h1>
<div class="notion-text">Welcome to my site</div>
<h3>Recent Projects</h3> <!-- Skipped H2 -->
<h1>Contact Me</h1> <!-- Second H1 --><h1>My Portfolio</h1>
<div class="notion-text">Welcome to my site</div>
<h2>Recent Projects</h2>
<h3>Project Alpha</h3>
<h3>Project Beta</h3>
<h2>Contact Me</h2>Notion's embedded database views (tables, galleries, boards, lists) are rendered as complex interactive components on Notion Sites. These views may not support full keyboard navigation: users cannot reliably tab through table cells, activate sort or filter controls, or navigate gallery cards using keyboard alone. The rendered HTML for databases uses custom elements and JavaScript that may not expose proper ARIA grid or table semantics.
Minimize reliance on complex database views for critical content on your published Notion Site. For tabular data, consider using Notion's simple table block instead of a database table view, as simple tables render with standard HTML table elements. For databases that must be included, add descriptive text above the database explaining its contents and providing any critical information in plain text so that keyboard and screen reader users can access the data even if the interactive view is not fully accessible.
<div class="notion-collection-view">
<div class="notion-table">
<div class="notion-table-row">
<div class="cell">Name</div>
<div class="cell">Email</div>
</div>
</div>
</div><table class="notion-simple-table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jane Smith</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>Notion's toggle blocks are commonly used for FAQs, collapsible sections, and progressive disclosure on Notion Sites. However, the rendered toggle may not use proper button elements with aria-expanded attributes. The clickable toggle header might be a div element that is not keyboard focusable, and screen readers may not announce the expanded or collapsed state of the toggle content.
When using toggle blocks, ensure the toggle header text is descriptive enough that users understand what content will be revealed. Test toggle blocks on your published Notion Site with keyboard navigation: verify that you can Tab to each toggle and activate it with Enter or Space. If toggles are not keyboard accessible, consider replacing critical toggle content with always-visible content organized under proper headings instead.
<div class="notion-toggle">
<div class="toggle-header" onclick="toggle()">
Frequently Asked Questions
</div>
<div class="toggle-content" style="display:none">
Content here
</div>
</div><div class="notion-toggle">
<button class="toggle-header"
aria-expanded="false"
aria-controls="faq-content">
Frequently Asked Questions
</button>
<div class="toggle-content"
id="faq-content"
hidden>
Content here
</div>
</div>Notion Sites offers limited theme customization, and several of the default color options for text, backgrounds, and callout blocks produce color combinations that fail WCAG 2.1 AA contrast requirements. Light gray text on white backgrounds, colored text on colored callout backgrounds, and link colors in certain themes may all fall below the required 4.5:1 contrast ratio for normal text.
Audit all color combinations used on your published Notion Site using a contrast checker tool. Avoid using Notion's light gray text color on white or light backgrounds. For callout blocks, test the text color against the callout background color and switch to darker text or background combinations if the contrast ratio is below 4.5:1. Choose Notion's dark theme options for text and avoid relying on color alone to convey information.
<div class="notion-callout"
style="background: #FFF3E0; color: #E65100;">
<!-- Orange text on light orange: ~2.8:1 contrast -->
Important: Review these guidelines
</div><div class="notion-callout"
style="background: #FFF3E0; color: #4E2700;">
<!-- Dark brown text on light orange: ~7.5:1 contrast -->
Important: Review these guidelines
</div>Notion Sites-Specific Tips
- Always add captions to images in Notion before publishing to Notion Sites, as this is the only way to associate descriptive text with images. Write captions that describe the image content rather than just providing attribution or decorative text.
- Use Notion's simple table blocks instead of database table views for presenting structured data on your published site, as simple tables render with proper HTML table semantics that are accessible to screen readers.
- Plan your heading hierarchy deliberately before publishing. Notion only offers H1, H2, and H3 levels, so map out your content structure to ensure headings nest logically without skipping levels.
- Test your published Notion Site on the actual notion.site domain (or custom domain) rather than in the Notion editor, as the published rendering differs significantly from the editing experience in terms of HTML output and interactive behavior.
Recommended Tools
WAVE
A browser extension that overlays accessibility issue markers directly on your published Notion Site, making it easy to identify missing alt text, heading hierarchy problems, and contrast issues without reading HTML source code.
Lighthouse
Chrome DevTools' built-in auditing tool that scores your published Notion Site on accessibility, identifying common WCAG violations in the generated HTML output and providing actionable improvement suggestions.
Colour Contrast Analyser
A desktop application for testing exact color contrast ratios between text and background colors used in your Notion Site theme, essential for verifying WCAG 2.1 AA contrast compliance across all page elements.
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.