Der Leitfaden

Nach was suchst du?

Barrierefreiheit ist für 10 % der Menschen unverzichtbar, für 30 % notwendig und für 100 % hilfreich.

Was ist barrierefreie Gestaltung?

Gutes Design schließt niemanden aus – es denkt Vielfalt von Anfang an mit.

Barrieren können situativ, temporär oder dauerhaft auftreten.

Zielgruppen

Für unterschiedliche Situationen gedacht.

Rechtslage

Rechtlicher Rahmen für inklusive Gestaltung.

Arten der barrierefreien Gestaltung

Ein Zusammenspiel aus Technik, Design und Inhalt.

Zusammenfassung: Barrierefrei Basics

Kriterien zur Auswahl geeigneter Schriftarten für barrierefreie Gestaltung.

Wahl der Schriftart

Typografie als Schlüssel zur Verständlichkeit.

Beispiele für gut geeignete Schriften für barrierefreie Gestaltung.

Zusammenfassung: Wahl der Schriftart

Geeignete Schriftschnitte für gut lesbaren Fließtext.

Orientierung im Text

Struktur macht Inhalte verständlich.

Hierarchie bei der Textsetzung zur besseren Orientierung.

Zusammenfassung: Orientierung im Text

Erklärung, was eine Schriftgröße ist.

Schriftgrößen im Print

Die richtige Schriftgröße erleichtert das Lesen.

Gut leserliche Zeilenlänge als positives Beispiel bei der Textsetzung.

Zeilenlängen im Print

Wie der Lesefluss beeinflusst wird.

Positive und negative Beispiele für gut leserliche Zeilenabstände.

Zeilenabstand im Print

Raum zwischen Zeilen schafft Ruhe.

Erklärung von Zeichenabständen und deren Einfluss auf die Lesbarkeit.

Zeichenabstand im Print

Der Raum zwischen den Buchstaben.

Zusammenfassung: Typografie im Print

Schriftgrößen im Web

Die richtige Schriftgröße erleichtert das Lesen.

Zeilenlängen im Web

Wie der Lesefluss beeinflusst wird.

Zeichenabstand im Web

Der Raum zwischen den Buchstaben.

Zeilenabstand im Web

Lesbarkeit durch Abstand.

Buttons, Labels, Formulare

Interaktive Elemente im Web.

Zusammenfassung: Typografie im Web

Übersicht verschiedener Formen von Farbfehlsichtigkeit.

Farbfehlsichtigkeiten

Wahrnehmung entscheidet über Verständlichkeit.

Vergleich verschiedener Farbfehlsichtigkeiten.

Zusammenfassung: Farbfehlsichtigkeiten

Positive und negative Beispiele für ausreichende Farbkontraste.

Kontrastprinzipien

Farbe als System

Information über Farbe

Farbe als System

Erklärung der Viridis- und Jet-Farbpalette.

Farbpaletten

Farbe als System

Viridis Farbpalette

Zusammenfassung: Farben als System

Kontrastanforderungen im Print mit einem Mindestkontrastverhältnis von 0,7.

Kontrastberechnung

Farben im Print

Kontrastverhältnisse

Zusammenfassung: Farben im Print

Farbkontraste im Web sollten rechnerisch überprüft werden.

Kontrastberechnung

Farbe im Web

Positives Beispiel für eine korrekt verwendete Interaktionsfarbe.

Interaktionsfarben

Farbe im Web

Vergleich von Light- und Dark-Mode und deren getrennte Gestaltung und Überprüfung.

Dark vs Light Mode

Farbe im Web

Darstellung der Gestaltprinzipien in der visuellen Gestaltung.

Gestaltprinzipien

Orientierung im Layout

Darstellung des Leseweges zur besseren Nutzerführung.

Blickführung und Lesewege

Orientierung im Layout

Erklärung der visuellen Hierarchie in der Gestaltung.

Visuelle Hierarchie

Orientierung im Layout

Zusammenfassung: Orientierung im Layout

Geeignete Darstellungsformen von Bildern im barrierefreien Design.

Bildsprache

Visuelle Elemente erleichtern den Zugang zu komplexen Inhalten.

Zusammenfassung: Bildsprache

Beispiel für einen barrierefreien Satzspiegel.

Satzspiegel

Layout im Print

Beispiel für einen Gestaltungsraster zur besseren Strukturierung.

Raster im Print

Layout im Print

Elemente, die der Orientierung auf einer Seite dienen.

Orientierungselemente

Layout im Print

Layout im Print

Zusammenfassung: Layout im Print

Zwölfspaltiges Layout-Raster für Webgestaltung.

Raster im Web

Layout im Web

Beispiel für ein Navigationsmodell auf Webseiten.

Navigationsmodelle

Layout im Web

Beispiel für das Scroll-Verhalten auf Webseiten.

Scrollverhalten

Layout im Web

Zusammenfassung: Layout im Web

Papierbeschaffenheit

Das Medium Print

Taktile Elemente im Print zur besseren Orientierung.

Taktile Elemente

Das Medium Print

Positives und negatives Beispiel für die Bindung von Printprodukten.

Bindungen

Das Medium Print

Papierarten

Zusammenfassung: Das Medium Print

Displaytypen

Das Medium Web

Beispiel für Responsive Webdesign.

Responsiveness

Das Medium Web

Verschiedene Zustände von Buttons, wie normal, hover, aktiv und deaktiviert.

Interaktion

Das Medium Web

Animation und Video

Das Medium Web

Verschiedene Eingabemöglichkeiten im Internet.

Eingabemöglichkeiten

Das Medium Web

Elektronische Geräte

Zusammenfassung: Das Medium Web