WCAG 2.1 AA

Built for
everyone Fuer alle
gebaut

Every page, every interactive course, every component. Designed to work for all users, regardless of how they access the web. Jede Seite, jeder interaktive Kurs, jede Komponente. Entwickelt fuer alle Nutzer, egal wie sie auf das Web zugreifen.

7 Core featuresKernfeatures
10+ Block types auditedBlock-Typen geprueft
2 LanguagesSprachen
0 Mouse requiredMaus noetig

What "accessible" meansWas "barrierefrei" bedeutet

KeyboardTastatur

Navigate without a mouseNavigieren ohne Maus

Screen readersScreenreader

VoiceOver, NVDA, JAWSVoiceOver, NVDA, JAWS

Reduced motionWeniger Bewegung

Animations respect preferencesAnimationen respektieren Praeferenzen

High contrastHoher Kontrast

All text meets 4.5:1 ratioAlle Texte erfuellen 4,5:1 Verhaeltnis

Assistive techAssistive Technologie

Any tool, any setupJedes Tool, jedes Setup

What we builtWas wir gebaut haben

Keyboard navigationTastaturnavigation

TabEnter↑↓Esc

Every element reachable and usableJedes Element erreichbar und bedienbar

Screen reader supportScreenreader-Support

ARIALive

Roles, labels, live regions for all changesRollen, Labels, Live-Regions fuer alle Aenderungen

Focus managementFokus-Management

TrapReturn

Cyan ring, modal traps, focus restoreCyan-Ring, Modal-Traps, Fokus-Restore

Reduced motionReduced Motion

CSSJS

All animations and Three.js respect preferencesAlle Animationen und Three.js respektieren Praeferenzen

Color contrastFarbkontrast

4.5:1AA

WCAG AA ratios on all textWCAG AA Verhaeltnisse auf allen Texten

Semantic HTMLSemantisches HTML

navarticle

Structure assistive tech can navigateStruktur fuer assistive Technologien

Skip linksSkip-Links

Tab→

Jump past headers to contentHeader ueberspringen zum Inhalt

Try it yourselfProbier es selbst

These are live demos. Use your keyboard, screen reader, or change your motion settings. Das sind Live-Demos. Nutze deine Tastatur, deinen Screenreader oder aendere deine Bewegungseinstellungen.

Try itKeyboard Reorder

Click an item, then use ↑ ↓ arrow keys to move it. No mouse needed.

1Accessibility
2Keyboard
3Screen Reader
Try itFocus Ring

Press Tab to navigate between buttons. The cyan ring shows where you are.

Try itLive Region

Click the button. A screen reader would announce the message. The visual feedback shows what gets spoken.

Screen reader will announce here...
See itColor Contrast

Side by side: the same text before and after our contrast fix. Small change, big difference.

Before

This hint text is hard to read at 0.35 opacity.

~1.9:1 contrast ratio

After

This hint text is readable at 0.75 opacity.

~4.7:1 contrast ratio ✓

See itReduced Motion

This animation respects your system's motion preference. Enable "Reduce motion" in your OS settings to see it pause.

prefers-reduced-motion

Every component, auditedJede Komponente, geprueft

The /learn section has 10+ interactive block types. Each one individually audited and tested. Der /learn Bereich hat 10+ interaktive Block-Typen. Jeder einzeln geprueft und getestet.

Quiz radiogroup

Radio group pattern. Results announced via live region. Focus moves to explanation after submit.Radio-Group-Pattern. Ergebnisse per Live-Region angekuendigt. Fokus springt nach Submit zur Erklaerung.

Fill-in combobox

Custom dropdowns with Arrow keys, Home/End, Escape. Uses combobox + listbox pattern.Custom-Dropdowns mit Pfeiltasten, Home/End, Escape. Nutzt Combobox + Listbox Pattern.

Sort listbox

Arrow keys to reorder items. Always-visible up/down buttons. No drag required.Pfeiltasten zum Umordnen. Immer sichtbare Hoch/Runter-Buttons. Kein Drag noetig.

Match pressed

Click left to select, click right to connect. Live feedback for each pair.Links klicken zum Auswaehlen, rechts zum Verbinden. Live-Feedback fuer jedes Paar.

Classify button

Tap item, tap category. Full keyboard with Enter/Space. Live region for feedback.Item tippen, Kategorie tippen. Volle Tastatur mit Enter/Space. Live-Region fuer Feedback.

Flow application

Visual canvas with collapsible keyboard panel. Add nodes via buttons, connect via dropdowns.Visuelles Canvas mit aufklappbarem Tastatur-Panel. Nodes per Button, Verbindungen per Dropdown.

Slider valuetext

Native range input with aria-valuetext. Three.js scene pauses on prefers-reduced-motion.Natives Range-Input mit aria-valuetext. Three.js-Szene pausiert bei prefers-reduced-motion.

Modal dialog

Focus trap keeps Tab inside. Escape closes. Focus returns to triggering element.Focus-Trap haelt Tab im Dialog. Escape schliesst. Fokus kehrt zum Ausloeserelement zurueck.

Standards + testingStandards + Tests

Keyboard-onlyNur Tastatur
VoiceOver + NVDA
DevTools Audit
Motion Simulation

Found a barrier?Eine Barriere gefunden?

If something doesn't work with your assistive technology,
let me know. I'll fix it. Wenn etwas nicht mit deiner assistiven Technologie funktioniert,
sag Bescheid. Ich behebe es.