Barrierefreies Design
Praxisorientierte Artikel zur Gestaltung von Oberflächen und Layouts — von Typografie über Bewegung und Touch-Targets bis zur Datenvisualisierung.
Gute Gestaltung beruht auf Entscheidungen, die sich begründen lassen. Welche Schriftgröße ist tatsächlich lesbar? Wie groß muss ein Touch-Target sein, damit eine Person mit Tremor ihn zuverlässig trifft? Warum sollte Animation reduzierbar sein?
Diese Fragen haben Antworten — in Studien, Standards und über Jahre gesammelten Erfahrungswerten. In dieser Sammlung machen wir diese Antworten zugänglich, mit Verweisen auf die Quellen. Und wenn die Datenlage uneindeutig ist, schreiben wir das auch hin, statt eine scheinbare Sicherheit zu suggerieren, die es nicht gibt.
Aktuelle Artikel
Praxis-Themen rund um barrierefreies Design
- 01
Kontrastprüfung
Kontraste nach WCAG 2.2 prüfen, Tools für die tägliche Arbeit und ein Ausblick auf die neue APCA-Methode.
- 02
Typografie für barrierefreie Oberflächen
Welche Typografie-Regeln belegt sind und welche nur Faustregel – Schriftgröße, Zeilenlänge, Abstände und der Dyslexie-Font-Mythos.
- 03
Touch-Targets und Klickflächen
Wie groß eine Klickfläche sein muss: das WCAG-Kriterium 2.5.8, die fünf Ausnahmen und was Apple und Material Design empfehlen.
- 04
Bewegung und Animation
Wann Animation hilft und wann sie schadet – die WCAG-Kriterien 2.2.2, 2.3.1 und 2.3.3 sowie
prefers-reduced-motion. - 05
Barrierefreie Datenvisualisierung
Diagramme, Charts und Infografiken zugänglich gestalten — drei parallele Pfade (visuell, Text, Tabelle), WCAG-Kriterien zu Kontrast und Farbe, SVG-Patterns und Tastatur-Steuerung.
- 06
Farbe als Informationsträger
Warum Farbe nie das einzige Unterscheidungsmerkmal sein darf – WCAG-Kriterium 1.4.1, eine zweite Codierung über Form und Text und der 3-zu-1-Kontrast für grafische Objekte.
- 07
Fokus-Indikatoren sichtbar gestalten
Was die Kriterien 2.4.7 und die neuen 2.2-Kriterien 2.4.11 bis 2.4.13 fordern – und wie ein Fokus-Rahmen aussieht, den man bei der Tastaturbedienung wirklich sieht.
- 08
Reflow und responsives Layout
Warum Inhalte sich bis 320 CSS-Pixel ohne horizontales Scrollen umbrechen müssen – WCAG-Kriterium 1.4.10, die Ausnahmen für Tabellen und Karten und die saubere CSS-Umsetzung.
- 09
Text vergrößern ohne Verlust
Wie sich Text bis 200 Prozent vergrößern lässt, ohne dass Inhalt oder Funktion verloren gehen – WCAG-Kriterium 1.4.4, die zwei Ausnahmen und die saubere CSS-Umsetzung.
- 10
Textabstände anpassbar machen
Warum Nutzer:innen Zeilen-, Wort- und Buchstabenabstand erhöhen können müssen, ohne dass Inhalt abgeschnitten wird – WCAG-Kriterium 1.4.12, die vier Werte und der CSS-Test.
Verwandte Übersichten
Größere thematische Hubs zu den rechtlichen und technischen Grundlagen
WCAG 2.2
Die Web Content Accessibility Guidelines: der internationale Standard, dessen Kriterien hinter allen Design-Artikeln dieser Sammlung stehen.
GesetzBFSG
Das Barrierefreiheitsstärkungsgesetz: wer betroffen ist, was es verlangt und wie du es umsetzt.
Soll dein Design barrierefrei und belegbar werden?
Wir prüfen deine Oberflächen gegen WCAG 2.2, von Kontrast und Typografie bis Fokus-Führung, und zeigen deinem Team, wie barrierefreies Design ohne Mythen gelingt.
Beratung oder Schulung anfragen