Accessible Design - Barrierefreiheit im Netz

Wie der Begriff schon sagt (engl. accessible = zugänglich) geht es bei den Prinzipien des Accessible Design darum, Webseiten zugänglicher zu machen. Wir kümmern uns in sämtlichen Bereichen des Alltags darum das Leben barrierefrei für alle Menschen zu gestalten, deshalb sollte das Internet hier natürlich nicht hinterher hinken. Ein Design "accessible" zu machen wird immer mehr zu einem wichtigen Teil der User Experience und muss von der ersten Konzeption der Webseite bis hin zur Contentpflege grundsätzlich mitbedacht werden. 

Dementsprechend viel gibt es zu beachten. Wie immer ist es wichtig, seine Zielgruppe gut erfassen zu können, wobei es hierbei nicht unbedingt nur altersabhängig ist. Es gilt auch an vorübergehende Einschränkungen zu denken. Wenn Sie Ihre Seite etwa mit einem Gebäude vergleichen, sind Rollstuhlgerechte Zugänge nicht nur für schwerbehinderte Menschen wichtig, sondern auch für solche, die vorübergehend mit einer Verletzung zu kämpfen haben.

Zu den Einschränkungen auf die Sie auf Ihrer Webseite Rücksicht nehmen können, zählen etwa Seh- und Hörbehinderungen, motorische Behinderungen, Photosensitivität und Epilepsie, Dyslexie und Lernschwächen. Nach den Web Content Accessibility Guidelines 2.0 gibt es 4 Prinzipien der Zugänglichkeit: Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Zuverlässigkeit.

Beim Prinzip der Wahrnehmbarkeit, wird zunächst zwischen nicht-textlichem und textlichem Content unterschieden.

Bei grafischem Content muss das Ziel sein, diesen immer so leicht verständlich wie möglich zu gestalten, besonders wenn wichtige Funktionen der Seite davon abhängen. Die Grundsätzlichen Kontroll-Funktionen müssen richtig benannt sein. CAPTCHAs müssen etwa durch eine Vorlese-Funktion auch für Sehbehinderte lesbar werden. Video-Material sollte für Hörgeschädigte mit Untertiteln versehen sein, sowie reine Audio-Dateien ein Transkript zur Verfügung stellen, oder zumindest sollten die wichtigsten Informationen in einem kurzen Absatz beschrieben werden. Bei Autoplay, also dem automatischen Abspielen von Video oder Audio, ist eine Funktion vorauszusetzen, welche die sofortige Pausierung, oder Stummschaltung ermöglicht.

Auch der Einsatz von Farbe ist zu beachten. Farbe sollte nie das alleinstehende Merkmal sein, um wichtige Informationen zu vermitteln, eine Aktion zu fordern, oder ein wichtiges Element hervorzuheben. Sie können etwa Text oder Symbolik zur Unterstützung verwenden. Zum Beispiel reicht es bei einem Formular nicht die Kontur fehlerhafter Felder einfach rot einzufärben. Zusätzlich sollte immer ein Icon oder sonstiger Hinweis das Feld markieren, welches es zu korrigieren gilt.

Die Farbgebung von Texten spielt auch eine wichtige Rolle. Die Farbkodierung eines Textes sollte nicht maßgeblich zur Bedeutung des Texts beitragen, da diese Bedeutung sonst für Farbenblinde direkt verloren geht. Außerdem sollte bei schriftlichem Content immer darauf geachtet werden, möglichst viel Kontrast zum Hintergrund zu schaffen, sowie beim Schriftschnitt eine gut lesbare Font-Variante gewählt werden. Schriftliche Inhalte sollten nie als Bilder eingebunden sein, es sei denn es handelt sich wirklich nur um reine Dekoration im Hintergrund, oder etwa um Ihr Firmenlogo.

Das wichtigste Merkmal einer Schrift bei der Berücksichtigung von Sehbehinderungen ist jedoch definitiv die Schriftgröße. Je nach Zielgruppe sollte die Schriftgröße für den Fließtext entsprechend groß angelegt sein. In einigen Fällen ist es zusätzlich sinnvoll eine Funktionalität in die Website einzubauen, die per Klick alle Schriftgrößen um bis zu 200% vergrößert.

Das Benutzerinterface, wie etwa die Navigation der Seite muss einfach bedienbar sein. Versteckte und verspielte Menü-Formate können vielleicht recht schick sein, oder für den geübten User eine tolle Erfahrung darstellen, aber die User Experience für die Allgemeinheit muss trotzdem immer zuerst kommen. Dementsprechend müssen Sie sich über Ihre Zielgruppe im Klaren sein und verstehen, wie verspielt Ihre Seite sein darf. Wenn Sie durch Ihre Kreativität punkten wollen, oder ein bestimmtes Interaktionsdesign gar Demonstrationszwecken dienen soll, ist dem natürlich nichts entgegenzusetzen. Aber wenn es nun darum geht, ein neues Rollator-Modell an den Mann zu bringen, dient es Ihrer Seite wahrscheinlich am Besten in Ihrem Design so einfach und simpel wie möglich zu bleiben.

Gerade um motorischen Behinderungen vorzukommen, sollte Ihr gesamter Content rein per Keyboard navigierbar sein. Dabei ist es wichtig darauf zu achten, dass etwa durch Keyboards angewählte Links gut als solche erkennbar sind. Des weiteren sollte Ihre Seite nicht timing basiert sein. Das heißt, Inhalte, die nach einer bestimmten Zeitspanne verschwinden, oder Buttons, die nur für kurze Zeit zu sehen sind müssen unbedingt vermieden werden. 

Falls solche Features ein wichtiges Element für die Experience Ihrer Seite darstellen, muss unbedingt die Option gegeben sein, diese Features für Menschen, die dadurch eventuell benachteiligt wären, abzustellen. Zu diesem Bereich gehören auch blinkende Effekte. In unserem Trends 2021 Artikel haben wir geschrieben, das "Glitch Effekte" stark im Kommen sind. Hier muss auf jeden Fall Vorsicht herrschen. Es gilt generell die "three flashes" Regel: Vermeiden Sie Blinkeffekte mit einer höheren Frequenz als 3 mal pro Sekunde.

Die Navigierbarkeit Ihrer Seite ist ein Thema, das schon früh in der Organisation Ihres Contents bedacht werden muss. Die Benennungen Ihrer Unterseiten etwa muss immer passen, die Überschriften Ihrer Absätze sollten sinnvoll den Menüpunkten zuordenbar sein. Links müssen außerdem eindeutig betitelt sein und nicht in die Irre führen. Content der sich auf mehreren Seiten wiederholt, sollte vermieden werden, um Verwirrungen vorzubeugen. Wichtige Leitfäden und Call-To-Actions jedoch, wie etwa bei einem Checkout in einem Shop, dürfen gerne mehrmals in einem Bereich vorkommen. Es ist durchaus positiv, wenn mehrere Wege zum Ziel führen.

Das "Verstehen" einer Seite beginnt bereits mit der Sprache. Dementsprechend intuitiv muss natürlich die Sprachauswahl erfolgen. Doch selbst ohne die Option die Sprache ändern zu können schadet es nicht, direkt Rücksicht auf Menschen zu nehmen, die etwa der deutschen Sprache nur eingeschränkt mächtig sind und ihren USP (Universal Selling Proposition) so leicht verständlich wie möglich zu machen. 

Wie bereits bei der Bedienbarkeit wird der Grundstein für die Verständlichkeit Ihrer Seite bereits bei der Content-Entwicklung gelegt. Denken Sie immer daran, dass der normale Laie der sich auf Ihrer Seite informieren will höchstwahrscheinlich nicht so viel Ahnung vom Thema hat, als Sie als Experte. So gilt es Ihre Texte äußerst verständlich zu verfassen, eventuelle Fachbegriffe stetig zu erklären und nicht unnötig viele Abkürzungen zu benutzen. Außerdem ist es ratsam über einen Hilfebereich mit FAQ (frequently asked questions = oft gestellte Fragen) nachzudenken um sämtliche Unklarheiten zu beseitigen. 

Für eine gute Verständlichkeit trägt auch ein gewohntes Grundprinzip der UX tragend bei: Erfinden Sie das Rad nicht neu. Verwenden Sie Icons, die gelernt und logisch sind, um etwa Sprachauswahl, Suche, oder Warnhinweise zu kennzeichnen. Platzieren Sie wichtige Funktionen Ihrer Seite dort, wo man sie auch als erstes suchen würde. Und wenn einfache Hinweise nicht reichen schadet es nie, mit kleinen Labels zu arbeiten, um den Sachverhalt kurz und bündig zu erklären. Doch ebenso wie gewisse Gegebenheiten in der ganzen Welt des Internets gelernt sind, gilt es auch die Gegebenheiten innerhalb Ihrer Webseite zu klären und dem Nutzer beizubringen. Wenn beispielsweise Ihr Call-To-Action auf jeder Seite anders aussieht führt das nur zu Verwirrungen. Versuchen Sie sämtliche Navigations-Mechanismen zu vereinheitlichen.

Wir haben in diesem Artikel bereits von bestimmten Funktionalitäten innerhalb von Webseiten gesprochen, die das benutzen einer Website für Menschen mit Behinderungen stark erleichtern. Beim Prinzip der Zuverlässigkeit geht es nun darum, die Kompatibilität Ihrer Seite mit Tools für Barrierefreiheit zu maximieren. Hier geht es etwa um den "Screenreader", ein Programm für Sehbehinderte, welches dem User eine Seite Absatz für Absatz vorliest. Um solche Software auf Ihrer Seite einsatzfähig zu machen muss die Seite äußerst sorgfältig gepflegt sein. Die Tags müssen überall passen, die Anordnung der Überschriften muss korrekt sein und die Attribute aller Elemente geklärt sein. Das beginnt schon damit Dateien und Bilder die Sie auf Ihre Seite hochladen richtig und sinnvoll zu benennen. Ein Screenreader kann mit "Landkarte-Europa" deutlich mehr anfangen als mit "file_1". Auch die Suchmaschine wird Ihnen für die korrekte Pflege dieser von außen nicht wirklich ersichtlichen Aspekte Ihrer Seite äußerst dankbar sein.

Eine weiterer Bereich der direkt von der Verbesserung Ihres Accessible Designs profitiert, ist Ihre Suchmaschinen Sichtbarkeit. Google gefällt es, wenn Ihre Seite barrierefrei ist. Wie bereits gesagt, ist die korrekte Pflege Ihrer sogenannten Alt-Tags nicht nur für den Screenreader, sondern auch Ihr Suchmaschinen Ranking ein entscheidender Faktor. Diese Tags dienen dabei der Orientierung für den Suchalgorithmus. Und das gilt nicht nur für Ihre Platzierung auf den normalen Suchmaschinen Ergebnisseiten, sondern auch für die Bildersuche. Eine Steigerung der Zugänglichkeit Ihrer Seite wird Ihnen nicht allzu viel bringen, wenn sie von vorneherein nicht von Ihrer Zielgruppe gefunden werden. Die korrekte Implementierung von Accessible Design hilft Ihnen in beiden Bereichen zugleich. Hier erfahren Sie mehr zu SEO.

Wenn man von der User Experience spricht, geht es oft um das Thema der Usability (Benutzerfreundlichkeit). Und auch in diesem Artikel scheint die Usability auf den ersten Blick eine große Rolle zu spielen. Theoretisch ist das auch so. Wenn eine Seite eine schlechte Usability aufweist, wird sie sehr wahrscheinlich auch keine Accessibility aufweisen. Beide Bereiche sind wichtige Pfeiler des UI- und UX-Designs, die eng miteinander verbunden sind. Es gibt jedoch auch deutliche Unterschiede zwischen den Begriffen. Sie können sich das prinzipiell folgendermaßen vorstellen: Accessible Design ist die Berücksichtigung aller Enduser; Usability ist die Berücksichtigung aller Endgeräte. Das heißt, Accessible Design kümmert sich darum alle Bereiche ihrer Zielgruppe einzuschließen und das problemlose surfen auf Ihrer Seite zu ermöglichen, egal wer der Besucher ist, während Usability sich darum kümmert, das problemlose surfen auf Ihrer Seite möglich zu machen, egal wo, wann und auf welchem Device sich der User befindet.

Ich hoffe dieser Artikel konnte Ihnen die Wichtigkeit von Accessible Design klar machen und aufzeigen, wie tief dieses Thema gehen kann. Eine Seite behindertengerecht zu gestalten heißt, sie für alle User besser zugänglich zu machen. Von den Vorteilen eines barrierefreien Designs werden User, die vielleicht nicht direkt zu einer benachteiligten Gruppe gehören, trotzdem nur profitieren. Accessible Design beginnt mit den ersten Schritten der Content-Entwicklung und hört beim Livegang eventuell noch nicht auf. Das heißt aber nicht, dass es wirklich viel Mehraufwand bedeutet Ihre Website accessible zu machen, wenn Sie von vorneherein an alles denken. Eine neu entwickelte Website accessible zu machen bedeutet nicht, dass Sie Umwege gehen müssen. Sie müssen sich nur des richtigen Weges bewusst sein. Dabei können wir Ihnen helfen.

Es ist allerdings auch nie zu spät, Ihre Webseite in Hinsicht auf Barrierefreiheit zu überprüfen und nachzurüsten. Dies ist natürlich ein wenig aufwändiger als die Website von Anfang an korrekt aufzubauen, aber in den meisten Fällen sind dennoch nur wenige Schritte nötig, um Ihre Seite zugänglicher zu machen und die Kosten halten sich auch dementsprechend in Grenzen. Man muss nur damit anfangen und ein Bewusstsein dafür entwickeln. 

Auch Google achtet auf die Zugänglichkeit Ihrer Webseite und eine Anpassung zu Accessible Design führt nicht nur dazu, dass sich Ihre Zielgruppe problemlos auf Ihrer Seite zurecht findet, sondern auch, dass Ihre Zielgruppe Sie von vorneherein besser findet. 

Wie in vielen Bereichen unseres Alltags ist es auch auf Ihrer Webseite oft nicht unbedingt auf den ersten Blick zu erfassen, welche Hürden sich dort für Menschen mit Einschränkungen befinden können und kleinste Anpassungen wirken sich bereits überaus positiv für Sie und Ihre Besucher aus. Sie müssen sich nur darüber klar sein wo man anpacken muss.