Du musst dir auch über die kleinsten Elemente auf deiner Webseite oder in deiner App von Anfang an Gedanken machen – besonders, wenn Nutzer*innen mit ihnen interagieren können sollen.
Beschriftete Icons sind besser zu verstehen!
Um Icons barrierefrei zu machen, muss man sie beschriften. Nicht jeder ist mit dem Internet aufgewachsen und versteht ohne Erklärung, was ein Icon bedeutet. Besonders die ältere Generation hat hier ihre Probleme. Wo möglich, schreibe einen Text zu deinen Icons, um sie zu erklären. Beschrifte zum Beispiel dein Menü-Icon mit dem Text „Menü“.
Wenn du mehr über gute UI / UX für ältere Personen erfahren willst, haben wir hier einen Beitrag für dich: Gutes UI / UX für ältere Personen.
Die Größe ist doch wichtig!
Icons benötigen eine Mindestgröße von 24 mal 24 Pixel. Insbesondere, wenn man mit den Icons interagieren können soll. Noch besser sind 44 mal 44 Pixel. So stellen wir sicher, dass auch Menschen mit Tremor oder anderen Koordinations-Problemen die Icons gut erwischen.
Zudem würden wir empfehlen, genug Abstand zwischen Icons zu lassen (wenn sie anklickbar sind), um dem Nutzenden den Frust zu ersparen, aus Versehen die falsche Aktion auszulösen.
Das richtige Kontrastlevel beachten für barrierefreie Icons
Deine Icons müssen ein gewisses Kontrastlevel erreichen (3:1). Das ist verpflichtend, wenn die Icons als Bedienelemente verwendet werden. Mehr zu den richtigen Kontrastverhältnissen deiner Bedienelemente findest du in unserem Artikel dazu: Kontrastverhältnisse für digitale Barrierefreiheit.
Workshop für Designer*innen
Du willst wissen, wie du als (UI / UX) Designer*in Webseiten und Apps barrierefrei gestaltest? In unserem Workshop zeigen wir dir alles, was du als Designer*in benötigst, um digitale Barrierefreiheit umzusetzen!
Alt-Texte
Wenn deine Icons eine Funktion haben, musst du diese Funktion im Alt-Text beschreiben. Eine solche Funktion könnte zum Beispiel sein, dass sich bei Klick das E-Mail-Programm mit neuer E-Mail öffnet. Indem du die Funktion beschreibst, können Screenreader-Nutzende nachvollziehen, was passiert.
Du solltest immer berücksichtigen, dass es Menschen gibt, die den Kontext nicht sehen. Deshalb können sie rein visuelle Inhalte nicht verstehen. Ein Zurück-Pfeil scheint für dich klar zu sein. Wenn man das Icon nicht sehen kann, wird die Navigation zu einer Herausforderung. Der Voiceover (Screenreader von Apple) würde ohne zusätzliche Beschriftung folgenden Text lesen: „Link. Pfeil nach Links.“. Durch einen Alt-Text kannst du Bedeutung anreichern und beispielsweise folgende Information ausgeben: „Link. Zurück zum Hauptmenü.“
Integriere Vorschläge für Alt-Texte in dein Design, damit es in der Entwicklung nicht herunterfällt.
Der Einsatz von Icons und Piktogrammen in der leichten Sprache
Nachdem wir jetzt wissen, wie du mit deinen Icons barrierefrei gestaltest, will ich noch kurz auf die Wichtigkeit von Icons besonders für Menschen mit kognitiven Beeinträchtigungen aufmerksam machen.
Icons stellen sich bei Texter*innen und Tester*innen von leichter Sprache immer wieder als enorm hilfreich heraus. Sie führen einfach eine zweite Ebene ein. Mit ihrer Hilfe wird ein Konzept nicht nur mit Worten, sondern eben auch durch ein Zeichen verständlich gemacht. Diese Dopplung der Kommunikation scheint einen sehr positiven Effekt auf das Verständnis des Inhalts zu haben.
Wenn es dich interessiert: Mehr zum Thema leichte und einfache Sprache.
Hier noch einmal das Wichtigste zu barrierefreie Icons in Kürze:
- Um Icons verständlich zu machen, solltest du sie beschriften.
- Icons benötigen eine Mindestgröße von 24 mal 24 Pixel. Noch besser sind 44 mal 44 Pixel.
- Lasse genug Abstand zwischen den Icons, damit man nicht aus Versehen das Falsche anklickt.
- Sind deine Icons Bedienelemente, müssen sie ein Mindestkontrastlevel haben (3:1).
- Wenn deine Icons eine Funktion haben, musst du diese Funktion im Alt-Text beschreiben.
