Design für Barrierefreiheit Best Practices

Überblick

Design für Barrierefreiheit bedeutet, Erfahrungen zu schaffen, die für die größtmögliche Bandbreite an Benutzern funktionieren, einschließlich Menschen mit Behinderungen. Barrierefreies Design ist keine Einschränkung – es ist eine Chance, bessere Produkte für alle zu schaffen.

Dieser umfassende Leitfaden behandelt Best Practices für die Gestaltung barrierefreier digitaler Erfahrungen, von Farbe und Typografie bis hin zu interaktiven Elementen und Navigation. Durch Befolgung dieser Prinzipien können Designer inklusive Produkte schaffen, die WCAG-Standards erfüllen und exzellente Benutzererfahrungen für alle bieten.

Prinzipien inklusiven Designs

Inklusives Design ist eine Methodik, die die volle Bandbreite menschlicher Vielfalt in Bezug auf Fähigkeiten, Sprache, Kultur, Geschlecht, Alter und andere Formen menschlicher Unterschiede berücksichtigt.

Design-Philosophie

Für Einen entwerfen, auf Viele erweitern

Das Entwerfen für Benutzer mit spezifischen Barrierefreiheitsbedürfnissen führt oft zu Verbesserungen, die allen zugutekommen. Zum Beispiel:

• Untertitel: Ursprünglich für gehörlose Benutzer, jetzt von Menschen in lauten Umgebungen, Nicht-Muttersprachlern und allen verwendet
• Bordsteinabsenkungen: Für Rollstuhlfahrer konzipiert, helfen auch Eltern mit Kinderwagen, Lieferanten, Reisenden mit Gepäck
• Sprachsteuerung: Essentiell für Benutzer mit motorischen Beeinträchtigungen, praktisch für Freisprechsituationen
• Hoher Kontrast: Kritisch für Benutzer mit Sehbehinderung, hilfreich bei hellem Sonnenlicht

Shift-Left-Barrierefreiheit

Integrieren Sie Barrierefreiheit von Beginn des Design-Prozesses an:

• Recherchephase: Beziehen Sie Benutzer mit Behinderungen in die Benutzerforschung ein
• Ideenfindungsphase: Berücksichtigen Sie Barrierefreiheitsbeschränkungen und -möglichkeiten
• Wireframing: Planen Sie barrierefreie Struktur und Navigation
• Visuelles Design: Stellen Sie Farbkontrast und Lesbarkeit sicher
• Prototyping: Testen Sie früh mit unterstützenden Technologien

Nichts über uns ohne uns

Beziehen Sie Menschen mit Behinderungen während des gesamten Design-Prozesses ein:

• Führen Sie Benutzerforschung mit diversen Teilnehmern durch
• Beziehen Sie Barrierefreiheitsexperten in Design-Reviews ein
• Testen Sie Prototypen mit Benutzern unterstützender Technologien
• Sammeln Sie Feedback von der Behinderten-Community
• Stellen Sie Designer mit Behinderungen ein

Verständnis der Benutzervielfalt

Berücksichtigen Sie das breite Spektrum an Fähigkeiten und Situationen:

Visuelle Behinderungen

• Blindheit: Verlassen sich auf Screen Reader, benötigen Alternativtext und semantische Struktur
• Sehbehinderung: Können Bildschirmvergrößerung, hohen Kontrast oder größeren Text verwenden
• Farbenblindheit: Können bestimmte Farben nicht unterscheiden (Rot/Grün am häufigsten)
• Lichtempfindlichkeit: Profitieren von Dunkelmodi und reduzierter Bewegung

Motorische Behinderungen

• Eingeschränkte Mobilität: Können nur Tastatur, Switch-Zugang oder Eye-Tracking verwenden
• Tremor: Profitieren von großen Touch-Zielen und Fehlertoleranz
• Temporäre Verletzung: Können Einschränkungen bei einhändiger Bedienung haben

Hörbehinderungen

• Gehörlosigkeit: Benötigen Untertitel für Videoinhalte
• Schwerhörigkeit: Können Lautstärkeregler und visuelle Indikatoren verwenden

Kognitive Behinderungen

• Lernbehinderungen: Profitieren von klarer Sprache und konsistenten Mustern
• Gedächtnisprobleme: Benötigen klare Navigation und Fortschrittsindikatoren
• Aufmerksamkeitsstörungen: Profitieren von reduzierten Ablenkungen und klarem Fokus
• Autismus: Bevorzugen möglicherweise reduzierte Animationen und vorhersehbare Interaktionen

Situationsbedingte Einschränkungen

• Helles Sonnenlicht: Probleme mit der Bildschirmsichtbarkeit
• Laute Umgebung: Audio kann nicht gehört werden
• Ruhige Umgebung: Spracheingabe kann nicht verwendet werden
• Eine Hand besetzt: Baby halten, Taschen tragen usw.

Farbe und Kontrast

Farbe ist ein mächtiges Design-Werkzeug, muss jedoch sorgfältig verwendet werden, um Barrierefreiheit zu gewährleisten.

Kontrastverhältnisse

WCAG definiert minimale Kontrastverhältnisse, um sicherzustellen, dass Text und interaktive Elemente wahrnehmbar sind:

Textkontrast-Anforderungen

• Normaler Text (unter 18pt): 4.5:1 Minimum (WCAG AA)
• Großer Text (18pt+ oder 14pt+ fett): 3:1 Minimum (WCAG AA)
• Erweitert (AAA): 7:1 für normalen Text, 4.5:1 für großen Text

Nicht-Text-Kontrast-Anforderungen

• UI-Komponenten: 3:1 Kontrast gegen angrenzende Farben (Buttons, Formularfelder usw.)
• Fokus-Indikatoren: 3:1 Kontrast gegen Hintergrund
• Grafische Objekte: 3:1 Kontrast für bedeutungsvolle Grafiken

Kontrast-Test-Tools

• WebAIM Contrast Checker: webaim.org/resources/contrastchecker
• Stark (Figma/Sketch Plugin): Integrierte Kontrastprüfung
• Colour Contrast Analyser: Desktop-Anwendung
• Adobe Color: Enthält Barrierefreiheitsprüfer

Farbe als Kommunikation

Verlassen Sie sich niemals allein auf Farbe zur Informationsvermittlung. Bieten Sie immer zusätzliche visuelle Hinweise.

Häufige Probleme

• Formularvalidierung: Verwenden Sie nicht nur Rot/Grün zur Anzeige von Fehlern/Erfolg
• Diagramme: Verlassen Sie sich nicht ausschließlich auf Farbe zur Unterscheidung von Daten
• Statusanzeigen: Kombinieren Sie Farbe mit Icons oder Text
• Links: Verlassen Sie sich nicht nur auf Farbe zur Kennzeichnung von Links

Best Practices

• Fehlerzustände: Verwenden Sie rote Farbe + Fehlersymbol + Fehlertext
• Erfolgszustände: Verwenden Sie grüne Farbe + Häkchen-Symbol + Erfolgstext
• Diagramme: Verwenden Sie Muster, Beschriftungen und Farbe zusammen
• Links: Verwenden Sie Unterstreichung oder andere visuelle Unterscheidung jenseits der Farbe
• Pflichtfelder: Verwenden Sie Sternchen oder "erforderlich"-Text, nicht nur Farbe

Barrierefreie Farbpaletten

Erstellen Sie Farbsysteme, die für alle funktionieren:

Erstellen barrierefreier Paletten

1. Beginnen Sie mit einer Grundfarbe
2. Erstellen Sie helle und dunkle Variationen
3. Testen Sie jede Kombination auf Kontrast
4. Testen Sie mit Farbenblindheits-Simulatoren
5. Dokumentieren Sie genehmigte Kombinationen

Tools zum Erstellen von Paletten

• Adobe Color: Farbenblindheits-Simulation und Barrierefreiheits-Tools
• Coolors: Generieren barrierefreier Farbschemata
• Leonardo: Adobes adaptives Farbpaletten-Tool
• Accessible Color Generator: learnui.design/tools/accessible-color-generator.html

Überlegungen zur Farbenblindheit

• Deuteranopie (Rot-Grün): Am häufigsten, betrifft ~5% der Männer
• Protanopie (Rot-Grün): Zweithäufigste
• Tritanopie (Blau-Gelb): Selten
• Mit Simulatoren testen: Stellen Sie sicher, dass Paletten für alle Typen funktionieren

Typografie

Typografie ist grundlegend für Lesbarkeit und Barrierefreiheit. Durchdachte typografische Entscheidungen machen Inhalte für Benutzer mit Legasthenie, Sehbehinderung und kognitiven Behinderungen zugänglich.

Schriftauswahl

Empfohlene Schriftmerkmale

• Serifenlos: Allgemein besser lesbar am Bildschirm (Arial, Helvetica, Open Sans, Roboto)
• Klare Buchstabenformen: Eindeutige Zeichen (vermeiden Sie mehrdeutige 'l', 'I', '1')
• Angemessene x-Höhe: Größere x-Höhe verbessert Lesbarkeit bei kleinen Größen
• Dekorative Schriften vermeiden: Für Fließtext (sparsam für Überschriften verwenden)
• OpenDyslexic: Erwägen Sie es als Option für Benutzer mit Legasthenie anzubieten

Zu vermeidende Schriften

• Script- oder Handschrift-Schriften für Fließtext
• Schriften mit sehr dünnen Strichen
• Komplett in Großbuchstaben gesetzte Schriften (schwerer zu lesen)
• Übermäßig verdichtete oder erweiterte Schriften

Textgröße und Skalierung

Mindestgrößen

• Fließtext: 16px Minimum (1rem)
• Kleiner Text: 14px Minimum (0.875rem)
• Großer Text: 18px+ (1.125rem+)
• Überschriften: Progressive Skala (H1 größte, H6 kleinste)

Relative Einheiten

• Verwenden Sie rem oder em anstelle von Pixeln
• Ermöglicht Benutzern, Text mit Browsereinstellungen zu skalieren
• Stellt sicher, dass Text bei 200% Zoom korrekt skaliert

h1 { font-size: 2.5rem; }    /* 40px */
h2 { font-size: 2rem; }      /* 32px */
h3 { font-size: 1.75rem; }   /* 28px */
h4 { font-size: 1.5rem; }    /* 24px */
h5 { font-size: 1.25rem; }   /* 20px */
h6 { font-size: 1rem; }      /* 16px */
body { font-size: 1rem; }    /* 16px */
small { font-size: 0.875rem; } /* 14px */

Zeilenhöhe und Abstände

Zeilenhöhe (Durchschuss)

• Fließtext: 1.5 Minimum (WCAG-Anforderung)
• Überschriften: 1.2-1.3 (enger ist akzeptabel)
• Längere Zeilen: Erhöhen Sie die Zeilenhöhe auf 1.6-1.8

Absatzabstand

• Zwischen Absätzen: 1.5-2x die Zeilenhöhe
• Nach Überschriften: 0.5-1x Überschriften-Zeilenhöhe

Buchstabenabstand

• Fließtext: 0.12em Minimum zwischen Buchstaben
• Wortabstand: 0.16em Minimum zwischen Wörtern
• Enges Tracking vermeiden: Besonders bei Versalien

Zeilenlänge

• Optimal: 50-75 Zeichen pro Zeile
• Maximum: 80 Zeichen pro Zeile
• Zu kurz: Unter 40 Zeichen (abgehacktes Lesen)
• Zu lang: Über 100 Zeichen (Augenermüdung)

Textausrichtung

• Linksbündig: Am besten für Links-nach-Rechts-Sprachen
• Blocksatz vermeiden: Erzeugt ungleichmäßige Abstände (schwierig für legasthenische Benutzer)
• Zentriert: Sparsam verwenden (Überschriften, kurze Blöcke)
• Rechtsbündig: Nur für Rechts-nach-Links-Sprachen oder Design-Akzent

Layout und Abstände

Gut gestaltete Layouts mit angemessenen Abständen verbessern das Verständnis und reduzieren die kognitive Belastung.

Visuelle Hierarchie

Eine klare visuelle Hierarchie hilft allen Benutzern, die Inhaltsstruktur zu verstehen:

Hierarchie etablieren

• Größe: Größere Elemente erscheinen wichtiger
• Gewicht: Fetter Text zieht Aufmerksamkeit auf sich
• Farbe: Elemente mit hohem Kontrast fallen auf
• Abstand: Mehr Raum um wichtige Elemente
• Position: Oben links erhält die meiste Aufmerksamkeit (in LTR-Sprachen)

Überschriften-Hierarchie

• Verwenden Sie progressive Größen (H1 > H2 > H3 usw.)
• Überspringen Sie keine Überschriftenebenen
• Stellen Sie sicher, dass visuelle Hierarchie mit semantischer Hierarchie übereinstimmt
• Verwenden Sie durchgehend konsistente Überschriftenstile

Weißraum

Weißraum (Negativraum) ist essentiell für Lesbarkeit und Verständnis:

Vorteile von Weißraum

• Reduziert visuelle Unordnung
• Verbessert Fokus und Aufmerksamkeit
• Trennt Inhaltsgruppen
• Bietet visuellen Freiraum
• Erhöht ästhetische Anziehungskraft

Abstands-System

Verwenden Sie eine konsistente Abstands-Skala:

4px  (0.25rem) - Winzig
8px  (0.5rem)  - Klein
16px (1rem)    - Mittel (Basis)
24px (1.5rem)  - Groß
32px (2rem)    - XGroß
48px (3rem)    - XXGroß
64px (4rem)    - Riesig

Responsives Design

Barrierefreies Design muss über alle Bildschirmgrößen hinweg funktionieren:

Mobile-First-Ansatz

• Entwerfen Sie zuerst für den kleinsten Bildschirm
• Erweitern Sie progressiv für größere Bildschirme
• Stellen Sie sicher, dass Touch-Ziele angemessen sind (44x44px Minimum)
• Testen Sie bei verschiedenen Viewport-Größen

Breakpoints

• Mobil: 320px - 767px
• Tablet: 768px - 1023px
• Desktop: 1024px+
• Großer Desktop: 1440px+

Responsive Typografie

• Skalieren Sie Schriftgrößen für jeden Breakpoint angemessen
• Passen Sie Zeilenlänge für Lesbarkeit an
• Behalten Sie Kontrast bei allen Größen bei
• Testen Sie Zoom-Funktionalität bis zu 200%

Interaktive Elemente

Buttons, Links und andere interaktive Elemente müssen klar identifizierbar und einfach zu bedienen sein.

Buttons

Button-Design Best Practices

• Klare Affordanz: Sollte klick-/tippbar aussehen
• Angemessene Größe: Minimum 44x44px (mobil), 32x32px (Desktop)
• Ausreichender Kontrast: 3:1 gegen Hintergrund
• Klare Beschriftung: Beschreibender Text (nicht nur Icons)
• Konsistenter Stil: Primär-, Sekundär-, Tertiär-Hierarchie

Button-Zustände

Gestalten Sie klare visuelle Zustände für alle Interaktionen:

• Standard: Normaler Zustand
• Hover: Maus darüber (nur Desktop)
• Fokus: Tastaturfokus (kritisch für Barrierefreiheit)
• Aktiv: Wird gedrückt/geklickt
• Deaktiviert: Nicht interaktiv (trotzdem wahrnehmbar sicherstellen)

Button-Varianten

• Primär: Haupt-Call-to-Action (einer pro Bildschirm/Abschnitt)
• Sekundär: Alternative Aktionen
• Tertiär/Ghost: Weniger prominente Aktionen
• Destruktiv: Löschen, Entfernen-Aktionen (verwenden Sie Rot vorsichtig)

Links

Link-Design

• Visuell unterschiedlich: Unterstrichen oder deutlich vom Fließtext unterscheidbar
• Farbe + Unterstreichung: Verlassen Sie sich nicht nur auf Farbe
• Angemessene Größe: Groß genug zum einfachen Klicken/Tippen
• Beschreibender Text: Vermeiden Sie "hier klicken" oder "mehr lesen"
• Besuchter Zustand: Erwägen Sie, besuchte Links anders anzuzeigen

Link-Zustände

• Standard: Normale Link-Erscheinung
• Hover: Änderung bei Maus darüber
• Fokus: Sichtbarer Fokus-Indikator
• Aktiv: Wird geklickt
• Besucht: Zuvor besucht (optional aber hilfreich)

Fokus-Indikatoren

Fokus-Indikatoren sind kritisch für Tastaturbenutzer. Sie müssen klar sichtbar sein.

Anforderungen an Fokus-Indikatoren

• Sichtbar: Muss leicht zu sehen sein
• Hoher Kontrast: 3:1 Kontrast gegen Hintergrund
• Ausreichende Dicke: 2px Minimum Umriss
• Konsistent: Gleicher Stil über alle fokussierbaren Elemente
• Niemals entfernen: Verwenden Sie outline: none nicht ohne Ersatz

Fokus-Indikator-Muster

• Umriss: Einfacher Rahmen um Element
• Glow/Shadow: Weicher Schatteneffekt
• Inset: Innerer Rahmen oder Inset-Schatten
• Unterstreichung: Für Text-Links
• Hintergrundänderung: Kombiniert mit Umriss

/* Einfacher Umriss */
button:focus {
  outline: 2px solid #0052CC;
  outline-offset: 2px;
}

/* Glow-Effekt */
button:focus {
  box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.5);
  outline: none; /* Nur wenn durch sichtbare Alternative ersetzt */
}

/* Kombinierter Ansatz */
a:focus {
  outline: 2px solid #0052CC;
  outline-offset: 2px;
  background-color: rgba(0, 82, 204, 0.1);
}

Touch-Ziele

Touch-Ziele müssen groß genug für präzise Interaktion sein:

Größenanforderungen

• Mobil (iOS): 44x44pt Minimum
• Mobil (Android): 48x48dp Minimum
• Desktop: 24x24px Minimum (32x32px empfohlen)

Abstand zwischen Zielen

• <strong>Mobil:</strong> 8px Mindestabstand zwischen Zielen
• <strong>Desktop:</strong> 4px Mindestabstand
• Mehr Abstand reduziert Tippfehler

Formular-Design

Formulare sind kritische Interaktionspunkte. Barrierefreies Formular-Design stellt sicher, dass alle Benutzer erfolgreich Informationen eingeben können.

Labels und Anweisungen

Label Best Practices

• Immer sichtbar: Verwenden Sie niemals Platzhaltertext als Labels
• Position: Über oder links von Eingabefeldern
• Klarer Text: Prägnante, beschreibende Labels
• Pflichtfelder: Deutlich mit Sternchen UND Text markieren
• Optionale Felder: Erwägen Sie Markierung als "(optional)"

Anweisungen

• Geben Sie Anweisungen vor dem Formular
• Verwenden Sie Hilfetext für komplexe Felder
• Zeigen Sie Formatbeispiele (z.B. "TT.MM.JJJJ")
• Platzieren Sie Hilfetext in der Nähe des relevanten Feldes

Fehlerbehandlung und Validierung

Fehlermeldungs-Design

• Klare Sprache: Erklären Sie, was schiefgelaufen ist und wie es zu beheben ist
• Spezifisch: Sagen Sie nicht nur "Fehler" - seien Sie beschreibend
• Sichtbar: Platzieren Sie in der Nähe des Feldes mit dem Fehler
• Symbol + Farbe + Text: Verlassen Sie sich nicht nur auf Farbe
• Persistent: Blenden Sie kritische Fehler nicht automatisch aus

Fehler-Zusammenfassung

• Listen Sie alle Fehler oben im Formular auf
• Verlinken Sie zu Feldern mit Fehlern
• Kündigen Sie Screen Readers an
• Verschieben Sie Fokus zur Fehler-Zusammenfassung

Inline-Validierung

• Geben Sie Echtzeit-Feedback (nachdem Feld ausgefüllt ist)
• Zeigen Sie Erfolgszustände für gültige Eingaben
• Zeigen Sie keine Fehler bevor Benutzer mit Tippen fertig ist
• Verwenden Sie Häkchen oder andere visuelle Indikatoren

Eingabefeld-Design

Eingabefeld-Eigenschaften

• Angemessene Größe: Minimum 44x44px Touch-Ziel
• Klare Rahmen: 3:1 Kontrast gegen Hintergrund
• Padding: Ausreichendes internes Padding für Text
• Platzhaltertext: Sparsam verwenden, niemals als Label-Ersatz

Eingabe-Zustände

• Standard: Leer, bereit für Eingabe
• Fokus: Klarer Fokus-Indikator
• Ausgefüllt: Enthält Benutzereingabe
• Fehler: Enthält ungültige Eingabe
• Erfolg: Enthält gültige Eingabe
• Deaktiviert: Nicht bearbeitbar (trotzdem wahrnehmbar)

Gruppierung verwandter Felder

• Verwenden Sie Fieldsets zur Gruppierung verwandter Eingaben
• Geben Sie Legende für jedes Fieldset an
• Visuelle Gruppierung sollte mit semantischer Gruppierung übereinstimmen

Navigations-Design

Navigation ist essentiell damit Benutzer Inhalte finden und Aufgaben erledigen können.

Menü-Design

Primäre Navigation

• Klare Labels: Beschreibende, prägnante Menüpunkte
• Logische Reihenfolge: Wichtigste Punkte zuerst
• Begrenzte Punkte: 5-7 Top-Level-Punkte Maximum
• Aktuelle Seite: Aktuellen Standort klar anzeigen
• Konsistent: Gleich auf jeder Seite

Mobile Navigation

• Hamburger-Menü: Erkenne Einschränkungen, erwäge Alternativen
• Touch-Ziele: 44x44px Minimum
• Klares Öffnen/Schließen: Offensichtlicher Menü-Zustand
• Fokus-Management: Verschiebe Fokus zum Menü wenn geöffnet

Dropdown-Menüs

• Tastatur-zugänglich: Pfeiltasten zur Navigation
• Hover-Intent: Lösen Sie nicht bei versehentlichem Hover aus
• Schließ-Mechanismus: Escape-Taste schließt
• Fokus sichtbar: Zeigen Sie Fokus auf Menüpunkten

Breadcrumbs

• Zeigen Sie aktuelle Position in Seitenhierarchie
• Trennen Sie Punkte mit klaren Trennzeichen (nicht nur Farbe)
• Machen Sie Links einfach klickbar
• Markieren Sie aktuelle Seite (nicht klickbar)

Skip-Navigation

• Bieten Sie "Zum Hauptinhalt springen"-Link
• Machen Sie sichtbar bei Fokus
• Platzieren Sie als erstes fokussierbares Element
• Springen Sie zum Hauptinhalt-Landmark

Bewegung und Animation

Bewegung kann die Benutzererfahrung verbessern, muss aber vorsichtig verwendet werden, um vestibuläre Störungen oder Anfälle zu vermeiden.

Animations-Richtlinien

• Kein Blinken: Nichts blinkt mehr als 3 Mal pro Sekunde
• Einstellungen respektieren: Beachten Sie prefers-reduced-motion Einstellung
• Zweckmäßig: Animation sollte einen funktionalen Zweck haben
• Subtil: Halten Sie Animationen sanft und kurz
• Optional: Erlauben Sie Benutzern, Animationen zu deaktivieren

Prefers-Reduced-Motion

/* Standard-Animation */
.element {
  transition: transform 0.3s ease;
}

/* Benutzereinstellung respektieren */
@media (prefers-reduced-motion: reduce) {
  .element {
    transition: none;
    animation: none;
  }
}

Sichere Animations-Praktiken

• Ausblenden statt Schieben wenn möglich
• Begrenzen Sie Parallax-Effekte
• Vermeiden Sie kontinuierliches Drehen oder Rotieren
• Bieten Sie Pause-Steuerungen für automatisch abspielende Inhalte
• Testen Sie mit Benutzern mit vestibulären Störungen

Icons und Bilder

Icon-Design

• Immer Text einschließen: Verwenden Sie Icons nicht allein
• Universelle Symbole: Verwenden Sie weithin anerkannte Icons
• Konsistenter Stil: Behalten Sie visuelle Konsistenz bei
• Angemessene Größe: Minimum 16x16px (24x24px empfohlen)
• Ausreichender Kontrast: 3:1 gegen Hintergrund

Dekorative vs. Informative Bilder

• Dekorativ: Design sollte ohne sie funktionieren (haben leeren Alt-Text)
• Informativ: Vermitteln Informationen (benötigen beschreibenden Alt-Text)
• Funktional: Teil eines interaktiven Elements (beschreiben Sie Funktion im Alt-Text)

Bild-Richtlinien

• Stellen Sie sicher, dass Bilder keinen kritischen Text enthalten (oder bieten Sie Text-Alternative)
• Verwenden Sie Bildunterschriften wenn zusätzlicher Kontext benötigt wird
• Bieten Sie lange Beschreibungen für komplexe Bilder/Diagramme
• Stellen Sie sicher, dass Bilder responsiv sind und angemessen skalieren

Content-Design

Schreiben für Barrierefreiheit

• Einfache Sprache: Verwenden Sie einfache, klare Sprache
• Kurze Sätze: 20 Wörter oder weniger wenn möglich
• Aktive Stimme: Bevorzugen Sie Aktiv gegenüber Passiv
• Klare Überschriften: Beschreibende Abschnittsüberschriften
• Scannbar: Verwenden Sie Listen, Überschriften und kurze Absätze

Lesbarkeit

• Streben Sie 8. Klasse Leseniveau oder niedriger an
• Vermeiden Sie Jargon und Fachbegriffe wenn möglich
• Definieren Sie Akronyme bei erster Verwendung
• Verwenden Sie vertraute Wörter statt komplexe

Mikrotexte

• Button-Labels: Aktionsorientiert ("Änderungen speichern" nicht "OK")
• Fehlermeldungen: Hilfreich und spezifisch
• Leere Zustände: Erklären Sie was als nächstes zu tun ist
• Ladezustände: Informieren Sie Benutzer was passiert

Design-Systeme

Design-Systeme gewährleisten Konsistenz und Barrierefreiheit über Produkte hinweg.

Barrierefreie Design-Systeme aufbauen

• Barrierefreiheit zuerst: Bauen Sie Barrierefreiheit in jede Komponente ein
• Dokumentation: Dokumentieren Sie Barrierefreiheitsmerkmale und -anforderungen
• Getestete Komponenten: Testen Sie alle Komponenten auf Barrierefreiheit vor
• Nutzungsrichtlinien: Bieten Sie klare Implementierungsanleitung
• Code-Beispiele: Schließen Sie barrierefreie Code-Snippets ein

Komponenten-Bibliothek Checkliste

• ☐ Alle Komponenten sind tastatur-zugänglich
• ☐ Fokus-Indikatoren sind sichtbar und konsistent
• ☐ Farbkontrast erfüllt WCAG AA Standards
• ☐ Touch-Ziele erfüllen Mindestgröße-Anforderungen
• ☐ ARIA-Muster wo nötig dokumentiert
• ☐ Responsives Verhalten definiert
• ☐ Dark-Mode-Unterstützung (falls zutreffend)
• ☐ RTL-Sprachunterstützung (falls zutreffend)

Design-Tokens

• Definieren Sie barrierefreie Farbpaletten
• Standardisieren Sie Abstands-Skala
• Definieren Sie Typografie-Skala
• Legen Sie Fokus-Indikator-Stile fest
• Dokumentieren Sie Mindestgrößen

Design-Tools und Plugins

Figma Plugins

• Stark: Kontrastprüfung, Farbenblindheits-Simulation, Fokus-Reihenfolge
• A11y - Color Contrast Checker: WCAG-Konformitätsprüfung
• Able: Reibungslose Barrierefreiheits-Annotationen
• Contrast: Schnelle Kontrastprüfung

Sketch Plugins

• Stark: Barrierefreiheits-Toolkit
• Color Contrast Analyser: WCAG-Konformität

Adobe XD Plugins

• Stark: Umfassende Barrierefreiheits-Tools
• Usecontrast: Kontrastprüfung

Browser-Erweiterungen für Designer

• axe DevTools: Barrierefreiheitstests
• WAVE: Visuelle Barrierefreiheitsbewertung
• NoCoffee: Sehbehinderungs-Simulator
• Colorblindly: Farbenblindheits-Simulation

Barrierefreiheits-Annotationen

Annotationen kommunizieren Barrierefreiheitsanforderungen an Entwickler.

Was zu annotieren ist

• Überschriften-Ebenen: Markieren Sie H1, H2, H3 usw.
• Fokus-Reihenfolge: Nummerieren Sie die Tab-Sequenz
• Alt-Text: Bieten Sie vorgeschlagenen Alt-Text für Bilder
• ARIA-Rollen: Geben Sie an wenn nötig (Button, Navigation usw.)
• Zustände: Dokumentieren Sie alle interaktiven Zustände
• Tastatur-Interaktionen: Geben Sie Tastatur-Verhalten an
• Screen Reader Text: Visuell versteckt aber vorgelesen
• Landmarks: Main, Navigation, Footer Regionen

Annotations-Methoden

• Verwenden Sie Kommentar-Funktionen des Design-Tools
• Erstellen Sie separate Annotations-Ebene
• Fügen Sie zu Design-Spezifikationsdokument hinzu
• Verwenden Sie Barrierefreiheits-Annotations-Plugins

Zusammenarbeit mit Entwicklung

Designer-Entwickler-Übergabe

• Spezifikationen: Bieten Sie detaillierte Barrierefreiheits-Specs
• Alle Zustände: Gestalten Sie alle interaktiven Zustände
• Edge Cases: Gestalten Sie Fehlerzustände, Leerzustände, Ladezustände
• Responsives Verhalten: Definieren Sie alle Breakpoints
• Annotationen: Schließen Sie Barrierefreiheits-Annotationen ein

Review-Prozess

• Überprüfen Sie Implementierung mit Entwicklern
• Testen Sie Prototypen gemeinsam
• Verwenden Sie Screen Reader zur Verifizierung
• Prüfen Sie Tastatur-Navigation
• Verifizieren Sie Farbkontrast in Implementierung

Dokumentation

• Erstellen Sie Barrierefreiheits-Richtlinien-Dokument
• Pflegen Sie Design-System-Dokumentation
• Dokumentieren Sie Komponenten-Verhalten
• Bieten Sie Code-Beispiele wenn möglich

Design-Checkliste