ND-freundliches Webdesign — UX für die übersehenen 20 %
Zuletzt aktualisiert: April 2026 · Lesezeit: 8 Minuten
Die übersehene Accessibility-Zielgruppe
Wenn Teams über Barrierefreiheit sprechen, denken die meisten an Screenreader, Farbkontraste, Tastatur-Navigation. Das ist richtig und wichtig. Es ist aber nur ein Teil des Bildes.
Rund 15–20 % aller Nutzer sind neurodivergent — das heißt, sie verarbeiten Information anders. ADHS, Autismus-Spektrum, Hochsensibilität, LRS und Dyskalkulie gehören dazu (CDC 2023, NIH 2024). Für diese Nutzer entscheidet nicht der Farbkontrast, sondern der Reiz-Haushalt. Nicht das ARIA-Label, sondern die Satzlänge. Nicht die Tab-Reihenfolge, sondern die Vorhersehbarkeit der Navigation.
Der Neurodivergenz-Selbsttest zeigt, in welchen dieser vier Bereiche du selbst Muster erkennst. Dieser Artikel zeigt, was daraus für digitale Produkte folgt.
Warum ND-Freundlichkeit direkt das BFSG erfüllt
Seit Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG) für viele Unternehmen im B2C-Bereich. Der Mindeststandard ist WCAG 2.1 AA. Drei Erfolgskriterien treffen ND-Nutzer besonders:
- 3.1.5 Lesbarkeit (AAA): verständliche Sprache für Nutzer mit geringerer Lesekompetenz — deckt LRS ab.
- 2.2.2 Pausieren, Stoppen, Ausblenden (A): automatisch bewegte Inhalte pausierbar — deckt HSP und ADHS ab.
- 3.2.3 Konsistente Navigation (AA): gleiche Elemente an gleicher Stelle — deckt Autismus-Spektrum ab.
Wer ND-freundlich baut, erfüllt diese Kriterien automatisch. Wer nur WCAG-Checklisten abarbeitet, übersieht oft die ND-Nutzer.
Vier Prinzipien für ND-freundliche UX
01 Klare Sprache
Kurze Sätze, aktive Verben, konkrete Substantive. Zielniveau B1–B2 für Hauptnavigation und Fehlertexte. Reduziert Last für LRS-Nutzer, kognitiv erschöpfte Nutzer und alle, die scannen statt lesen.
02 Reduzierte Reize
Keine Auto-Play-Videos. Keine rotierenden Banner. Keine Notification-Flut. Bewegung nur nach Nutzer-Intent und respektiert `prefers-reduced-motion`. Audio-Kontext niemals überraschend.
04 Großzügige Fehler-Toleranz
Formulare, die mit Tippfehlern und Reihenfolgen umgehen. Undo-Optionen und Zwischenspeichern. Bestätigung vor irreversiblen Aktionen. Klare, hilfreiche Fehler-Texte statt „Ungültige Eingabe".
Vier konkrete Muster aus unserer Praxis
Prinzipien sind abstrakt. Hier sind vier Patterns, die wir in Kundenprojekten umgesetzt haben und die messbar den Unterschied machen.
Formulare mit Auto-Save und sichtbarem Fortschritt
Jeder Feld-Wechsel speichert den Zwischenstand. Nutzer sieht eine dezente „Gespeichert"-Meldung. Browser-Tab schließen oder Netzverbindung verlieren verliert keine Eingaben. ADHS-Nutzer mit Zeitblindheit profitieren am meisten.
Typografie-Stellschrauben für LRS
Mindest-Schriftgröße 18 px, Zeilenhöhe 1.6, max. 75 Zeichen pro Zeile. Optionale „OpenDyslexic"-Schrift per Toggle. Absätze nicht länger als 3–4 Sätze. Senkt Leseanstrengung für LRS-Nutzer um bis zu 40 % (British Dyslexia Association 2023).
Reiz-Reduktion als Theme-Option
Neben Light- und Dark-Mode einen dritten Modus „Fokus" anbieten: keine Animationen, monochrome Akzente, breitere Abstände, größere Touch-Targets. Ein Klick vom Theme-Toggle aus erreichbar. HSP- und Autismus-Nutzer bleiben länger auf der Seite.
Vorhersehbare CTA-Positionierung
Primärer CTA immer rechts, sekundärer immer links, tertiärer nur als Text-Link. Keine Floating-Buttons, die je nach Scrolltiefe die Position wechseln. Autismus- Nutzer bauen mentale Karten — die zerstört man nicht.
Wie ihr ND-UX messen könnt
Standard-UX-Metriken (Bounce, Time-on-Page, Conversion) reichen nicht. Ergänzt sie durch:
Qualitativ helfen Methoden wie Moderierte Sessions mit ND-Nutzern — etwa über Fable oder eigene Tester-Pools. Sie zeigen Muster, die keine Heatmap sichtbar macht: etwa den Moment, in dem ein Nutzer aussteigt, weil drei Reize gleichzeitig konkurrieren.
Wie arocom ND-freundlich baut
Wir prüfen in unseren Projekten standardmäßig gegen zwei Ebenen: die WCAG-2.1-AA-Checklist und eine eigene ND-Heuristik. Die Heuristik umfasst unter anderem:
- Reiz-Inventar pro Seite: wie viele konkurrierende Bewegungen, Farben, Elemente laufen parallel?
- Sprach-Score: Hemingway-App für Lesbarkeit, Ziel B1–B2 in Navigation und Fehlertexten.
- Reversibilitäts-Check: welche Aktionen sind irreversibel, welche brauchen Bestätigung?
- Konsistenz-Audit: treten gleiche Funktionen an unterschiedlichen Stellen unterschiedlich auf?
Das Ergebnis fließt in die Leistung Entwicklung und in den Zukunfts-Check ein.
Häufige Fragen
Ist ND-freundliches Design nicht einfach gutes UX für alle?
Teilweise. Klare Sprache und vorhersehbare Navigation nutzen allen. Aber bestimmte Entscheidungen — OpenDyslexic als Option, Auto-Save pro Feld, Fokus-Mode — helfen ND-Nutzern spürbar mehr. Neurotypische merken sie nicht, ND-Nutzer spüren den Unterschied zwischen „funktioniert" und „funktioniert nicht".
Muss ich WCAG 2.2 oder reicht 2.1 AA?
Das BFSG fordert EN 301 549 und damit WCAG 2.1 AA als Mindest-Level. WCAG 2.2 bringt 9 neue Kriterien, die ND-Nutzer zusätzlich adressieren — etwa 3.3.7 „Redundant Entry" (weniger Tipparbeit in Formularen). Wir bauen neue Projekte direkt gegen 2.2.
Wie weit muss eine Startseite klar-sprachig sein?
Hauptnavigation und CTAs: B1–B2. Einleitungs-Texte: B2. Fach-Artikel: B2–C1 erlaubt, solange mindestens eine Zusammenfassung auf B1-Niveau existiert. Der arocom-Redaktions-Workflow prüft Hemingway-Readability für jeden neuen Artikel.
Müssen wir eine Dyslexie-Schrift anbieten?
Nicht zwingend, aber empfehlenswert. Studien sind gemischt (Wery/Diliberto 2017), aber: einige LRS-Nutzer schwören darauf, und die Option kostet wenig (Webfont + Toggle). Als Standard- Font eignen sich stattdessen leicht unterscheidbare Sans-Serifen wie Atkinson Hyperlegible, Lexend oder Inter.
Wie steht es um Inklusion & Barrierefreiheit auf eurer Website? Der Zukunfts-Check zeigt in 2–4 Wochen, wo die größten Hebel liegen.
Kopiert diesen Prompt und fügt ihn in ChatGPT, Claude oder eine andere KI ein — ihr bekommt einen persönlichen Lernplan zu „ND-freundliches Webdesign“.
Du bist ein erfahrener Coach für Inklusion & Barrierefreiheit. Ich möchte das Thema "ND-freundliches Webdesign" verstehe...War dieser Artikel hilfreich?