Was bedeutet Accessibility?

Wörtlich übersetzt bedeutet Accessibility Zugänglichkeit. Im Kontext von Gestaltungsprozessen, beschreibt man mit Accessibility die Barrierefreiheit von Produkten und Dienstleistungen. Es geht darum, ob ein Produkt von JEDER PERSON genutzt werden kann.

Im Kern geht es darum zwei Probleme zu lösen:

• Wie wird gewährleistet, dass Menschen mit Behinderungen auf elektronische Informationen zugreifen können?
• Wie kann sichergestellt werden, dass Websites und Apps mit den Hilfsmitteln, die Menschen mit Behinderungen verwenden, einwandfrei funktionieren?

Warum ist Accessibility wichtig?

Vielleicht geht es Dir wie mir und Du findest einfach, dass es moralisch der einzig richtige Ansatz für gutes Design ist.

Und gerade im Web ist die Bedeutung von Accessibility herausragend. Viele Bereiche unsers Lebens verlagern sich zunehmend ins Web. Denken wir zum Beispiel an den Handel, Bildung (Online-Kurse), Kontaktanbahnung oder Gesundheits-Apps wie Luca.

Nicht erst seit Corona wird der Zugang zum Internet sowie zu Informations- und Kommunikationstechnologien zu einem unverhandelbaren Menschenrecht. Und das gilt natürlich für die gesamte Gesellschaft und niemand darf davon ausgeschlossen sein.

Das sagt einem nicht nur der eigene Wertekompass, sondern auch das Übereinkommen über die Rechte von Menschen mit Behinderungen CRPD der Vereinten Nationen. Es wundert daher nicht, dass Accessibility vielfach als Grundlage für Design Systeme für alle Arten digitaler Produkte definiert wird.

Von Accessibility profitieren alle

Außerdem profitieren häufig alle von einem barrierefreien Design. Die Barrierefreiheit hängt eng mit der allgemeinen Benutzerfreundlichkeit zusammen – beide zielen darauf ab, eine intuitivere Benutzererfahrung zu definieren und bereitzustellen.

Somit sind Überlegungen hinsichtlich der Accessibility ein wahrer Innovationstreiber für Unternehmen. Sie sind somit auch aus betriebswirtschaftlichen Gründen hoch interessant.

Glaubst Du nicht? Dann schau Dir die folgenden Beispiele an.

Nummer 1 – Die Entwicklung der Sprachsteuerung für Benutzer mit Beeinträchtigungen. Keiner zweifelt heute mehr daran, dass die Spracherkennungstechnologien nicht nur Menschen mit Behinderung hilft. Für viele ist sie inzwischen ganz normaler Teil des Alltags geworden. Denken wir nur an Amazons Alexa oder den Google Assistant.

Ein weiteres Beispiel ist die überaus gängige Autovervollständigung, wie wir Sie zum Beispiel von der Google Suche kennen.

Wenn Du aus der Region DACH kommst, wird Dir nicht entgangen sein, dass unsere Gesellschaft immer älter wird. Die Quote von Menschen mit Behinderungen ist gerade in älteren Gesellschaftsgruppen sehr hoch.

Insgesamt leben heute allein in Deutschland 7,9 Millionen schwerbehinderte Menschen. Natürlich verbessert es Deine Marktreichweite, wenn Du diese Menschen mit Deiner Website oder Deinem digitalen Produkt nicht außen vor lässt.

Zusammenfassend gibt es für Dich aus geschäftlicher Sicht folgende Vorteile, wenn Du Dich mit Accessibility auseinandersetzt:

• Du befeuerst die Innovationskraft Deines Unternehmens. Häufig werden Lösungen für Probleme gefunden, die allen Menschen zugutekommen.
• Barrierefreiheit zahlt auf Deine Marke und Dein Marketing ein. Diversity und Inklusion ist nicht nur moralisch richtig, sondern zum Glück auch im Trend.
• Du vergrößerst Deinen Zielmarkt
• Du minimierst Dein rechtliche Risiko: Webauftritte öffentlicher Stellen müssen seit September 2020 barrierefrei gestaltet sein.
• Definitiv ranken für Accessibility optimierte Websites besser bei Google.

Welche Arten von Behinderungen gibt es?

Wenn wir Menschen mit Behinderungen dabei unterstützen wollen, unsere Websites effektiv und friktionsfrei zu nutzen, müssen wir zunächst verstehen, was eine Behinderung ist und welche Arten es gibt.

In Deutschland gilt die Definition des Sozialgesetzbuches IX. Hiernach geht es um Menschen, die körperliche, seelische, geistige oder Sinnesbeeinträchtigungen haben, die sie in Wechselwirkung mit einstellungs- und umweltbedingten Barrieren an der gleichberechtigten Teilhabe an der Gesellschaft mit hoher Wahrscheinlichkeit länger als sechs Monate hindern können.

Natürlich kann dieser Blogbeitrag leider keinen umfänglich und medizinisch fundierten Überblick über alle Behinderungen geben. Als Webentwickler und Designer wäre ich auch nicht ausreichend kompetent hier die nötigen Details zu vermitteln.

Grundsätzlich können Behinderungsarten aber in drei Kategorien unterschieden werden.

Körperliche Behinderungen

Z. B. motorische Einschränkungen, Beeinträchtigungen der Sehfähigkeit, Hörfähigkeit und Sprachfähigkeit sowie chronische Krankheiten.

Geistige Behinderungen

Wie z.B. Lernbehinderungen, gestörte kognitive Fähigkeiten oder stark unterdurchschnittliche Intelligenz.

Seelische Behinderungen

Beispielsweise Neurosen, Persönlichkeitsstörungen, Suchtkrankheiten und Psychosen.

Weitere Informationen mit vielen interessanten Details zu den Behinderungsarten findest du in den jeweiligen Beiträgen der Integrationsämtern und im ZB SPEZIAL Was heißt hier behindert?.

Accessibility: Was sind die typischen Barrieren und Probleme?

Um Barrierefreiheit zu erreichen, müssen wir verstehen, welche Hindernisse der Nutzung unserer Produkte und Dienstleistungen im Weg stehen könnten. Das gilt nicht nur für Websites.

Es geht hierbei auch nicht nur darum, dass Menschen mit Behinderungen vollständig ausgeschlossen werden. Von Barrieren spricht man auch dann, wenn behinderte Menschen nicht gleichermaßen effektiv auf die Ressourcen zugreifen können, wie Menschen, die keine Behinderungen haben.

Mit diesem weiterführenden Begriff ist sichergestellt, dass die Ziele ehrgeizige genug gesteckt sind. Grundsätzlich gibt es folgende Arten von Barrieren.

Physische Barrieren

Hier liegen die Hindernisse in der gegenständlichen Umgebung begründet. Physische Barrieren hindern Personen mit Behinderungen sich effizient durch Umgebungen zu bewegen.

Mediale Hindernisse

Von medialen Hindernissen spricht man dann, wenn Informationen nicht in einem für Menschen mit Behinderung zugänglichen bzw. lesbarem Format verfügbar sind.

Technologische Barrieren

Hier geht es um die Unzugänglichkeit von Software und anderen Technologien, die nicht an Hilfsmittel angepasst sind.

Systemische Hemmnisse

Systemischen Hemmnisse beschreiben Prozesse, Richtlinien, Verfahren, Organisationsanweisungen und Gesetze, die Menschen mit Behinderung benachteiligen oder übermäßig belasten.

Wahrnehmungsbarrieren

Hier geht es um die Fehleinschätzungen, dass Menschen mit Behinderungen nicht so viel beitragen können wie Gleichaltrige ohne Behinderung.

Andere Barrieren

Im Kontext von Accessibility sind aber auch Barrieren zu bedenken, die nicht ausschließlich behinderte Menschen betreffen.

So kennt jeder Nutzer die Probleme des nicht performanten deutschen Mobilfunknetzes oder Websites, die nicht auf mobilen Geräten oder mit Deinem bevorzugten Browser funktionieren.

Was ist eine barrierefreie Website?

Barrierefreie Websites und Webapplikationen sind:

• wahrnehmbar
• bedienbar
• verständlich und
• robust

Und das habe ich mir jetzt nicht ausgedacht, sondern so steht es in der EU-Richtlinie 2016 / 2102 Artikel 4.

Für die Praxis liefert uns der Artikel 4 aber zu wenig konkrete Anhaltspunkte. Das hat die EU wohl auch so gesehen und gibt deshalb in Ihrem Durchführungsbeschluss auch die Europäische Norm EN 301 549 als Maßstab für die Barrierefreiheit an. (Ich verspreche gleich wird es wieder spannender und hoch relevant).

Diese Norm enthält nun den Abschnitt 9, der die Barrierefreiheit von Websites regelt und die international anerkannten Web Content Accessibility Guidelines (WCAG 2.1) genau wiedergibt.

Zum Glück ist die von der EU referenzierte Originalquelle in höchstem Maße relevant und praxistauglich. Das liegt wohl auch daran, dass die Regeln vom W3C, dem World Wide Web Consortium festgelegt wurden.

Diese Normen geben uns eine praktische Anleitung für die Erstellung von barrierefreien Webinhalten, die auch noch EU konform ist. Das W3C erhellt uns dann auch gleich in Bezog auf die 4 von der EU angegebenen Prinzipien (Anforderungskriterien). Und gibt zu jedem Kriterium eine Vielzahl von Guidelines.

Die 4 Prinzipien der Accessibility

Im Folgenden stelle ich Dir die 4 Prinzipien der Accessibility mit einigen Praxisbeispielen näher vor. Die vollständigen Kriterienkataloge findest du beim W3C.

Wahrnehmbarkeit

Die präsentierten Informationen und Nutzerschnittstellen müssen von jedem Nutzer durch mindestens einen Sinn wahrgenommen werden können.

Was bedeutet das für die praktische Umsetzung?

Es muss zum einen textliche Alternativen für nicht textliche Inhalte geben.

Zum Beispiel müssen all Deinen Bildern via alt Attribut einen passenden Alternativtext zugewiesen werden, Eingabefelder benötigen sogenannte unterstützende Labels, die den Zweck des jeweiligen Eingabefelds eindeutig beschreiben. Zierelemente (dekorative Videos und Bilder) müssen so implementiert werden, dass sie behinderte Nutzer nicht verwirren. Hierzu eigenen sich unter anderem CSS-Hintergrundbilder.

Ferner muss es textliche Alternativen für zeitbasierte Medien (Video und Audio) geben.

Zum Beispiel müssen für Tonspuren Transkripte angeboten werden und Videos müssen durch Caption Elemente beschrieben werden.

Bedienbarkeit

Die Interaktionen der Bedienelemente (Navigation, Formulare etc.) muss für jede Person möglich sein.

Das heißt zum Beispiel, dass Formulare auch von sehbehinderten Menschen einfach ausfüllbar sein müssen. Die Keyboardsteuerung Deiner Website muss so weit wie möglich gewährleistet bleiben.

Ein weiteres Beispiel sind Informationen, die automatisch aktualisiert werden. Es ist wichtig hier dem Nutzer die Kontrolle über die Geschwindigkeiten zu überlassen. Dieses erreichen wir durch Steuerelemente zum Stoppen, Anhalten oder Ausblenden von Informationen.

Nutzer sollten Animationen abschalten können, wenn diese nicht essenziell sind.

Verständlichkeit

Die Information und die Bedienung einer Nutzeroberfläche muss verständlich gestaltet werden.

Für die Praxis bedeutet das u.a., dass wir das Language Attribut korrekt einsetzen, so dass Texte automatisch übersetzt werden können. Ungewöhnliche oder schwer zu verstehende Wörter sowie Abkürzungen gilt es dagegen vermeiden. Ferner sollte die Navigation und ihre Steuerung auf jeder unserer Webseiten gleich sein. Wenn etwas schiefläuft, sollten die Nutzer mit sprechenden Fehlerinformationen versorgt werden. Beispielsweise sollten nicht plötzlich alle vorher gemachten Nutzereingaben verloren gehen etc.

Robust

Die Inhalte müssen durch eine Vielzahl von Benutzeragenten und Hilfstechnologien zuverlässig gelesen und interpretiert werden können.

Grundsätzlich ist zunächst zu gewährleisten, dass das HTML korrekt programmiert ist und es nicht zu Validierungsfehlern kommt. Wir müssen die Benutzer von Hilfstechnologien auf neue Statusmeldungen aufmerksam machen, die während der Nutzung der Seite hinzugefügt wurden.

Die Statusmeldungen informiert den Benutzer über den Erfolg oder die Ergebnisse seiner Aktion, über mögliche Wartezustände der Anwendung, über den Fortschritt eines Prozesses oder über das Vorhandensein von Fehlern.

Warum ist nicht jede Website barrierefrei?

Aus der eigenen Praxis muss ich leider feststellen, dass es nicht für jedes Projekt möglich ist die Accessibility zu 100% umzusetzen. Das zeigt sich gerade auch im deutschsprachigen Web und hat viele Ursachen.

Zum Beispiel ändern sich die Basistechnologien und damit verbundene Richtlinien stetig. Auch reicht das Budget von kleinen und mittelständischen Unternehmen für eine komplette Implementierung einfach nicht aus.

Laura Kalbag hat einen äußerst lesenswerten Katalog von Hemmnissen und Accessibility Ausreden erstellt, von denen ich hier einige frei übersetzt anführe:

• Menschen mit Behinderungen nutzen das Internet nicht wirklich.
• Barrierefreie Websites sind einfach nur hässlich.
• Wir möchten die Benutzererfahrung für die Mehrheit unserer User nicht beeinträchtigen.

Kalbag widerlegt jede dieser Ausreden, weist aber auch darauf hin, dass Barrierefreiheit im Internet wirklich weitreichende Kenntnisse über die Benutzer, den Projektkontext und ein tiefgreifendes technologisches Verständnis erfordert. All das ist in Einklang zu bringen und das ist eben keine leichte Aufgabe.

Praktische Empfehlungen für eine Barrierefreie Website

Die doch sehr umfangreichen Guidelines sollten allerdings niemanden abschrecken. Und auch wenn nicht jeder sofort in Sachen Accessibility eine 1+ mit Sternchen bekommen kann, so ist jeder Schritt und jede Maßnahme ein Schritt in die richtige Richtung.

Aus diesem Grund möchte ich mit den folgenden Guidelines die Welt der EU-Richtlinien und der WCAG  nochmal etwas verlassen und Dir wichtige, einfach umzusetzende Maßnahmen an die Hand geben, mit der Du die Usability Deiner Website gewährleisten oder verbessern kannst.

Korrekte Verwendung des Seitentitel

Besonderes Augenmerk solltest Du darauf legen, dass Dein Seitentitel auch tatsächlich im Titelattribut wiedergegeben wird. In Chrome erkennst Du das, wenn Du oben mit der Mouse über den geöffneten Browser Tab hoverst.

Korrekte Verwendung und Hierarchie der Überschriften

Überschriften werden in HTML durch die Elemente h1 bis H6 repräsentiert.  Achte darauf, dass Du die Überschriften korrekt und hierarchisch einsetzt. Die H1 ist am wichtigsten und sollte nur einmal auf der Seite vorkommen.

Unterabschnitte sollten mit einer h2 eingeleitet werden. Diese Abschnitte können dann in weitere Ebenen, die mit einer h3 beginnen, unterteilt werden.

Und das Prinzip geht dann so weiter bis zur H6. Der ideale Aufbau ähnelt dem Aufbau von wissenschaftlichen Arbeiten. Dabei solltest Du es idealerweise vermeiden Ebenen zu überspringen.

Sorge für ausreichend Kontrast

Ausreichender Kontrast zielt insbesondere auf die Unterstützung von Menschen mit Sehschwächen ab. Er kommt aber zum Beispiel auch Nutzern von Mobilgeräten bei heller Sonneneinstrahlung entgegen. Vermeide also zum Beispiel hellgrauen Text vor weißem Hintergrund. Eine großartige Hilfestellung gibt das Tool WebAIM Kontrast Checker.

Validiere Dein HTML

Die Einhaltung W3C Standards haben eine wichtige Funktion. Sie stellen sicher, dass alle Browser und eine Vielzahl von Hilfsgeräten, Deine Inhalte korrekt interpretieren. Der vom W3C entwickelte Markup-Validator ist daher ein sehr beliebtes und geschätztes Tool im Rahmen der Qualitätssicherung und Website Analyse und Optimierung.

Verständliche Texte

Durch die Verwendung einer einfachen Sprache, kannst du mehr Benutzer erreichen. Natürlich ist das nicht immer einzuhalten. Aber zum Glück gibt es eine sehr verständlich geschriebene Anleitung zum Einsatz von einfacher Sprache.

Umsichtiger Einsatz von Farben

Wichtige Kommunikation sollte nie ausschließlich auf Farbe beruhen. Menschen mit geringer Sehschärfe oder Farbenblindheit werden Schwierigkeiten bekommen, die Botschaft zu verstehen.

Zum Beispiel sollten bei Ampelsystemen mindestens immer noch ein weiterer Indikator wie eine Beschriftung hinzugenommen werden.

Biete Alternativen bei Nicht-Texten

Für Audiodateien solltest Du Transkriptionen bereitstellen. Versehe Videos mit Untertiteln und Beschreibungen und Deine Bilder mit Alternativtexten.

Verwende ARIA LABELS

Das Wort ARIA steht für Accessible Rich Internet Applications Lables. Diese bieten zusätzliche Orientierung und zeigen (im normalen Browser nicht sichtbar) bestimmte Abschnitte, die Navigation und Formulare an.

Auf diesem Weg können Screen Reader deine Inhalte leichter durchsuchen und bestimmte Informationen können verborgen werden.

Ermögliche Keyboardsteuerung

Es gibt eine Vielzahl körperlicher Einschränkungen, die es Benutzern unmöglich machen, eine Website auf herkömmliche Weise zu bedienen und sie zu navigieren. Solche Benutzer verwenden teilweise ausschließlich ihre Tastatur oder eine spezielle Spracherkennungssoftware. Dein Webdesign sollte diesen Nutzern keine Nachteile bescheren.

Setze Responsive Webdesign ein

Responsive Webdesign sorgt dafür, dass Deine Website auf jedem Gerät und das unabhängig von der Displaygröße benutzbar und gut lesbar ist. Eine Barrierefreiheit nach WCAG erfordert die Verfügbarkeit Deiner Inhalte auf möglichst vielen Geräten. Responsive Webdesign ist ein typisches Beispiel dafür, dass Accessibility für jeden von uns Mehrwerte bietet. So möchte heute keiner mehr auf dem Handy noch den Text zoomen um ihn lesen zu können.

Im Gegenteil responsive Webdesign ist heute ein wesentlicher Faktor des professionellen Webdesigns. Es gehört einfach dazu um die Benutzerfreundlichkeit zu gewährleisten.

Verwende ein CMS, das Barrierefreiheit ermöglicht

Accessibility muss nicht immer teuer sein. Zum Beispiel unterstützt das Content Managements System WordPress die Standards zur Barrierefreiheit. Das Automatic Team macht gerade bei den hauseigenen und kostenlosen Templates einen tollen Job. Allerdings solltest Du bei Websitebuildern und Kauftemplates sehr genau hinschauen. Weniger ist eben manchmal mehr.

Keine Texte als Bilder

Unter Accessibility Gesichtspunkten sind Bilder, die Texte enthalten eine wirklich schlechte Idee. Viel besser ist es echte HTML Texte mit CSS auf und über Bildern zu positionieren und zu formatieren. Ja, ich weiß, wer im Glashaus sitzt usw. Wenn Du wie ich aus Gestaltungs- oder SEO-Gründen eine andere Entscheidung triffst, sorge dafür, dass Deine Inhalte auch ohne die auf Bilder platzierten Texte verständlich sind.

Teste Deine Website

Zum Glück gibt es großartige Tools, die uns beim Testen und Analysieren Deiner Website unterstützen und uns Schwachstellen hinsichtlich der Accessibility aufzeigen. Zwei sehr wichtige sind WAVE und Color Oracle.

FAZIT

Das Internet ist fantastisch und es sollte für jeden zugänglich sein. Durch das Streben nach Barrierefreiheit können Menschen mit Behinderungen Deine Inhalte im Internet wahrnehmen, verstehen, durch sie navigieren und mit ihnen interagieren. Das ist an sich schon großartig.

Öffentliche Auftraggeber sind in der EU dazu verpflichtet Websites und Web-Apps barrierefrei zu gestalten.

Für Unternehmen, Blogger, Designer und Entwickler bieten barrierefreie Websites in unterschiedlichen Dimensionen Herausforderungen. Vor allem aber auch großartige Chancen die Welt zu bereichern, Mehrwerte zu bieten und gemeinsam zu wachsen.

Du hast Fragen, Anregungen oder Ideen rund um das Thema Accessibility und Websites? Oder möchtest Dir eine barrierefreie Website erstellen lassen? Dann nimm gerne Kontakt auf.