Es gibt das Vorurteil, dass barrierefreie Websites langweilig sind, weil auf ihnen nichts passiert: Nichts fliegt rein, nichts bewegt sich raus, nichts wird gezoomt, nichts ploppt auf, nichts dreht sich – keine Animationen.
Mag sein, aber mal ehrlich: Brauchen moderne Websites das wirklich?
Wie geht es dir, wenn du auf einer Website Texte lesen willst, sich aber Elemente übereinander schieben und du den Inhalt wegen Pop-ups oder Slide-ins nicht lesen kannst? Oder du musst swipen, um an die wichtigen Infos zu kommen oder Inhalte verschwinden, weil sie zu schnell aus dem Blickfeld rauschen? Manchmal sind Pop-ups nervig für den User. Zudem sind sie nicht ideal für die Suchmaschinen-Optimierung, weil sie wichtige Inhalte verdecken oder das Navigieren beeinträchtigen, was zu einer höheren Absprungrate führen kann. Und außerdem sind sie völlig kontraproduktiv für die Barrierefreiheit.
Lies jetzt, welche Elemente du besser nicht verwenden solltest, wenn du deine Website barrierearm gestalten möchtest.
1. Slider
Slider sind beliebte Elemente auf einer Website. Es gab sogar mal eine Zeit, in der viele Kopfbereiche (Header) nur aus drei bis fünf Slidern bestanden, die in einer schnellen Rotation durchliefen. Oft sogar über die halbe Bildschirmbreite. Das ist Geschmackssache, meiner war es nicht. Denn oft blieb dem Leser und der Leserin nicht genug Zeit, alle Inhalte eines Sliders schnell zu erfassen und entsprechend zu handeln, bis der nächste Slide ins Blickfeld kam.
Möchtest du eine barrierefreie oder barrierearme Website, solltest du auf den übermäßigen Einsatz von Slidern verzichten. Am besten ist es auch, wenn die Slider oder Karussells nicht automatisch durchlaufen.
2. Pop-ups
Pop-ups in allen Formen und Größen waren und sind teilweise immer noch ein beliebtes Gestaltungselement einer Website. Sei es als Werbeeinblendung für das neueste Mini-Produkt oder mit einer Newsletter-Anmeldung, die ab einem bestimmten Punkt beim Scrollen (Fade-in- oder Scroll-Pop-ups) erscheint oder beim Verlassen der Seite (Exit-Pop-ups oder Exit-Intent-Pop-ups) aufpoppt. Manchmal verdecken sie sogar den gesamten Bildschirm.
Sie sind beliebt und häufig locken sie mit einem unwiderstehlichen Angebot. Manche finden sie aber auch einfach nur nervig.
Auf barrierefreien Websites sollten Pop-ups sparsam oder gar nicht eingesetzt werden. Pop-ups werden von Screenreadern nicht immer erkannt und daher nicht richtig ausgelesen. Der „Schließen“-Button ist oft nur visuell, aber nicht per Tastatur oder Screenreader zugänglich und kann daher von Menschen mit Beeinträchtigung nur schwer weggeklickt werden.
Idee: Besser wäre es hier, den Inhalt des Pop-ups in den Content einzubauen und farblich hervorzuheben, zum Beispiel mit einem Abschnitt zur Newsletter-Anmeldung auf der jeweiligen Seite oder auch im Footer.
3. CAPTCHAs
Mit einem CAPTCHA-Test wird überprüft, ob es sich bei einem Online-Nutzer tatsächlich um einen Menschen und nicht um einen Bot handelt.
CAPTCHAs werden häufig verwendet, um zum Beispiel E-Books oder Artikel zu verstecken oder um Formulare abzusenden. Vor allem für Menschen mit einer dauerhaften oder vorübergehenden Beeinträchtigung sind sie schwer zu lesen und zu bedienen.
Als Beispiel: Menschen mit einer Sehschwäche oder Sehbehinderung können bildbasierte CAPTCHAs, bei denen ein Code aus einem Bild eingegeben werden muss, nicht bedienen.
Es gibt auch CAPTCHAs, die so gestaltet sind, dass der Nutzer, die Nutzerin in der Lage sein muss, die bestimmte Sprache des CAPTCHAs lesen zu können, was für Fremdsprachler problematisch sein kann.
Nicht selten führen CAPTCHAs zu Frustration (wie auch bei mir, als ich zum dritten Mal die Pedale nicht dem Motorrad zugeordnet habe) und verlängern die Zeit, die Nutzer benötigen, um auf Inhalte zuzugreifen. Das stellt nicht nur für Menschen mit einer Beeinträchtigung eine Hürde dar.

Besser wäre es hier, einen guten Spam-Filter einzusetzen.
Für Kontaktformulare nutze ich gerne das Plugin WP Armour – Honeypot Anti Spam. Es fügt dem Formular ein verstecktes Eingabefeld hinzu, das für Menschen unsichtbar ist. Bots füllen es jedoch aus (echte User nicht). Eingaben in dieses Feld können als Spam gewertet werden.
4. Emojis
Emojis können in Designs nützlich sein und diese aufwerten. Für barrierefreie Websites können Emojis aber auch eine Herausforderung darstellen. Denn Screenreader lesen Emojis oft wie Textbeschreibungen vor. Zum Beispiel „grinsendes Gesicht mit offenem Mund“. Emojis unterbrechen den Lesefluss und werden viele verwendet, können die Beschreibungen sehr lang sein, was vom eigentlichen Text ablenkt.
Werden sie missinterpretiert, weil sie beispielsweise mehrere Deutungen zulassen, können sie auch verwirren.
Da sie schwerer ausgelesen werden können, ist es besser sie sparsam und nur dann einzusetzen, wenn sie den Inhalt sinnvoll verdeutlichen oder unterstreichen. Emojis sollten keine zusätzlichen Informationen liefern. Außerdem solltest du nur Emojis verwenden, die leicht verständlich und in ihrem Kontext eindeutig sind.
Ein Beispiel: Anstatt nur „👍“ zu schreiben, formuliere „Gut gemacht! 👍“.
5. Farbverläufe
Auf vielen Websites werden farbige Hintergründe oder Flächen mit Farbverläufen eingesetzt. Diese Farbverläufe sind auf den ersten Blick ästhetisch ansprechend oder sollen eine moderne Optik vermitteln. Oft verlaufen sie von hell nach dunkel oder sind changierend. Steht darauf noch Text, kann dieser teilweise gelesen werden, teilweise – je nach Hintergrund – eben nicht.
Dies gilt für alle Menschen, besonders aber für Menschen mit einer Sehbehinderung oder Farbenblindheit. Sind die Kontraste zu schwach, können Übergänge zwischen ähnlichen Farben möglicherweise nicht mehr unterschieden oder Inhalte nur noch schwer erkannt werden. Daher verzichte lieber darauf, denn der Text ist damit schwer lesbar.

Und wenn du gar nicht darauf verzichten magst, stelle sicher, dass der Kontrast zwischen dem hellsten und dem dunkelsten Punkt des Farbverlaufs hoch genug ist. Mit Tools wie dem WCAG Kontrastprüfer, kannst du herausfinden, ob der Kontrast ausreichend ist.
Aber von animierten oder bewegten Farbverläufen würde ich abraten.
Fazit
Dieser Beitrag hat nicht den Anspruch, vollzählig auf alle Bestandteile einer Website einzugehen, aber verzichtest du auf die fünf genannten Elemente, gestaltet du deine Website barrierearm und machst sie für alle zugänglich.
Hast du Interesse, die Barrieren auf deiner Website zu reduzieren und deine Website für eine bessere Nutzererfahrung zu optimieren, schreib mir gerne eine E-Mail an kontakt@anitastrueby.com.
0 Kommentare