Accessibility linter

The accessibility linter is the first feature in @templatical/quality. It's an MIT-licensed accessibility checker for Templatical email templates that operates on the JSON TemplateContent block tree, runs in the browser or in Node.js, and ships with no Vue or DOM dependencies — so the same package validates templates inside the editor and as a CI gate on stored fixtures.

Why

Email accessibility is genuinely under-tooled. Most builders either bury accessibility behind a paywall, run shallow content-tone checks, or skip it entirely. We catch the authoring mistakes that recur every day:

• Missing or filename-style alt text
• Low-contrast text and buttons
• Vague link / CTA copy ("click here", "read more")
• Heading-level skips that break the document outline
• Tiny body text, oversized all-caps blocks, undersized touch targets
• target="_blank" links missing rel="noopener"
• Decorative images with leftover alt text

Catch problems while you're authoring, not after recipients see broken alt text, unreadable contrast, or vague CTAs. Every rule fires on a clear, named condition, so the output is predictable and stays predictable as templates evolve. The same checks align with the EU Accessibility Act (enforceable June 2025).

Architecture

The package has no opinion on UI. The editor's useAccessibilityLint composable lazy-imports @templatical/quality, debounces re-lint on content changes, and wires applyFix(issue) through the editor's existing block-update path so fixes land as proper undo entries.

Install

npm

npm install @templatical/quality

pnpm

pnpm add @templatical/quality

yarn

yarn add @templatical/quality

bun

bun add @templatical/quality

The package is an optional peer of @templatical/editor. Install it to turn on the sidebar tab and canvas badges. Skip it and the editor stays lean — the dynamic import is gated and tree-shakeable, so the linter chunk never downloads.

CDN users

If you load Templatical via CDN, there's nothing to install. The editor's CDN bundle ships @templatical/quality as a separate code-split chunk that lazy-loads automatically when the linter is enabled.

Quick links

• Getting started — first lint call (headless), wiring into the editor.
• Rule catalog — every rule with severity, rationale, and examples.
• Options — disabled, locale, rules, thresholds.
• Severity & fixes — how the severity model works and how auto-fix patches are applied.
• Headless usage — validating stored templates in CI.
• Contributing locales — adding vague-text dictionaries for new languages.