Barrierefreies Designsystem

Barrierefrei von Grund auf,
konform von Anfang an

Vollständiger Satz barrierefreier, responsiver UI-Komponenten nach WCAG 2.1 Level AA-Richtlinien und Anforderungen des European Accessibility Act (EAA 2019/882). Speziell entwickelt für digitale Dienste der Behörden und des öffentlichen Sektors in ganz Europa.

WCAG 2.1 AA

EU Directive 2016/2102

EAA 2019/882

SP CORE dark theme - accessible design system

Dunkel

SP CORE light theme - accessible design system

Hell

Barrierefreiheits-Konformität für Behörden

Implementiert alle verbindlichen Barrierefreiheitsanforderungen für europäische Webanwendungen des öffentlichen Sektors gemäß EU-Richtlinie 2016/2102

Hochkontrast-Design

Integriertes Hochkontrast-Design mit Gelb-auf-Schwarz-Farbschema für Benutzer mit Sehschwäche. Erfüllt das WCAG AAA-Kontrastverhältnis (7:1+). Umschaltbar über das Einstellungsfeld, sitzungsübergreifend gespeichert.

Integrierter Screenreader

Integrierter Screenreader mit Wiedergabe-, Pause-, Vor- und Zurücksteuerung für die Seiteninhalt-Vorlesung. Vollständige ARIA-Labels und semantisches HTML. Kompatibel mit JAWS, NVDA, VoiceOver und TalkBack.

Tastaturnavigation

Vollständige Tastaturzugänglichkeit mit sichtbaren Fokus-Indikatoren. Sprunglink zum Hauptinhalt. Alle interaktiven Elemente per Tabulatortaste erreichbar.

Berührungszielgröße

Mindestens 44x44 Pixel große Berührungsziele auf allen interaktiven Elementen. Konform mit WCAG 2.5.5 (Level AAA) für motorische Barrierefreiheit.

Reduzierte Bewegung

Option zum Deaktivieren aller Animationen und Übergänge für Benutzer mit vestibulären Störungen. Berücksichtigt die Systemeinstellung prefers-reduced-motion.

Skalierbare Schrift

Einstellbare Schriftgröße von 75% bis 150%. Steuerung von Zeilenhöhe und Zeichenabstand. Alle Layouts bleiben bei 200% Zoom intakt.

Barrierefreie Typografie

Atkinson Hyperlegible Schrift

SP CORE verwendet Atkinson Hyperlegible als primäre Schriftart — eine Schrift, die vom Braille Institute speziell für sehbehinderte Leser entwickelt wurde. Ihre markanten Buchstabenformen maximieren die Zeichenerkennung und Lesbarkeit für Benutzer mit Sehbeeinträchtigungen.

Vom Braille Institute für maximale Lesbarkeit entwickelt

Klare Unterscheidung zwischen ähnlichen Zeichen (I, l, 1, 0, O)

Offene Aperturen und übertriebene Formen reduzieren Lesefehler

Kostenlos und quelloffen (SIL Open Font License)

Hervorragende Bildschirmdarstellung in allen Größen

Benutzer-Anzeigeeinstellungen

Alle Barrierefreiheitseinstellungen sind im Einstellungsfeld zentralisiert. Benutzereinstellungen werden im localStorage gespeichert und auf allen Seiten angewendet.

Einstellung Optionen

Design Hell, Dunkel, Hochkontrast

Schriftgröße 75% — 150% (5%-Schritte)

Zeilenhöhe Kompakt, Normal, Entspannt, Weit

Zeichenabstand Normal, Weit, Weiter

Bewegung reduzieren Ein / Aus

Vollständige Komponentenbibliothek

Über 20 produktionsreife Module — von grundlegenden Design-Tokens bis hin zu komplexen interaktiven Komponenten

Grundlagen

Animations Colors Icons Typography

Komponenten

17 Module

Alerts Avatars Badges Breadcrumbs Buttons Cards Charts Dropdowns Lists Loaders Modals & Panels Pagination Tables Tabs Tags Toasts Tooltips

Formulare

Inputs Selects Checkboxes & Radios Textareas Validation

Technische Spezifikationen

Für den Produktiveinsatz gebaut

SP CORE ist ohne Abhängigkeiten mit Vanilla JavaScript und einer sauberen BEM-basierten CSS-Architektur entwickelt. Konzipiert für die nahtlose Integration in jedes bestehende Projekt.

BEM-Namenskonvention mit .csg--Präfix

CSS Custom Properties mit Theme-Überschreibungen über [data-theme]

Mobile-First-Responsive-Design, Breakpoint bei 768px

Vanilla JS — keine Abhängigkeiten

localStorage-Persistierung für Benutzereinstellungen

Mindestens 44x44px Berührungsziele auf allen interaktiven Elementen

Browserunterstützung

Getestet und unterstützt in allen gängigen Browsern (letzte 2 Versionen).

Chrome

Firefox

Safari

Edge

SP CORE

Barrierefrei von Grund auf,konform von Anfang an