Für die digitale Barrierefreiheit musst du 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 erfahren willst, ist dieser Beitrag vielleicht etwas für dich: Gutes UI / UX für ältere Personen.

Die Größe ist doch wichtig!

Nach WCAG AA sollte jedes Bedienelement eine Mindestklickfläche von 24 × 24 Pixel haben. Die Klickfläche ist der Bereich, den man klicken kann, ohne dabei versehentlich ein benachbartes Element zu treffen, das man gar nicht klicken wollte.

Praktisch heißt das: Ein Icon kann durchaus nur 12 × 12 Pixel groß sein, solange die Klickfläche drumherum mindestens 24 × 24 Pixel beträgt oder genügend Abstand zu anderen klickbaren Elementen besteht, sodass sich keine Klickflächen überschneiden.

Klingt jetzt schon kompliziert? Ist es auch ein bisschen. Darum unsere Empfehlung: Mach deine Icons einfach mindestens 24 × 24 Pixel groß, damit sparst du dir viel Kopfzerbrechen. Und du stellst sicher, dass auch Menschen mit Tremor oder anderen motorischen Einschränkungen deine Icons zuverlässig treffen können.

Das WCAG AAA-Krtierium schreibt sogar vor, dass die Klickfläche 44 x 44 Pixel groß sein soll. Die Empfehlungen von Android und IOS gehen noch mal darüber hinaus und schlagen eine Klickfläche von 48 Pixel auf Mobile vor. Da zeigt sich wieder schön, dass die Barrierefreiheit der WCAG nur eine Mindestanforderung ist.

Das richtige Kontrastlevel für barrierefreie Icons

Deine Icons müssen ein gewisses Kontrastlevel erreichen (3:1). Das ist verpflichtend, wenn die Icons als Bedienelemente verwendet werden oder für das Verständnis des Inhaltes wichtig sind.

Mehr zu den richtigen Kontrastverhältnissen deiner Bedienelemente findest du in unserem Artikel dazu: Kontrastverhältnisse für digitale Barrierefreiheit.

Barrierefreie Alt-Texte und Linktexte

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 Informationen ausgeben: „Link. Zurück zum Hauptmenü.“ Mehr über Links, und wie du sie richtig umsetzt, erfährst du in unserem Beitrag über barrierefreie Linktexte.

Dokumentiere Vorschläge für Alt-Texte am besten zusammen mit deinem Design, damit es in der Entwicklung nicht herunterfällt. In dem WCAG-Kriterium 1.1.1: Nicht-Text-Inhalt (speziell von Bedienelementen) erfährst du noch mehr darüber.

Der Einsatz von Icons und Piktogrammen in der leichten Sprache

Nachdem wir jetzt wissen, wie du mit deinen Icons barrierefrei gestaltest, will ich dich 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 Inhaltes zu haben.

Wenn dich dazu mehr interessiert: Leichte und Einfache Sprache: Was ist der Unterschied?.

Hier noch einmal das Wichtigste zu barrierefreien 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.