Experience & Design

Warum barrierefreies Design für uns alle wichtig ist - Teil 1

Alena Riha

Junior UI/UX Designerin

Veröffentlicht

20. Mai 2022

Verändert

22. Juni 2022

3 min

Was bedeutet Barrierefreiheit für (Web)Design und digitale Produkte?

Barrierefreiheit steht für Zugänglichkeit. Ob für öffentliche Gebäude, Verkehrsmittel und vieles mehr, das unseren Alltag betrifft. So auch in der digitalen Welt. Barrierefreies Design, speziell Webdesign, besteht darin dieses so zu gestalten, dass jede:r es nutzen und damit interagieren kann. Besonders berücksichtigt werden dabei jene Menschen mit Beeinträchtigung. Barrierefreies Design ermöglicht diesen sich auf einer Website oder einem anderen digitalen Produkt zurechtzufinden und alle Inhalte aufzufassen. Wir wollen somit die digitale Welt zugänglicher für alle machen.

Warum betrifft uns alle Barrierefreiheit in der Digitalen Welt?

In Österreich sind rund 19,3% der Bevölkerung ab 15 Jahren durch gesundheitliche Beeinträchtigung eingeschränkt. 95% davon waren länger als ein halbes Jahr gesundheitlich beeinträchtigt. Somit haben 18,4% eine dauerhafte Beeinträchtigung und damit ca. 1,34 Millionen Personen in Österreich (ab 15 Jahren).

Fast 20% ist ein hoher Anteil an Personen, die eine oder mehrere Beeinträchtigungen haben. Neben jenen, die dauerhaft davon betroffen sind, gibt es natürlich auch temporäre Beeinträchtigungen, wie man entnehmen kann z.B.: gebrochener Arm, Verletzung am Auge etc. Somit betrifft diese Angelegenheit mehr Leute als man meinen mag und vermutlich auch einen selbst, egal ob nun temporär oder sogar situationsbedingt.

Situationsbedingt heißt in diesem Fall, dass ich z.B.: durch das Autofahren beeinträchtigt bin ein Produkt zu nutzen, wie etwa ein Navigationssystem und es deshalb praktisch wäre via einer Spracheingabe mit dem Produkt zu interagieren.

Nebenbei erfüllt eine barrierefreie Website die EU-Richtlinien und ist für Unternehmen nicht uninteressant, weil man durch barrierefreie Webseiten einen größeren Kundenkreis erreichen kann. Außerdem verbessert man mit einer barrierefreien Webseite das eigene Suchmaschinen-Ranking.

Design Thinking Einführung

Gratis

Was ist Design Thinking und wie Ihre Organisation davon profitieren kann.

Microconsulting

Gratis

Sie haben eine Frage und benötigen Hilfe. Einer unserer Experten wird sich mit Ihnen in Verbindung setzen und Sie fachgerecht beraten.

Sehbeeinträchtigung

Farbkontraste und Typographie sind hier die Stichworte. Neben Kurz-und Weitsichtigkeit, gibt es auch Menschen mit Farbenfehlsichtigkeit. Durch Farbkonzepte mit Mindestkontrasten kann ich überprüfen, ob die Kontraste auf meinem Design ausreichen oder ich noch nachbessern muss. Ein hoher Kontrast-Modus kann auch optional zur Verfügung gestellt werden. Um den Kontrast meiner eigenen Designs zu überprüfen verwende ich das Stark-Plugin über Figma. Mehr dazu habe ich in diesem Artikel geschrieben.

Das selbe gilt für die Typographie. Optional kann man auch hier einen Modus anbieten, wo man die Schriftgröße verändern kann. Hierbei ist wichtig zu beachten, ob bei geringer Bildschirmauflösung der vergrößerte Text/ein Textblock vollständig und ohne horizontales Scrollen lesbar ist.

Hilftstechnologien wie Screenreader und Braillezeilen sind ebenfalls eine große Unterstützung, aber benötigen einen logischen Quelltext der Website, Alternativtexte für Bilder und semantische Bezeichnungen, um inhaltlich verständlich alles wiederzugeben.

Neben der Möglichkeit Texte zu vergrößern wäre es auch wichtig für User die Website allgemein zoomfähig zu machen. Dabei werden bis zu 200% Zoom-Fähigkeit empfohlen.

Motorische Beeinträchtigungen

Wenn man motorisch eingeschränkt ist, dann kann man sich meistens der Tastatur behelfen, um durch eine Website zu navigieren. Auch Touchscreens, Joysticks oder blick-und mundgesteuerte Cursor sind Hilfsmittel. Damit das einwandfrei klappen kann, müssen Abstände zwischen Schaltflächen passen, Anordnung von Inhalten, Textblöcken, Buttons als auch Formular-Feldern bedacht werden. Nicht nur der strukturierte Seitenaufbau ist wichtig, sondern ebenso die Reihenfolge der Inhalte . Hier müssen vor allem technische Vorkehrungen getroffen werden, weshalb ich empfehle, intensiv mit dem bzw. der Developer:in zusammenzuarbeiten - am besten schon vor und während der Konzeption des Projekts.

Hörbeeinträchtigung

Für Menschen mit Hörbeeinträchtigung fällt die Lautsprache schwer, weshalb das zusätzliche Angebot in leichter Sprache ratsam ist. Neben der leichten Sprache wird außerdem empfohlen, Inhalte in Gebärdensprache anzubieten. Bei Videos empfiehlt es sich mit Untertiteln zu arbeiten bzw. bei Audio-Dateien Transkripte zusätzlich zur Verfügung zu stellen.

Andere Beeinträchtigungen

Ein Header mit tollen Bild- und Videoeffekten, wenn man auf die Startseite kommt oder knallige Animationen, können definitiv ein Eye-Catcher sein. Für Menschen die jedoch an Epilepsie oder vestibulären Störungen leiden kann dies im schlimmsten Fall Anfälle auslösen. Auch Schwindel und Kopfweh könnten durch Animationen ausgelöst werden. Daher sollte man mit solchen Elementen und Effekten vorsichtig umgehen bzw. genau bedenken wann, wie viel und ob man sie überhaupt einsetzen will bzw. essentiell ist.

Checklisten und Plugins

Wie bereits erwähnt sind für mich Plugins, insbesondere Stark, bei Figma sehr hilfreich, um meine Designs auf Barrierefreiheit zu überprüfen. Nebenbei gibt es auch Online Checklisten, die ich rate herbeizuziehen und durchzugehen, bevor man ein Design abgesegnet bzw. beim Prozess oder ersten Entwurf ist.

Barrierefreies.Design stellt hierfür eine übersichtliche, interaktive Checkliste zur Verfügung:‍

(https://barrierefreies.design/barrierefreiheit-interaktiv-testen/checkliste-fur-barrierefreies-webdesign)

Auch die WACA, das erste und einzige Qualitätssiegel in Österreich für Barrierefreiheit im Web, bietet einen raschen Guide und Übersicht zu Punkten, die zu beachten sind vor dem Launch einer Website: https://waca.at/checkliste-so-ist-die-website-fuer-alle-nutzbar

Neben Stark gibt es auch andere nützliche Plugins, die beim Überprüfen der Barrierefreiheit unterstützen können:

A11y ist ein Farbkontrast-Checker, der einen Regler integriert hat um Farbkombinationen und Text-Dicke anzupassen und zu prüfen
Color Blind erlaubt ebenfalls Farbschemen per Preview zu überprüfen für Menschen, die an Farbenblindheit leiden
Text Resizer erlaubt Textgrößen im Rahmen der WCAG Bedingungen anzupassen
A11y Focus Order erlaubt uns die Struktur und Ordnung von Frames, Bilder, Texten etc. Zu überprüfen

Fazit

Jeden von uns betrifft Barrierefreiheit nicht nur - nein, wir alle profitieren sogar davon.

Mag es permanent sein, temporär oder situationsbedingt.

Von motorischen Beeinträchtigungen bis zu Menschen mit Epilepsie gibt es einige Punkte, auf die wir bei Barrierefreiheit achten sollten. Genauso jedoch bieten Checklisten und Plugins eine gute Hilfestellung, um das in unseren Designs zu überprüfen und zu verbessern.

Inwiefern Unternehmen davon profitieren, was die WACA ist und welche gesetzlichen Verpflichtungen es zur barrierefreien Gestaltung von Websites in Österreich gibt, werde ich im zweiten Teil über Barrierefreies Design genauer erläutern.