Ganz egal, ob sehbehindert, taubstumm oder gehörlos — sobald eine Person mit einer körperlichen Einschränkung Teil einer Zielgruppe werden soll, sind ihre besonderen Ansprüche zu berücksichtigen. Eine vom Bundesministerium für Wirtschaft und Technologie (BMWi) durchgeführte Studie fand heraus, dass Menschen mit Behinderung mehr Zeit im Internet verbringen, als Menschen ohne Behinderung. Leider nehmen noch immer viele Webseiten keine oder nur unzureichend Rücksicht auf die damit einhergehenden Anforderungen.
Nachfolgend haben wir zehn Maßnahmen zusammengestellt, um einen ungehinderten Zugang zu Informations- und Kommunikationsmedien für Menschen mit Altersschwächen, kognitiven Schwierigkeiten, Sprachproblemen und geschädigtem Seh- oder Hörvermögen zu ermöglichen:
Schriftgröße
Bereits beim Öffnen einer Website oder App stellt die Schriftgröße das erste Problem dar. Menschen mit einer Sehbehinderung nehmen Inhalte besser wahr, wenn sie stark vergrößert sind. Eine fehlende Skalierbarkeit stellt somit eine Barriere dar.
Beispielsweise erlaubt die responsive Website von USA Today eine 3-stufige Darstellung der Schriftgröße.
Skalierbare Schriftgröße (Screenshot: USA Today)
Zwar unterstützen mittlerweile alle Browser den Seitenzoom, die Anforderung an die Textvergrößerung nach WCAG erfüllt er jedoch nicht. In den Web Content Accessibility Guidelines (WCAG) 2.0 können Empfehlungen zur Schriftgröße nachgeschlagen werden.
Schriftart
Es ist schwer zu entscheiden, was frustrierender sein kann: Eine zu kleine gewählte Schriftgröße, die nur bei extremer Bildschirmnähe zu lesen ist oder eine ungünstig verschnörkelte Schriftart, die es zu entschlüsseln gilt. Wenn es um Barrierefreiheit geht, dann müssen Designer sorgsam mit "fancy" Schriften umgehen. Eine unleserliche Schriftart bremst oft den Lesefluss.
Empfehlenswert für den Fließtext ist eine gut lesbare Groteskschrift (keine Serifenschrift oder Antiquaschriften). Zudem sollte darauf geachtet werden, den linksbündigen Flattersatz zu verwenden. Bei Texten mit Blocksatz entstehen oft ungewollte "Löcher", die das Lesen zusätzlich erschweren.
Beispiel für eine barrierearme Font (Open Sans vs. Arial)
Kontrast
Eine weitere Ursache für schwer zugängliche Medien sind häufig mangelhafte Kontraste. Schwache Farbkontraste führen dazu, dass wichtige Informationen oder Call-to-Actions nicht gesehen werden. Demnach ist für ausreichenden Kontrast in Texten und Bildern zu sorgen. Eine vollumfängliche Berücksichtigung der daraus resultierenden Regeln bedeutet eine enorme Einschränkung der gestalterischen Möglichkeiten. Ein hilfreicher Mittelweg ist eine nach Bedarf aktivierbare alternative Darstellung.
Die Website der KfW Bankengruppe beispielsweise bietet am Seitenanfang rechts eine Möglichkeit an, die Kontraste zu erhöhen.
Ansicht ohne zusätzliche Kontraste (Screenshot: KFW)
Ansicht mit zusätzlichen Kontrasten (Screenshot KFW)
Weitere Beispiele:
- THEOLOGISCHE HOCHSCHULE ELSTAL (Stand: August 2017)
- HOCHSCHULE DARMSTADT (Stand: August 2017)
Sprache
Die meisten Menschen verstehen unter Barrierefreiheit Rampen statt Treppen. Das ist zwar nicht falsch, allerdings auch nicht ausreichend.
Beim Verfassen von behindertengerechten Texten in Medien muss insbesondere die Komplexität der gewählten Sprache beachtet werden. Eine einfache und verständliche Sprache bildet die Grundvoraussetzung für ein barrierefreies Verständnis von Texten durch Menschen mit geistiger Behinderung oder Lernschwierigkeiten. Auf überflüssige Textinformationen sollte verzichtet werden. Kurze, prägnante Sätze und gut gewählte Schlagwörter können wirkungsvoller sein als Erklärungsergüsse.
Das Webportal des Bundesministeriums für Arbeit und Soziales berücksichtigt neben der Alltagssprache auch die "leichte Sprache" und "Gebärdensprache". In Form von Reitern am oberen Bildschirmrand lässt sich der Sprachmodus der Website ändern.
Wechseln der Sprachen zur leichten Sprache und Gebärdensprache (Screenshot: Einfach Teilhaben)
Weitere Beispiele:
- WELT AIDS TAG (Stand: August 2017)
- BUNDESBANK (Stand: August 2017)
- BAYERISCHES LANDESPORTAL (Stand: August 2017)
Farbklima
Die weitaus häufigste Form der Sehbehinderung ist die Farbblindheit. Dabei handelt es sich in den geringsten Fällen um eine Achromatopsie, also eine vollständige Farbenblindheit. Die meisten Betroffenen navigieren mit einer Rot-Grün- oder Blau-Gelb-Schwäche durchs Internet. Diese Schwächen führen dazu, dass die Farben Rot/Grün beziehungsweise Blau/Gelb nicht vollständig voneinander unterschieden werden können.
Die Usability einer Webseite leidet meistens darunter, dass bestimmten Farben eine Bedeutung zugewiesen wird. Beispielsweise in Form von Diagrammen oder farblichen Symbolen. So könnte in einem Online-Shop ein grüner Button signalisieren, dass das Produkt noch lieferbar ist, während ein roter Button signalisiert, dass das Produkt nicht mehr auf Lager ist. Für Menschen mit einer Rot-Grün-Schwäche ist dann nicht mehr zu erkennen ob die gewünschten Produkte tatsächlich vom Online-Shop lieferbar sind.
Abhilfe schafft man, indem Informationen nicht nur durch Farben, sondern auch durch Symbole, Beschriftungen oder Muster (z.B. schraffierte und gepunktete Flächen in Diagrammen) vermittelt werden.
Mit Hilfe von Online-Tools wie Toptal, VisCheck oder eye.syde kann getestet werden, wie Ihre Webseite von Menschen mit Störungen in der Farbwahrnehmung gesehen wird.
Idealerweise ist das Farbklima von Benutzungsoberflächen auf die Zielgruppe abgestimmt oder der Benutzer kann das Farbklima selbst bestimmen. So in etwa macht es die Notizen-App Evernote. Hierfür bietet die App drei Themes an.
Auswahl des Farbklimas (Screenshot: Evernote)
Will man jedoch für Senioren gestalten, dann kann dies weit über den ästhetischen Anspruch hinausgehen. Hierfür braucht man als Designer das Talent, sich in die Realität des Älterwerdens einzufühlen, denn ältere Menschen sehen anders.
Eine gute, sinnvolle Farbe für Senioren ist beispielsweise ein kräftiges rot. Rot können ältere Menschen besonders gut sehen, weil sie oft unter "Grauem Star" beziehungsweise einer Trübung der Linse erkranken. Die Trübung bewirkt häufig eine Verschiebung des Lichtspektrums von blau/grün zu gelb/rot. Daraus resultiert eine veränderte Farbwahrnehmung.
Hilfestellungen
Um die Verständlichkeit einer Website oder App – insbesondere für Menschen mit Behinderung – zu erhöhen, sollten Designer auf Verlangen oder proaktiv situationsspezifische Erklärungen anbieten. Die "Grundsätze der Dialoggestaltung" (DIN EN ISO 9241-110) schreiben dieses Qualitätsmerkmal unter dem Punkt Selbstbeschreibungsfähigkeit vor.
Die Rechtschreibprüfung von Duden zeigt mit der konkreten "In-Kontext"-Beschreibung, wie der Benutzer das Modul verstehen und bedienen kann.
Hilfestellungen zur Benutzung der Rechtschreibprüfung von Duden (Screenshot: Duden)
Wartezeiten
Kein Mensch wartet nach einer ausgeführten Aktion gerne auf die Reaktion eines Systems. Ist zudem nicht absehbar wie lange die noch verbleibende Wartezeit sein wird, kann das doppelt frustrierend sein.
Gerade Menschen mit Behinderungen sollten während der Bearbeitungszeit nach einer Aktion nicht im Unklaren darüber gelassen werden, ob die Interaktion erfolgreich war. Längere Wartezeiten müssen daher deutlich visualisiert und gegebenenfalls mit gut vorhersagbaren Zeiten versehen werden.
Eindeutige Linkkennzeichnung
Verlinkungen sollten deutlich von anderen Inhalten einer Website oder App unterschieden werden können. Den WCAG-Richtlinien zufolge dürfen sie nicht einfach nur durch Farben von anderen Webseiteninhalten abweichen. Es bedarf einer zusätzlichen Kennzeichnung oder Hervorhebung, wie zum Beispiel gefettetem Text oder Unterstreichungen. Als Konvention hat sich die Darstellung von Verlinkungen in blauer Farbe und Unterstreichung durchgesetzt.
Mit Hilfe von Symbolen, welche allerdings im Kontrastmodus darstellbar sein müssen, können Links ebenfalls für den Benutzer hervorgehoben werden. Eine unterschätzte Möglichkeit zur Kennzeichnung von Verlinkungen verbirgt sich im sogenannten "Ankertext". Der Ankertext umgibt den Link und lässt sich beliebig gestalten. So kann dem Benutzer ein zusätzlicher Mehrwert geboten werden, indem er darüber informiert wird was sich hinter einem Link befindet. Zum Beispiel: "Weitere Informationen zum Thema "Barrierefreies Webdesign" finden Sie auf barrierefreies-webdesign.de." Alternativ kann man auch eine Aufforderung in den Ankertext einbauen. Dadurch wird der Nutzer nicht nur informiert, sondern gleichzeitig zum Klick angeregt: "Klicken Sie hier um mehr zum Thema "Barrierefreies Webdesign" zu erfahren."
Vorlesefunktion
Auch Menschen mit Sehschwächen sind auf Medien angewiesen. Ein Screenreader ermöglicht es ihnen, sich die Inhalte einer Website oder App vorlesen zu lassen. Es gibt dafür verschiedene technische Ansätze. Moderne Browser bieten eine eingebaute Vorleseoption. Die Qualität des Ergebnisses hängt bei der Nutzung wiederum stark von der Strukturierung der Seiteninhalte ab.
Die Website der Evangelischen Kirche im Rheinland geht noch einen Schritt weiter und stellt ihren Seitenbesuchern selbst eine Vorlesefunktion über den Anbieter ReadSpeaker bereit. Darüber wird die entsprechende Stelle im Text farblich hervorgehoben und automatisch mitgescrollt.
Inhalte einer Webseite vorlesen lassen (Screenshot: Kiel Landeshauptstadt)
Session-Timeouts
"Ihre Sitzung ist abgelaufen" — Für den Benutzer ist diese Meldung selten eine gute Nachricht. Am allerwenigsten können sich Senioren und Menschen mit motorischen oder geistigen Behinderungen darüber freuen, weil sie deutlich länger als der Durchschnittsnutzer brauchen, um eine Aktion auszuführen.
Zunächst sollte die Information zur Länge der Session-Zeit an einer prominenten Stelle platziert werden, damit die Nutzer über das Zeitlimit informiert werden. Hilfreich ist auch eine Nachricht darüber, ob vorangegangene Interaktionen oder Transaktionen erfolgreich fertiggestellt wurden. Diese Nachrichten sollten klar und deutlich formuliert sein. So zum Beispiel: "Ihre Sitzung ist abgelaufen. Um die Sicherheit Ihres Benutzerkontos zu wahren, wurden Sie aus unserem Online-Service ausgeloggt. Die Bestellung, welche Sie während der Sitzung aufgegeben haben, wurde von uns aufgenommen und wird bearbeitet. Sie erhalten von uns eine E-Mail als Bestellbestätigung."
Um dem potentiellen Frust vorzubeugen, hilft ein gut sichtbarer Timer. Der Benutzer wird so von Anfang darüber informiert, wieviel Zeit noch für den angestoßenen Prozess verbleibt.
Anzeige der Session-Zeit (Screenshot: Sparkasse)
Fazit: Der Optimierungsbedarf ist hoch
Barrierefreiheit spielt in der Medienlandschaft eine immer wichtiger werdende Rolle. Sie setzt prinzipiell eine Möglichkeit der Zugänglichkeit ohne eine fremde Hilfe voraus.
Fassen wir die aufgezählten Empfehlungen einmal zusammen:
Verwenden Sie saubere, schnörkellose Schriftarten
Sorgen Sie für eine ausreichende Schriftgröße und die Möglichkeit zur Skalierung
Bieten Sie eine optionale alternative Farbdarstellung an
Bieten Sie Sprachoptionen, wie einfache Sprache, an
Optimieren Sie Ihre Seite für Screenreader
Heben Sie Verlinkungen deutlich hervor
Weisen Sie Nutzer rechtzeitig auf Timeouts hin
Um eine gute Zugänglichkeit für Menschen mit Behinderungen gewährleisten zu können, sollten zunächst Fragen zur Zielgruppe und darin verbreiteten Behinderungsarten gestellt werden. Anschließend lassen sich oben aufgeführte Maßnahmen priorisieren und schrittweise implementieren.
Selbstverständlich gibt es zahlreiche weitere Normen und darauf antwortende Maßnahmen. Je nach Interface und Zielgruppe sollten Elemente nicht nur über eine Maus navigierbar sein, sondern auch über die Tastatur erfolgen können. Essentiell wichtig für alle Beteiligten ist der individuell richtige Mittelweg zwischen Gestaltungsfreiheit, modernem Webdesign und eben den notwendigen Maßnahmen zur Barrierefreiheit. Die vollständige Berücksichtigung der Regeln zur Barrierefreiheit nimmt Webseitenbetreibern jedoch gestalterische Freiheiten und somit Flexibilität. Es ist daher notwendig sich Gedanken über die Zielgruppe der Webseite zu machen und sinnvoll abzuwägen welchen Zweck die Webseite erfüllen, wer von ihr angesprochen werden soll und welche Gestaltungsmöglichkeiten dafür genutzt werden müssen.
Wir prüfen gerne, ob Ihr Produkt den barrierefreien Zugang ermöglicht. Kontaktieren Sie uns!
Ebenfalls interessant
- MEHR ÜBER USER EXPERIENCE DESIGN– Warum User Experience Design mehr als nur ein schönes Design ist
- USER EXPERIENCE ALS ERFOLGSFAKTOR– Drei zentrale Fragen für ein gutes User Experience Design
- CORPORATE INNOVATION KIT– Bringen Sie Ihr Business mit uns voran!
Über Candylabs
Wir befassen uns mit allen Aspekten der User Experience-Konzeption, Gestaltung und technische Entwicklung nutzerzentrierter, prototypischer Hard- und Softwareprodukte. Mittelständische Unternehmen und Großkonzernevertrauen dabei auf unsere strategische Herangehensweise nach Lean Startup-Prinzipien, die uns erlauben, maßgeschneiderte Konzepte iterativ zu erarbeiten.
Bildquelle Header: davidmulder61Flickr via Compfightcc
