Icons & Illustrationen barrierefrei gestalten

TL;DRTL;DR too long; didn't read. Wörtlich übersetzt "zu lang; nicht gelesen". Überschrift für eine kurze Zusammenfassung eines längeren Artikels oder Beitrags. (Kurzfassung)

  • Icons nie ohne Text verwenden – sie sind nicht selbsterklärend.
  • Klare, einfache Formen – Details weglassen, Lesbarkeit erhöhen.
  • Farben nie allein verwenden – Form/Text als Ergänzung.
  • Alternativtexte: Nur wenn die Info relevant ist.
  • Animationen sparsam und kontrollierbar gestalten.
  • Teste regelmäßig – am besten mit echten Nutzer*innen.

Barrierefreiheit ist kein Korsett – sie macht dein Design robuster, inklusiver und zukunftssicher.

Icons und Illustrationen sind ein wichtiger Bestandteil moderner Interfaces. Sie schaffen Wiedererkennung, kommunizieren schnell und oft intuitiv – wenn sie gut gestaltet sind. Für viele Nutzer*innen sind sie jedoch eine echte Hürde: Menschen mit Sehbehinderung, kognitiven Einschränkungen oder neurodivergenten Wahrnehmungsweisen können sich durch visuelle Elemente ausgeschlossen fühlen.

1. Icons sind keine Sprache

Icons funktionieren nicht universell – auch wenn es oft so wirkt. Das „Hamburger-Menü“ (☰) ist nur deshalb verständlich, weil es sich etabliert hat. Studien zeigen: Was für eine Person intuitiv ist, kann für eine andere komplett unverständlich sein. Deshalb: Icons nie ohne unterstützenden Text verwenden. Begleittext (Label) schafft Klarheit – idealerweise sichtbar, nicht nur bei Mouseover.

2. Klarheit schlägt Detailverliebtheit

Filigrane Linien, Schattierungen, verspielte Details – schlecht für die Barrierefreiheit. Warum?

  • Menschen mit Sehschwächen oder kognitiven Einschränkungen brauchen klare, einfache Formen.
  • Geringe Farbkontraste oder zu kleine Symbole sind für viele schlicht nicht lesbar.
  • ScreenreaderScreenreader Software, die Texte am Bildschirm laut vorliest oder als Braille ausgibt.-Nutzer*innen profitieren davon, wenn Icons semantisch korrekt eingebunden sind.

Zu kleine oder eng beieinander liegende Icons sind ein No-Go für Menschen mit motorischen Einschränkungen.

  • Mindestens 24×24 px, besser 44×44 px für flinke Finder und grobe Motorik.
  • Großzügige Abstände vermeiden Fehleingaben.

3. Inklusive Illustrationen

  • Zeige Vielfalt und unterschiedliche Lebensrealitäten.
  • Kein Text im Bild, der für Screenreader nicht zugänglich ist

4. Farben? Ja – aber nie allein.

Farben können Emotionen transportieren und visuelle Hierarchie schaffen. Aber: Farben dürfen nie die einzige Informationsquelle sein.

Beispiel: Rot = Fehler, Grün = Bestätigung. Für farbenblinde Menschen sieht das eventuell gleich aus. Etwa 8 % aller Männer und 0,5 % aller Frauen weltweit sind von einer Form der Farbenblindheit (Farbsehschwäche oder Farbsehstörung) betroffen – meistens rot-grün. (WHO, 2023)

  • Nutze zusätzliche Merkmale wie Formen, Icons oder Text.
  • Teste deine Illustrationen mit Simulations-Tools (z. B. Color Oracle).

5. Alt-Texte & aria-labels bei Illustrationen:

Ein Icon mit Funktion (z. B. „Speichern“) muss per aria-label oder sichtbarem Text zugänglich gemacht werden.

Illustrationen?

  • Wenn sie Information transportieren, brauchen sie Beschreibung (z. B. per alt oder umgebendem Text).
  • Wenn sie rein dekorativ sind: alt="" oder role="presentation".

6. Animationen mit Bedacht einsetzen

Leichte Bewegungen können helfen, Aufmerksamkeit zu lenken – aber: Menschen mit Vestibulären Störungen oder Autismus-Spektrum-Störungen empfinden Animationen oft als belastend oder sogar auslösend.

  • Reduziere Bewegung auf ein Minimum.
  • Reagiere auf das Betriebssystem-Setting prefers-reduced-motion – viele Frameworks unterstützen das bereits.
  • Verzichte auf automatisch ablaufende Videos und Animationen oder gib zumindest eine Pause-/Stop-Möglichkeit.