Accessibility

Accessibility you can check, not just a badge

Every template is audited route by route against WCAG 2.2 AA, and ships the same check so you can run it yourself after you change something. The table below shows what each audit covered and what it fixed.

How every template is tested

axe-core, WCAG 2.2 AA

Every WCAG 2.0, 2.1 and 2.2 A and AA rule axe-core tests, plus its best-practice rules for landmarks, heading order and one h1 per page.

Contrast from the rendered page

Where axe can't work out a ratio on its own (text over a gradient, an image, or gradient text), the check measures the actual pixels behind each letter.

A keyboard pass

Tabs through every page and fails any element that takes focus without a visible change, or that can be focused while hidden, such as a closed menu.

Every route, every theme

At desktop and phone widths, in light and dark where the template ships both, with menus, drawers and panels checked open as well as closed.

Results by template

526 page checks across 13 templates, all passing as of 26 October 2026, using axe-core 4.13.0. A check is one route or open state, in one theme, at one screen width.

Template	Checks	Coverage	What the audit fixed
Agency Studio	22/22 passing	5 page types, light and dark, phone and desktop, plus the open mobile menu	Muted text and per-project accent colours raised to 4.5:1 Separate red for text and for button fills Closed mobile menu removed from the tab order Homepage h1 and heading order
AI SaaS Landing	40/40 passing	10 page types including docs, blog and auth, light and dark, phone and desktop	Subtle text, primary and accent tokens raised to 4.5:1 Closed docs sidebar removed from the tab order Main landmark on contact, login and signup Reduced-motion support, marquee pauses
Creative Portfolio	18/18 passing	4 page types, light and dark, phone and desktop, plus the open mobile menu	Coral accent and footer text raised to 4.5:1 Collapsed mobile menu removed from the tab order Scroll-reveal sections show on focus and with reduced motion 24px targets for the testimonial controls
DocsKit	30/30 passing	7 page types, light and dark, phone and desktop, plus the open docs drawer	Light syntax-highlighting theme for light mode Copy-code button visible on keyboard focus Scrollable code blocks and tables reachable by keyboard Separate violet for text and for fills
Elite CRM	46/46 passing	9 page types, dark and light, phone and desktop, plus the mobile menu and the deal and contact panels	Subtle, status and sidebar text raised to 4.5:1 in both themes Closed detail panel removed from the tab order, focus returns on close Valid dialog and description-list markup Main landmark and h1 on the login page
Fashion Storefront	18/18 passing	6 page types, phone and desktop, plus the cart drawer, a missing-size error and a filled bag	Faded secondary text raised to 4.5:1 Scrims and caption chips for text over photography Closed cart drawer removed from the tab order Size and colour selection announced, errors read out
AI Tools Directory	58/58 passing	13 page types, light and dark, phone and desktop, plus the mobile menu and search	Faint text raised to 4.5:1 in both themes Readable badges over collection and post covers Search button named on phones Heading order on every listing page
Keel SaaS Starter Kit	64/64 passing	13 page types signed in and out, dark and light, phone and desktop, plus menus, command menu and assistant	Dark ink on the gold gradients and avatars Faint text and gold accent raised to 4.5:1 Chat demo and marquee respect reduced motion Main landmarks on marketing and auth pages
Marginalia	52/52 passing	11 page types, light and dark, phone and desktop, plus both menus and an open citation	Separate terracotta and cite colours for text and fills Tertiary text raised to 4.5:1 in both themes Page heading on login and signup Links in text underlined, not colour-only
SaaS Dashboard Pro	62/62 passing	9 page types, light and dark, phone and desktop, plus every settings tab, the mobile menu, the user detail panel, the invite panel and the delete dialog	Muted, subtle and sidebar text raised to 4.5:1 Dark-mode classes follow the theme toggle, not the OS Slide panel removed from the tab order when closed User details open from the keyboard Named filters, icon buttons, table headers and form fields
Stockwell	40/40 passing	10 page types, light and dark, phone and desktop	Readable index numbers over product photos Stronger scrim behind editorial band text h1 on the empty checkout
Chit	40/40 passing	9 page types, dark and light, phone and desktop, plus the open ordering assistant	Separate flame red for text and for button fills Visible focus ring on the ordering assistant button h1 on the guest menu page Text over photography raised to 4.5:1
Relay	36/36 passing	6 page types signed in and out, dark and light, phone and desktop, plus menus, model picker and citations	No template changes were needed

Run the check yourself

Each template includes the check as scripts/a11y-check.mjs, with its routes listed in a11y.config.mjs. It exits with an error if anything fails, so it works in CI or as the last step after a coding agent edits the code. The agent files in every template tell Claude Code, Cursor and Codex to run it.

npx playwright install chromium   # first run only
npm run build
npm run test:a11y

What this covers

Automated checks catch a large share of real accessibility problems, including all the contrast, naming, landmark, heading and keyboard focus issues listed above. They can't judge everything. Alt text that is present but unhelpful, a confusing reading order, or how a screen reader announces a custom widget still need a person. These templates have not been through a full manual screen reader audit, and we don't claim they have. Once you add your own content and pages, run the check again, because the result depends on your changes too.

Browse the templates