Barrierefreiheits-Linter

Der Barrierefreiheits-Linter ist die erste Funktion in @templatical/quality. Es ist ein MIT-lizenzierter Barrierefreiheits-Prüfer für Templatical-E-Mail-Templates, der auf dem JSON-TemplateContent-Blockbaum arbeitet, im Browser oder in Node.js läuft und ohne Vue- oder DOM-Abhängigkeiten ausgeliefert wird – dasselbe Paket validiert Templates also sowohl im Editor als auch als CI-Gate auf gespeicherten Fixtures.

Warum

Barrierefreiheit bei E-Mails ist tatsächlich unterversorgt. Die meisten Builder verstecken Barrierefreiheit hinter einer Bezahlschranke, führen oberflächliche Tonalitätsprüfungen durch oder lassen sie ganz weg. Wir fangen die Autorenfehler ab, die täglich wiederkehren:

• Fehlender oder dateiname-artiger Alt-Text
• Text und Buttons mit zu geringem Kontrast
• Vage Link- / CTA-Texte ("hier klicken", "mehr lesen")
• Übersprungene Überschriftenebenen, die das Dokumentgerüst zerstören
• Winziger Fließtext, überdimensionierte Großbuchstaben-Blöcke, zu kleine Touch-Ziele
• target="_blank"-Links ohne rel="noopener"
• Dekorative Bilder mit übrig gebliebenem Alt-Text

Probleme erkennen, während Sie schreiben – nicht erst, nachdem Empfänger kaputten Alt-Text, unleserlichen Kontrast oder vage CTAs sehen. Jede Regel reagiert auf eine klare, benannte Bedingung; die Ausgabe ist vorhersehbar und bleibt es, während sich Templates weiterentwickeln. Dieselben Prüfungen decken sich mit dem European Accessibility Act (durchsetzbar ab Juni 2025).

Architektur

Das Paket macht keine Vorgaben zur UI. Das useAccessibilityLint-Composable des Editors lädt @templatical/quality per Lazy-Import, entprellt das erneute Linten bei Inhaltsänderungen und schleust applyFix(issue) durch den vorhandenen Block-Update-Pfad des Editors – Korrekturen landen also als saubere Undo-Einträge.

Installation

npm

npm install @templatical/quality

pnpm

pnpm add @templatical/quality

yarn

yarn add @templatical/quality

bun

bun add @templatical/quality

Das Paket ist ein optionaler Peer von @templatical/editor. Installieren Sie es, um den Sidebar-Tab und die Canvas-Badges zu aktivieren. Lassen Sie es weg, bleibt der Editor schlank – der dynamische Import ist gegated und tree-shakeable, sodass der Linter-Chunk nie heruntergeladen wird.

CDN-Nutzer

Wenn Sie Templatical per CDN laden, gibt es nichts zu installieren. Das CDN-Bundle des Editors liefert @templatical/quality als separaten code-split-Chunk aus, der automatisch per Lazy-Load geladen wird, sobald der Linter aktiv ist.

Schnellzugriff

• Erste Schritte – erster Lint-Aufruf (Headless), Anbindung an den Editor.
• Regelkatalog – jede Regel mit Schweregrad, Begründung und Beispielen.
• Optionen – disabled, locale, rules, thresholds.
• Schweregrad & Korrekturen – wie das Schweregradmodell funktioniert und wie Auto-Fix-Patches angewendet werden.
• Headless-Nutzung – gespeicherte Templates in CI validieren.
• Lokale beitragen – Vague-Text-Wörterbücher für neue Sprachen ergänzen.