27 Sep Wie geht eigentlich Barrierefreiheit im Web? So machst du deine Webseite zur Wohlfühloase.

Lesezeit: ca. 20 Minuten

 

Barrierefreiheit im Alltag

Kleine Anekdote: Als Kind hatte ich panische Angst vor Rolltreppen. Während andere Eltern im Einkaufszentrum damit beschäftigt waren, ihrem Nachwuchs nachvollziehbar zu erklären, warum das eine Spielzeug für heute erst einmal genug Ausgaben bedeutet, war meine Familie stets auf der Suche nach dem nächsten Fahrstuhl.

Was hat das mit unserem Thema zu tun? Ich kann mittlerweile auch Rolltreppe fahren (Ja, ich bin auch stolz). Doch zum Beispiel rund 1,4 Millionen Rollstuhlfahrer in Deutschland können das nicht und erleben täglich, wie sie bei der Gestaltung unserer Umwelt ignoriert wurden.

 

Barrierefreiheit im Real Life

Habt ihr euch beim Einstieg in einen ICE schonmal gefragt, wie zur Hölle eure Großeltern hier hinein kommen sollen? Wusstet ihr, dass nur 1,5% der Wohnungen in Deutschland barrierefrei sind? Was machen eigentlich Rollstuhlfahrer, wenn der einzige Fahrstuhl wieder einmal außer Betrieb ist? Wieviele für Blinde optimierte Ampeln gibt es in deiner Straße?

Das Hauptproblem besteht vor allem in der fehlende Sensibilisierung. Wer gesund ist und keine komischen Kinderängste hatte, macht sich keine Gedanken über die Verteilung von Fahrstühlen im Einkaufszentrum, Rampen an Türen und Braille-Wegweisern. Und wer das Problem nicht sieht, der findet auch keine Lösung.

Klar, darüber zu Sprechen ist nobel und wichtig, doch was hat das mit deiner Webseite zu tun? Genau wie die ideale reale Welt ist eine perfekte virtuelle Welt barrierefrei. Das heißt, alle Nutzer können alle Angebote nutzen, alle Inhalte abrufen und sich frei im Neuland des World Wide Webs bewegen.

 

Warum Accessibility noch cooler ist

Das ist nicht nur gut für wie-auch-immer eingeschränkte Nutzer, sondern auch gut für dich. Wenn alle deine Seite besuchen und verwenden können, bedeutet das im Umkehrschluss mehr Besucher, Kunden und Leser auf deinem Webauftritt.

Wie-auch-immer muss hier übrigens nicht unbedingt Blindheit, Taubheit oder fehlende Gliedmaßen bedeuten. Auch weniger schwerwiegende Dinge wie Farbenblindheit, Zittrige Hände, gebrochene Arme, eine einfache Sehschwäche oder spezielle Ängste können das Erlebnis deiner Webseite extrem einschränken.

Ein barrierefreies Web-Angebot bedeutet übrigens auch eine bessere User Experience für jeden anderen in keiner Weise eingeschränkten Nutzer. Und wie wichtig User Experience ist, hast du ja bereits in unserem Blogbeitrag über UX-Design gelernt. Also ein Win für alle, wow!

 

 

“Das will ich auch”

Wenn Barrierefreiheit so cool ist, warum sind dann nicht bereits alle Websites barrierefrei? Das ist eine gute Frage, lässt sich aber zu großen Teilen ähnlich wie in der realen Welt beantworten: Fehlende Sensibilisierung, fehlende Akzeptanz und fehlende Ressourcen.

 

Deine ToDo-Liste für deine barrierefreie Webseite

Schritt Eins ist also, dir darüber bewusst zu werden, das auch Menschen mit diversen Einschränkungen zu deiner Zielgruppe gehören. Das gilt für jede Website. Wirklich jede. Besonders wichtig ist es aber, wenn du weißt, das eingeschränkte Menschen den Großteil deiner Zielgruppe ausmachen, also zum Beispiel bei einer Arztpraxis. Genau zu dem Thema haben wir übrigens noch einen ausführlicheren Blogbeitrag „Corporate Website“ geschrieben.

Schritt Zwei ist die richtige Planung deiner Website. Ja, natürlich ist es ein Mehraufwand, deine Webseite beispielsweise für assistive Technologien zu optimieren. Das bedeutet zusätzliche Arbeitsstunden für deinen Lieblings-Webdesigner und auch für den Programmier deines Vertrauens. Davon sollte sich dein Team nicht abschrecken lassen. Also bring am besten vorher in Erfahrung, ob deine Agentur Erfahrung mit dem Thema Accessibility (heutiges englisches Buzzword für Barrierefreiheit) hat und für das Thema ausreichend sensibilisiert ist. Denn nur so kann die Barrierefreiheit schon beim allerersten Designentwurf mitberücksichtigt werden und nervige und aufwändige Änderungen im Nachhinein vermieden werden. Denn schon eine im Corporate Design falsch gewählte Primary Color kann Nachteile für die Barrierefreiheit mit sich bringen.

 

 

“Wie sieht denn jetzt eine barrierefreie Website aus?!”

Was muss man eigentlich alles tun, um die Barrierefreiheit sicherzustellen? Am besten hält man sich an bewährte Guidelines und Richtlinien, denn ohne alle Einschränkungen selbst erlebt zu haben (und das wünschen wir Niemandem), wird man mit hundertprozentiger Wahrscheinlichkeit einige Bedürfnisse übersehen, ganz ohne böse Absicht.

In unserer Agentur halten wir uns an die W3 Accessibility Guidelines.

Guidelines schön und gut, aber du kannst dir noch immer nichts unter Barrierefreiheit im Web vorstellen? Kein Problem, das können die Wenigsten auf Anhieb. Hier ein paar frei erfundene Beispiele für Anwendungsfälle:

 

Deine Homepage für Hörbuch-Fans

Wisst ihr, wie ich meinen morgendlichen Arbeitsweg am liebsten überstehe? Mit Hörbüchern. Natürlich bin ich in der glücklichen Lage auch Bücher aus Papier zu genießen, doch die Erfindung des Hörbuchs hilft nicht nur mir morgens im Bus, sondern auch Blinden und anderweitig sehbehinderten Menschen beim “Lesen”.

Genauso funktioniert es auch auf deiner Webseite. Blinde, sehbehinderte oder lesefaule Menschen (erinnerst du dich, wie ich erwähnte, dass Barrierefreiheit die User Experience overall verbessert?) können sich einfach den Inhalt deiner Webseite vorlesen lassen.

 

Wo liegt das Problem für barrierefreie Webseiten?

Klingt einfach, bringt aber einige Probleme mit sich. Anders als ein Buch besteht dein Webauftritt vermutlich nicht nur aus weißen Seiten mit Text.

Hinzu kommen Bilder, Icons, Bedienelemente wie Menüs und Buttons, Videos, Animationen… Das ist in vielen Fällen nur schwer vorlesbar. Und dann soll den Job auch noch ein Computer übernehmen. Also müssen deine Programmierer den Content deiner Seite für solche Vorlesesoftware- oder Plugins verständlich machen. Denn um barrierefrei zu sein, darf deine Website einem blinden Nutzer keine Information verwehren, nur weil er nicht sehen kann.

 

 

Deine Internetpräsenz für PC-Nerds der ersten Stunde

Ich mag meine Maus als Eingabegerät. Selbst mit einem Touch-Display verwende ich bevorzuge ich die gute alte Maus gegenüber der modernen Alternative. Doch so alt ist die Maus noch gar nicht. In grauer Vorzeit, so heißt es, wurden Computer ausschließlich per Tastatureingabe verwendet. Doch auch meine Kollegen aus dem Team Development scheinen diese Taktik bevorzugt zu verwenden. Wie echte Hacker aus Hollywood.

 

Was heißt das für dich?

Für solche und taktil, oder auch im Sehen eingeschränkte Menschen, die die Tastatur ebenfalls nutzen um Websites zu bedienen und die Vorlese-Funktion zu steuern, muss eine Website per Tastatur bedienbar sein. Das heißt, dass alle Inhalte erreichbar sein müssen, um jede Information vorlesbar zu machen, aber auch, dass Buttons und Formulare per Tastatur ausgefüllt werden müssen – und zwar ausschließlich per Tastatur.

Auch hier muss vor allem das Coding Team an die Arbeit, um alle Inhalts- und Bedienelemente per Tastenhämmern erreichbar und verwendbar zu machen.

 

 

Dein Online Shop für deine Omi

Eine fiktive Geschichte über deinen Erfolg: Endlich bist du selbstständig und hast deinen eigenen Online Shop! Dein Dank geht an alle, ohne die das niemals möglich gewesen wäre: deine Kaffeemaschine, deine Agentur, deine Eltern und deine Omi. Stolz zeigst du ihnen deinen Shop, doch – oh Schreck – Omi kann nichts erkennen. Vielleicht liegt es daran, dass sie ihre Brille wieder verlegt hat, vielleicht liegt es am einsetzenden grauen Star… Auf alle Fälle hat dein Online-Shop nicht genug Kontrast! Und Texte auf bunten Bildern! Außerdem verwendet deine Omi einen alten kleinen Bildschirm und Teile des Inhalts werden einfach abgeschnitten. Das ist wohl keine responsive Website.

Zum Glück ist das nur eine erfundene Story, denn in der Realität würdest du natürlich ein Design für deinen Online-Shop wählen, das jegliche Barrieren für deine Omi vermeidet.

Am besten würdest du auch hier eine professionelle Kreativagentur beauftragen, die die richtigen Kontrastwerte, Mindestgrößen und Voraussetzungen für ein responsives und barrierefreies Design in- und auswendig kennt.

 

 

Dein Webauftritt für die Jugend von heute

Zum Thema Responsivität: Nicht nur deine Omi und ihr 19-Zoll Röhrenmonitor leiden unter einem nicht optimierten Design. Auch alle Menschen, die deine Website per Smartphone besuchen, können mit deinem Content wenig anfangen, wenn er nicht für die verschiedensten Endgeräte designed wurde. Hinzu kommt ein weiteres, völlig neues Eingabemittel – der Finger. Zu kleine Touch-Targets auf dem Smartphone können dich echt zur Weißglut bringen – sorg dafür, dass deine Website keine solchen Gefühle weckt.

Du siehst, Barrierefreiheit geht weit über Websites für Blinde und ältere Menschen hinaus. Meine kleinen Beispiele hier decken auch nur einen Bruchteil der realen Anwendungsbeispiele ab.

Vieles deckt sich aber auch mit Prinzipien für gute User Experience und Usability. Ergibt Sinn, schließlich bedeutet Usability einfach Nutzbarkeit. Barrieren = Schlechte Nutzbarkeit.

Denk also bitte unbedingt an diese Themen, wenn du deine eigene Homepage angehst.

 

Ich hoffe der Artikel hat dir geholfen und konnte dir einige Denkanstöße mitgeben. Ich bin Nora und habe hier in Bottrop Mensch-Technik-Interaktion studiert. Jetzt sorge ich mit den anderen Vielfaltern zusammen dafür, dass deine Nutzer bestmöglich mit deiner Website interagieren können. Ich freue ich mich auf Meinungen und Feedback zu diesem Artikel und diesem Blog. Du erreichst mich unter tach@vielfalter.digital oder telefonisch unter der +49 2041 4069040.