Wenn Sie auf "Akzeptieren" klicken, stimmen Sie der Speicherung von Cookies auf Ihrem Gerät zu, um die Navigation auf der Website zu verbessern, die Nutzung der Website zu analysieren und unsere Marketingaktivitäten zu unterstützen. Weitere Informationen finden Sie in unserer  Datenschutzrichtlinie.
18.8.2021
#campus

Barrierefreies Surfen #2: 3 Web-Accessibility-Tipps für euer nächstes Projekt

Im ersten Teil dieser Reihe haben wir uns allgemein mit dem Thema Barrierefreiheit im Netz – besser bekannt als „Web Accessibility‘” – auseinandergesetzt. Im Austausch mit Expert:innen und Menschen, die auf solche Hilfen angewiesen sind, haben wir euch einen Einblick gegeben, warum dieses Thema im digitalen Zeitalter so wichtig ist.

Nun beantworten wir die ganz praktische Frage: Wie können wir sicherstellen, dass unsere digitalen Inhalte möglichst barrierefrei und allgemein leicht zu bedienen sind? Es folgen drei Tipps für Text, Design und Entwicklung, die wir aus dem CAMAO Open mitgenommen haben!

Tipp 1: Text Accessibility – Denke an das große Ganze

Bei barrierefreien Textinhalten ist es wichtig, Inhalte eindeutig und informativ zum Ausdruck zu bringen, damit die Struktur einer App oder Webseite übersichtlich und navigierbar bleibt. Klingt wie ein Selbstläufer? Ist es aber nicht! Damit sind nämlich besonders Stellen gemeint, die oft übersehen werden. Allgemein gesagt: Wenn alle interaktiven Text-Elemente einer Webseite (Buttons, Menüpunkte, Labels et cetera) mit klaren Anweisungen markiert sind, steigert sich die User Experience für alle Nutzer.

Aber klare Anweisungen, Buttontexte oder Labels helfen „nur” dabei, bestehenden Content gut und barrierefrei navigieren zu können. Manche Auszeichnungen sind aber besonders wichtig, damit die Inhalte überhaupt erst von allen Menschen wahrgenommen werden können.

So erlauben Alternativtexte für Bilder es blinden Menschen, rein grafische Inhalte wahrzunehmen und durch die Ergänzung von Untertiteln sind Videos auch von Menschen ohne Gehör oder mit Hörschäden in möglichst vollem Umfang konsumierbar.

Nicht nur die Präsentation von Text ist wichtig für Barrierefreiheit, sondern auch der Inhalt: Eine möglichst einfache Sprache macht den Text für möglichst viele Menschen verständlich – und somit accessible.

2. Design Accessibility – Mit ein paar Hilfsmitteln ganz easy!

Dass Grafiken und Visuals aller Art auf den ersten Blick gut erkennbar sein müssen, ist eigentlich auch selbstverständlich. Doch hier wird oft vergessen, dass nicht jede:r visuell alles gleich wahrnimmt. Was auf einem Monitor gut aussieht, kann auf einem vergleichsweisen kleinen Smartphone-Display unübersichtlich werden – achtet also auf die verschiedenen Viewport-Größen und -Ausrichtungen und lasst die Zoom-Funktion auch mobil aktiviert.

Viele Menschen haben auch eine Farbschwäche, daher sollten Farben nie die einzige Art und Weise sein, um Informationen zu vermitteln – verwendet diese am besten in Verbindung mit Symbolen oder Text. Unser allgemeiner UI-Tipp: Achtet bei der Farbauswahl für Text und Hintergründe auf die vordefinierten Kontrastwerte! Damit könnt ihr sicherstellen, dass euer schillerndes Design nicht nur ins Auge fällt, sondern auch lesbar ist. Viele der gängigen Tools bieten dafür auch Plugins und Apps an, mit einer schnellen Recherche findet ihr sicher auch das richtige Mittel für euren Workflow!

Geheimtipp: Auf uxplanet.org gibt es eine tolle Liste mit Ressourcen für Design Accessibility. Gerade wenn es um Farben geht, sind hier ein paar echte Goldstücke dabei. Das a11y Project bietet ebenfalls alles Mögliche an Ressourcen zum Thema Web Accessibility: Bücher, Podcasts, Browser Extensions, Blogs, Communitys – einfach alles.

3. Development Accessibility – Code den Menschen anpassen, nicht umgekehrt

Was hinter den Kulissen passiert, ist besonders wichtig für Barrierefreiheit. Screenreader gehen den Code Zeile für Zeile durch. Vergewissert euch also, dass die Reihenfolge der Elemente im Code also auch der logischen Lesereihenfolge der Website User entspricht. Beschreibungen und Kategorisierungen im Code können dabei helfen, die Wiedergabe noch präziser und verständlicher zu machen. Hier helfen die richtigen WAI-ARIA-Label (WAI-ARIA steht für Web Accessibility Initiative – Accessible Rich Internet Applications, Mozilla hat eine tolle Übersicht zu dem Thema) für Namen, Rollen, Zustände und Werte.

Außerdem sollte die Hauptsprache der Elemente richtig angegeben werden, sonst können zum Beispiel englische Inhalte in deutscher Sprache vorgelesen werden, was dem Denglisch unseres ehemaligen Lehrers ähnelt – darauf verzichten wir lieber, sänk you weri matsch.

Viele Menschen sind auf alternative Eingabekonzepte (anstatt der klassischen Kombination aus Trackpad/Maus + Keyboard) angewiesen. Glücklicherweise ist es möglich, die Bedienbarkeit einer Website auch nur mit der Tastatur zu gewährleisten, was die Zugänglichkeit erhöht. Zudem sollten die Inhalte einer Website robust gestaltet sein. Konkret heißt das, dass sie in ihrer Bedeutung nicht durch beispielsweise unterschiedliche Ausgaben verschiedener Browser verändert werden.

Die ausführlichste und auf dem Gebiet maßgebende Ressource für die Umsetzung von Web Accessibility ist die oben schon erwähnte Web Accessibility Initiative des W3C und die zugehörigen Web Content Accessibility Guidelines (WCAG).  Wer sich besonders auf die barrierefreie Web-Entwicklung und –Gestaltung gemäß deutschem Recht (welches zum Beispiel öffentliche Institutionen wie Kommunen berücksichtigen müssen) fokussieren möchte, für die ist die Barrierefreien-Informationstechnik-Verordnung 2.0 (BITV 2.0) einen näheren Blick wert.

Das Resultat: Alle profitieren

Wer barrierefreies Design entwickelt und auch umsetzt, unterstützt dabei nicht nur Menschen mit Behinderungen, sondern verbessert auch für die Allgemeinheit die User Experience. Denn was viele nicht wissen: Web Accessibility ist für 10 % der Bevölkerung unerlässlich, für 30 % notwendig – und für 100 % hilfreich.

Positive Nebenwirkungen machen sich schnell bemerkbar – eine höhere Zugänglichkeit bedeutet eine größere Marktreichweite. Marken, die CSR großschreiben, können mit Web Accessibility Worten Taten folgen lassen und ein deutliches Zeichen nach außen setzen. Und falls zukünftig rechtliche Verpflichtungen für die digitale Barrierefreiheit kommen sollten, seid ihr dank unserer Tipps schon perfekt vorbereitet. 😉

Wir machen die digitale Welt zugänglich

Ihr sucht professionelle Unterstützung bei der Accessibility-Umsetzung eures Projektes? Wir haben schon einige Erfahrungen sammeln können, zum Beispiel mit dem technischen Website Relaunch der Stadt Ulm, wo wir zusammen mit der CAMAO TEC die Web Accessibility Standards der BITV 2.0 komplett eingehalten haben. Schreibt uns doch unter hello@camao.one, wir freuen uns auf eine zukünftige Zusammenarbeit!