Barrierefreiheit im Internet

Wir meinen an dieser Stelle die Barrierefreiheit im Internet. Deren Ziel ist es, Anwendungen und Webseiten so zu gestalten, dass sie von wirklich allen Nutzer*innen auch genutzt werden können.

Alle Nutzer*innen, meint also nicht nur die Anwender*innen, die alle Sinne uneingeschränkt einsetzen können, sondern umfasst auch Personen, die körperlich oder geistig eingeschränkt sind.

Eine weitere Schreibweise ist auch "a11y". Die Zahl 11 bezieht sich hierbei auf die Anzahl der mittleren Buchstaben des Wortes "Accessibility". Es folgt damit einer Konvention aus der Informations- und Kommunkationstechnologie, in der wiederkehrende wichtige Begrifflichkeiten nach diesem Schema abgekürzt werden. Ein weiteres Beispiel ist der Begriff "Internationalisierung" mit "i18n".

Wenn die Benutzung anstrengend wird

Betroffen sind viele von uns - einige mehr und andere weniger.

Ein paar Beispiele:

• Eine Freundin empfiehlt uns einen Blog, der sich mit veganer Ernährung befasst. Begeistert klicken wir auf den Link, nur um dann festzustellen, dass alles in weißer Schrift auf hell beigem Hintergrund verfasst wurde. Nach ein paar Minuten bekommen wir Kopfschmerzen und verlassen die Seite. Das Lesen hat angestrengt.
• Wir möchten die nächste Bahnreise buchen und stellen erfreut fest, dass es wenige Tickets zu einem reduzierten Preis gibt. Bei dem Versuch schnell zu sein, klicken wir aus Versehen auf die Zugverbindung da drunter. Die Buttons liegen aber auch eng beieinander! Frustriert warten wir, bis sich die Seite aufgebaut hat und klicken zurück. „Das Formular kann nicht erneut gesendet werden“. Argh! Dann suchen wir eben neu - nur um festzustellen, dass die vergünstigte Verbindung nicht mehr verfügbar ist.
• Unser Großvater reicht uns sein Handy: „Was steht da? Das ist viel zu klein geschrieben.“ Ein Zoomen ist nicht möglich und die Schriftgröße lässt sich auch nicht einstellen.
• Auf einer Webseite, zu der wir zu Recherche-Zwecken unterwegs sind, öffnen sich immer wieder nervige Popup-Fenster. Auch beim Verlassen der Seite öffnet sich wieder Werbung.

Wir alle kennen solche und ähnliche Situationen aus unserem Alltag, die vermeidbar wären, wenn zum Beispiel Kontraste von Schriften richtig gesetzt oder Buttons weit genug auseinander liegen würden.

Die wenigsten von uns können nachvollziehen wie es ist, aufgrund einer körperlichen Einschränkung, die Maus nicht nutzen zu können.

Durch fehlende Feinmotorik nicht dort zu klicken, wo man eigentlich hin wollte.

Oder sich von einem Screenreader alle Inhalte vorlesen zu lassen.

Beispiele für Barrieren:

Physiologische Barrieren

Physiologische Barrieren treten auf, wenn die Motorik eines Menschen gestört ist. Zu unterscheiden ist zwischen fehlender Feinmotorik, also der Schwierigkeit auf kleine Links und Buttons zu klicken und einer körperlichen Beeinträchtigung. Letzteres kann dazu führen, dass zum Beispiel die Maus und/ oder die Tastatur nicht benutzt werden kann.

Auditive Barrieren

Eine weitere Barriere ist das eingeschränkte oder fehlende Hörvermögen. Videos und Audiospuren können dann nicht einfach abgespielt und verstanden werden. Auch Benachrichtigungstöne können nicht wahrgenommen werden.

Visuelle Barrieren

Es gibt eine Vielzahl an visuellen Barrieren. So gibt es Menschen, die an einer Rot-Grün Sehschwäche leiden und Inhalte auf Webseiten anders wahrnehmen. Menschen mit Farbenblindheit sehen Grafiken und Bilder anders. Menschen mit fehlendem Sehvermögen benutzen Screenreader, um durch das Internet zu navigieren und sich Inhalte vorlesen zu lassen.

Welche Anpassungen kann mein Unternehmen jetzt schon umsetzen

Es gibt viele Optionen, die eigene Webseite oder App möglichst barrierefrei zu gestalten. Möchten Sie es richtig angehen, steht zu aller erst ein Test der eigenen Seite an. Darauf folgt eine individuelle Beratung mit geschulten UX-Designer*innen und einem a11y-Team.

Die Handlungsempfehlungen sind dabei so individuell wie jede Anwendung selbst. Ein paar Wiederholungsfaktoren gibt es allerdings.

UX-Designer*innen müssen beim Erstellen einer Anwendung auf die Farben achten. Ein besonders kontrastreiches Design und eine gut leserliche Schriftgröße und -art, helfen bei der Lesbarkeit.

Bilder sollten immer mit ein einem ALT-Tag versehen werden. So können Screenreader sie erfassen und auslesen.

Bei Audiowiedergaben muss auf alternative Lösungen zum Ton gesetzt werden. Bei Videos kann ein Untertitel eingeblendet oder auf "Closed Captions", die erweiterte Form der Untertitel, zurückgegriffen werden. "Closed Captions" verschriftlichen nicht nur das gesprochene Wort, sonder auch andere Informationen wie Hintergrundgeräusche.

Motorisch eingeschränkte User*innen profitieren von gut klickbaren Flächen. Links und Buttons sollten dafür nicht zu eng beieinander liegen und auch nicht zu klein sein. Es geht darum die Klickfläche so groß zu halten, dass sie auch ohne feinmotorische Maus-Bewegungen getroffen werden kann. Auf Hover-Links sollte weitestgehend verzichtet werden.

Eine weitere Hilfe ist die Skalierbarkeit von Schriftgrößen. Ist diese einstellbar freuen sich Nutzer*innen mit einer Sehbeeinträchtigung. Positiver Sideeffect: Die Bounce Rate wird sich auch verringern.

Um Menschen die Nutzung einer Webseite zu erleichtern sind Tastaturkürzel von großer Bedeutung. Auch bei unbeschränkten Menschen kann die Tastaturbedienung die Usability erhöhen, da Interaktionen auf der Webseite auch für sie einfacher und zeitsparender werden können.

Welche Tools kann ich nutzen, um potentielle Barrieren auf meiner Website zu überprüfen?

1. WAVE Web Accessibility Evaluation Tool:
   Dies ist ein kostenloses Online-Tool, das dir dabei hilft, die Barrierefreiheit deiner Website zu überprüfen. Es identifiziert potenzielle Probleme und bietet Verbesserungsvorschläge.
2. Screen Reader Simulation:
   Verwende Tools wie den Web Developer Extension für Chrome oder die eingebauten Screen-Reader-Simulationen in den Browser-Entwicklertools, um deine Website aus der Perspektive eines Nutzers mit Sehbehinderung zu betrachten.
3. Color Contrast Checkers:
   Überprüfe den Kontrast zwischen Text und Hintergrundfarben, um sicherzustellen, dass deine Inhalte für Menschen mit Sehschwierigkeiten gut lesbar sind. Tools wie der Color Contrast Checker von WebAIM können dabei helfen.
4. Keyboard Navigation Testing:
   Stelle sicher, dass alle Interaktionen auf deiner Website auch über die Tastatur zugänglich sind, da viele Menschen mit Behinderungen auf Tastaturnavigation angewiesen sind. Teste deine Website, indem du nur die Tastatur benutzt, um durch die Seiten zu navigieren.
5. HTML- und CSS-Validatoren:
   Validiere deinen HTML- und CSS-Code, um sicherzustellen, dass er den Standards entspricht und keine Fehler enthält, die die Barrierefreiheit beeinträchtigen könnten.
6. Responsive Design Testing:
   Überprüfe, ob deine Website auf verschiedenen Geräten und Bildschirmgrößen gut funktioniert. Stelle sicher, dass alle Inhalte und Funktionen auch auf mobilen Geräten zugänglich sind.
7. Barrierefreie Schriftarten und Icons:
   Verwende gut lesbare Schriftarten und klare Icons, um die Benutzerfreundlichkeit für Menschen mit Sehbehinderungen zu verbessern. Achte darauf, dass Schriftgrößen anpassbar sind.
8. Barrierefreie Formulare:
   Stelle sicher, dass deine Formulare gut strukturiert und mit entsprechenden Beschriftungen versehen sind. Verwende auch hier klare und verständliche Fehlermeldungen.
9. Video- und Audio-Untertitelung:
   Wenn du multimediale Inhalte auf deiner Website verwendest, sorge dafür, dass diese für Menschen mit Hörbehinderungen zugänglich sind, indem du Untertitel und Transkriptionen bereitstellst.
10. Benutzerfeedback einholen:
    Biete deinen Nutzern die Möglichkeit, Feedback zur Barrierefreiheit deiner Website zu geben. Dies kann dir helfen, Schwachstellen zu identifizieren und zu verbessern.

Good to know: a11y für besseres SEO

Barrierefreiheit ist nicht nur für Menschen bereichernd. Auch Suchmaschinen und ihre Crawler freuen sich über möglichst barrierefreie Webauftritte.

So kann eine klare inhaltliche Struktur einer Webseite mit Überschriften von H1 bis H6 und gelegentlichen fetten und kursiven Textpassagen die Crawler auf wichtige Inhalte aufmerksam machen.

Sind auf allen Seiten die Meta Descriptions, Title Tags und ALT-Tags gesetzt, können Inhalte besser eingeordnet und bewertet werden.

Von einem sauberen Quellcode profitieren am Ende nicht nur Benutzer*innen eines Screenreaders, sondern auch die Webseite selbst mit einem verbesserten Ranking in den Suchergebnissen.

A11y und die künstliche Intelligenz:

Die Implementierung von Barrierefreiheit auf Websites kann zeitintensiv sein, aber wichtig für die Inklusion aller Nutzer*Innen. Technologische Fortschritte, insbesondere im Bereich der künstlichen Intelligenz (KI), könnten dabei helfen, Barrieren zu überwinden. Automatisierte Bildbeschreibungen, Spracherkennung und das automatische Tagging von Dokumenten sind nur einige Beispiele dafür.

Tools wie SeeingAI und MVision AI zeigen bereits, wie KI Menschen mit Sehbehinderungen helfen kann, indem sie Bilder und Szenen beschreiben. Doch während einige automatisierte Lösungen nützlich sind, sind andere wie Accessibility Overlays oft unzureichend und können sogar die Barrierefreiheit beeinträchtigen.

Die Weiterentwicklung von KI könnte auch bei der Erstellung verständlicher Sprache und der automatischen Testung von Websites helfen. Jedoch sollten wir realistisch bleiben: Während einige Aufgaben von KI effektiv übernommen werden können, ist sie nicht in der Lage, die Kreativität und menschliche Intuition zu ersetzen.

Wir helfen bei der Umsetzung einer barrierefreien Anwendung

Sind Sie an einer Umsetzung auf Ihrer Webseite interessiert und planen Sie in nächster Zeit ein neues Projekt? Unsere ally-geschulten UX-Designer*innen und Entwickler*innen begleiten Sie gerne auf dem Weg. Unterstützt werden sie zusätzlich von unserem eigens gegründeten A11y-Squad.

Ob durch individuelle Beratung, Erstellung erster Mock-Ups oder die konkrete Umsetzung von Design und Entwicklung - wir sind der passende Partner.