MAch deine Website Barrierefrei
und steigere so deine Conversions

Barrierefreiheit Рeine lästige Pflicht? Falsch!
Als junge Digitalagentur kennen wir den Wert und die Bedeutung einer barrierefreien und leicht zug√§nglichen Website. Deshalb betrachten wir es nicht nur als Pflicht, sondern als Chance die Bed√ľrfnisse aller Nutzer zu erf√ľllen. Das Thema mag zun√§chst langweilig erscheinen und es gibt viele Anforderungen und Richtlinien zu beachten, aber mit ein paar kleinen √Ąnderungen kannst du schon viel an deiner Seite optimieren. So wird sie nicht nur barrierefrei, sondern du kannst ganz einfach deine Conversions steigern.

Eine barrierefreie Website bedeutet nicht nur, dass Menschen mit Einschr√§nkungen darauf zugreifen k√∂nnen. Denn eine klare Struktur, leicht lesbare Schriftarten und gut platzierte Farbkontraste machen unsere Website nicht nur f√ľr Menschen mit Beeintr√§chtigungen zug√§nglicher, sondern auch f√ľr √§ltere Menschen oder diejenigen, die auf verschiedenen Ger√§ten surfen. Eine barrierefreie Website ist benutzerfreundlicher, f√ľhrt zu h√∂herer Zufriedenheit und kann letztendlich deinen Kundenstamm vergr√∂√üern und zu mehr Conversions und Erfolg f√ľr dein Unternehmen f√ľhren.

Gerade f√ľr Online Marketer und Webdesigner er√∂ffnen sich mit einer barrierefreien Website zahlreiche Vorteile. Es ist an der Zeit, Barrierefreiheit nicht l√§nger als l√§stige Aufgabe zu betrachten, sondern als eine M√∂glichkeit, deine Website interessanter, strukturierter und bekannter zu machen. Du kannst deine organische Reichweite steigern, dein SEO-Ranking verbessern und gleichzeitig deine Website barrierefrei gestalten!

Bist du neugierig geworden? Dann bleib dran, denn in diesem Artikel m√∂chten wir dir verdeutlichen, warum dieses Thema auch f√ľr dich von Interesse ist! Unsere Experten aus den Bereichen Webentwicklung, Webdesign und Online Marketing teilen au√üerdem n√ľtzliche Tipps, um deine Website zu optimieren.

Definition Barrierefreiheit

“Das Ausma√ü, in dem ein interaktives System den Benutzern erm√∂glicht, effektiv, effizient und zufriedenstellend zu interagieren, unbeachtet der Auspr√§gung ihres Sehens, ihres H√∂rens, ihrer Geschicklichkeit, ihres Denkens, ihrer physischen Beweglichkeit usw.”

Definition von Barrierefreiheit nach dem International Usability and UX Qualification Board e.V. ‚Äď Curriculum und Glossar

Aus der theoretischen Definition der UXQB lassen sich praktische Tipps und Anforderungen f√ľr deine Website-Besucher ableiten. Schauen wir uns die verschiedenen Bereiche an, in denen deine Nutzer durch eine barrierefreie Website unterst√ľtzt werden k√∂nnen.

T√§glich sehen sich Nutzer verschiedenen Einschr√§nkungen und Barrieren gegen√ľber, die ihren optimalen Zugang zu deiner Website beeintr√§chtigen k√∂nnen. Diese Einschr√§nkungen lassen sich durch geschicktes Webdesign oder kleine Anpassungen leicht l√∂sen und gleichzeitig deine Website f√ľr den Online Marketing-Bereich optimieren. So kannst du das Beste aus allen Aspekten deines Internetauftritts herausholen.

Barrierefreie Websiten im Alltag

Betrachten wir nun einmal die Barrieren, mit denen sich deine Nutzer tagt√§glich konfrontiert sehen. Wir k√∂nnen die m√∂glichen Einschr√§nkungen in verschiedene zeitliche Phasen und nach den Auspr√§gungen der verschiedenen Sinne einteilen. Die Probleme in der ersten Spalte sind vielen bereits bekannt, und auch die zweite Spalte d√ľrfte nicht fremd sein.

Du siehst die Grafik nicht korrekt? Lade sie hier herunter.

Barrierefreiheit im Alltag – Ein Beispiel

Oft treten auch mehrere Faktoren gleichzeitig auf, wie im folgenden Beispiel:

Morgens eilt man gestresst zur Bahn, der Arbeitsbeginn steht in wenigen Minuten an. Mit einer Hand den Kaffee haltend und das Smartphone in der anderen, versucht man in Eile auf einer Website einen Tisch f√ľr das Business-Meeting am Mittag zu reservieren. Nach umst√§ndlichem Hin und Her wird endlich die Option zur Terminreservierung gefunden.

Jedoch ist der Kalender und der Text auf dem Display so klein dargestellt, dass die Auswahl des richtigen Zeitraums fast unm√∂glich ist. Schlie√ülich wird die falsche Zeit gew√§hlt. Der “Zur√ľck”-Button befindet sich leider oben links und ist mit nur einer Hand am Smartphone schwer erreichbar. Frustriert gibt man auf.

So sollte es nat√ľrlich nicht ablaufen. Diese Situation kann durch Barrierefreiheit leicht vermieden werden. Die Wahrscheinlichkeit, dass ein Nutzer die Website nach einer schlechten Erfahrung nicht erneut besucht, ist hoch, denn der erste Eindruck z√§hlt. Selbst bei einer ansonsten guten Website k√∂nnen √§u√üere Umst√§nde wie helles Licht oder zu enge Abst√§nde zwischen Buttons zu Barrieren f√ľhren und somit zu einer negativen Benutzererfahrung beitragen. Durch die Optimierung deiner Website hin zur Barrierefreiheit kannst du Beeintr√§chtigungen vorbeugen und in jeder Situation einen positiven ersten Eindruck hinterlassen.

Die Vorteile f√ľr deine Nutzer (und Dich)

Auch f√ľr deine Online-Marketing-Strategie ist eine barrierefreie Website unverzichtbar. Die Vorteile, die sich dir bieten, sind die Kosten und M√ľhe definitiv wert. Bevor wir auf die Vorteile f√ľr deine Nutzer eingehen, m√∂chten wir noch einmal die Vorteile f√ľr dich als Website-Betreiber oder Online Marketer hervorheben:

‚ÄĘ Konsistentes Webdesign
‚ÄĘ Verbesserung deiner SEO-Werte
‚ÄĘ Steigerung deiner organischen Reichweite
‚ÄĘ Geringere Absprungrate
‚ÄĘ Verbesserte mobile Benutzerfreundlichkeit
‚ÄĘ Optimierung der Performance
‚ÄĘ Steigerung der Conversion Rate
‚ÄĘ Generelle Verbesserung deines Online-Auftritts


Doch wie erreichst du diese Ziele? Wie gestaltest du deine Website barrierefrei? Es gibt Richtlinien wie die WCAG (Web Content Accessibility Guidelines) oder die BITV (Barrierefreie Informationstechnik Verordnung), die verschiedene Anforderungen definieren und dir bei der Umsetzung helfen sollen.
Damit du nicht den √úberblick √ľber die vielen Richtlinien verlierst, haben wir die wichtigsten Punkte f√ľr die Umsetzung zusammengefasst und erkl√§rt. Einige dieser Punkte verbessern nicht nur eine spezifische Einschr√§nkung, sondern optimieren deine Website gleichzeitig f√ľr Barrierefreiheit in verschiedenen Bereichen.

Mögliche Einschränkung

Deine Nutzer können im Bereich Sehen folgende Einschränkungen haben:

  • Blendendes Sonnenlicht / Dunkelheit
  • Altersbedingte Sehschw√§che wie Grauer Star
  • Sehst√∂rungen oder -behinderungen wie Rot-Gr√ľn-Schw√§che
  • Sehbehinderung wie Blindheit

TIPPS

Strukturiere deine Website

Um Menschen mit Sehbehinderungen die Orientierung zu erleichtern, solltest du deine Website √ľbersichtlich strukturieren. Unterteile deine Inhalte in klare Bl√∂cke, halte Abst√§nde ein und verwende √úberschriften. Dies hilft auch Suchmaschinen dabei, deine Website besser zu verstehen und deine Inhalte als relevant einzustufen.

Farbliche Kontraste f√ľr Bedienelemente

Bedienelemente Achte darauf, dass deine Bedienelemente, wie z.B. Buttons, ausreichend groß sind und sich farblich gut vom Hintergrund abheben, um gut erkennbar zu sein.

Verwende gut lesbare Schrift

Kontraste sind auch bei Texten wichtig, da sie die Lesbarkeit erhöhen. Stelle sicher, dass die Textfarbe einen guten Kontrast zum Hintergrund hat, besonders bei kleineren Schriftgrößen. Achte auch darauf, dass deine Schriftgröße nicht zu klein ist. Eine Schriftgröße von mindestens 15px ist empfehlenswert. Verwende vor allem bei Fließtexten serifenlose Schriftarten.

Bilder ergänzen den Text

Nutze Bilder als Erg√§nzung zum Text und nicht als Ersatz. Bedenke, dass Nutzer mit eingeschr√§nktem Sehverm√∂gen m√∂glicherweise nicht in der Lage sind, deine Bilder oder Grafiken zu sehen. Der Text sollte die wichtigen Informationen enthalten. F√ľge gegebenenfalls eine Bildbeschreibung unter dem Bild hinzu, um dem Nutzer zu helfen, den Inhalt der Grafik zu verstehen.

Verwende alt-Tags f√ľr Bilder

Achte darauf, bei deinen Bildern alt-Tags (Alternativtexte) einzusetzen. Dies ist insbesondere wichtig f√ľr Screenreader, die von blinden Nutzern verwendet werden. Durch das Hinzuf√ľgen eines Alternativtexts mithilfe des alt-Attributs k√∂nnen Screenreader die Bilder erfassen und vorlesen. Au√üerdem helfen alt-Tags Suchmaschinen dabei, den Inhalt der Grafiken zu verstehen.

Achte auf die Farbgebung der Bilder

Bei Grafiken ist es wichtig, klare Unterscheidungen zwischen verschiedenen Elementen vorzunehmen. Menschen mit Sehschwierigkeiten, wie Farbenblindheit, können leichte Farbnuancen möglicherweise nicht voneinander unterscheiden. Achte darauf, unterschiedliche Schattierungen, Muster oder stärkere Farbkontraste zu verwenden, um Unterschiede deutlicher darzustellen.

Mögliche Einschränkung

Mögliche Barrieren im Bereich Hören sind:

  • St√∂rende Umgebungsger√§usche
  • Keine M√∂glichkeit, Ton abzuspielen (z.B. defekte Lautsprecher)
  • Schlechtes oder eingeschr√§nktes H√∂rverm√∂gen
  • Taubheit oder Geh√∂rlosigkeit

TIPPS

Verwende Untertitel f√ľr Videos

Um Nutzern, die aus den genannten Gr√ľnden den Ton nicht h√∂ren k√∂nnen, dennoch den Inhalt deiner Videos zug√§nglich zu machen, solltest du Untertitel verwenden. Die meisten Videoplattformen wie YouTube bieten automatische Untertitelung an, aber du kannst sie auch manuell hinzuf√ľgen.

Verzichte auf Sprache im Video

√úberlege vor der Erstellung eines Videos, ob du wirklich Sprache oder Ton ben√∂tigst. Oft kannst du auf Sprache verzichten und stattdessen mit Bildern oder kurzen Texten arbeiten, um dem Zuschauer das Wichtige zu vermitteln. Ein gutes Beispiel daf√ľr sind die Werbespots des Baumarkts Hornbach, die ohne Sprache auskommen und mit emotionalen Bildern eine Geschichte erz√§hlen.

Beschreibe den Inhalt des Videos

Eine erg√§nzende Beschreibung des Videoinhalts in einer Info-Box kann auch geh√∂rlosen Nutzern helfen. Wenn du einen Alternativtext f√ľr das Video bereitstellst, k√∂nnen sie den Inhalt anhand der Beschreibung erfahren.

Mögliche Einschränkung

Folgende Faktoren können die motorische Fähigkeit deiner Nutzer beeinträchtigen:

  • Sehr kleiner Display (besonders bei mobilen Ger√§ten)
  • Tippen unter Alkoholeinfluss
  • Gro√üe H√§nde oder Finger
  • Erkrankungen wie Parkinson

TIPPS

Setze Elemente nicht zu nah beieinander

Ein gutes Webdesign ist auch in diesem Fall wichtig. Gib den Elementen auf deiner Website gen√ľgend Raum und halte ausreichend Abstand zwischen ihnen. Achte darauf, dass Links und Bedienelemente wie Buttons gro√ü genug sind, um leicht angeklickt zu werden. Dadurch wird die Bedienbarkeit der einzelnen Elemente verbessert und der Nutzer vermeidet versehentliches Anklicken der falschen Elemente und das Zur√ľcknavigieren.

Ber√ľcksichtige Fehlertoleranz

Denke auch an die Fehlertoleranz. Menschen machen Fehler, also sei darauf vorbereitet, dass dein Nutzer Fehler machen kann, und biete ihm direkt Hilfestellung zur Fehlervermeidung an. Dies kann beispielsweise bei der Suchfunktion sehr n√ľtzlich sein. Biete dem Nutzer automatische Korrekturhilfe an oder ber√ľcksichtige m√∂gliche Tippfehler bei der Anzeige der Suchergebnisse. Die Verwendung von Autovervollst√§ndigung tr√§gt ebenfalls zur Minimierung von Fehlern bei und erleichtert dem Nutzer die Bedienung.

Mögliche Einschränkung

Mögliche Einschränkungen der Nutzer im Bereich Beweglichkeit:

  • Zeitweise nur eine freie Hand
  • L√§ngerfristig nur eine Hand (z.B. gebrochener Arm)
  • Dauerhaft nur eine oder keine Hand
  • L√§hmung

TIPPS

Optimiere die Mobile Usability

Die Gestaltung deiner Website spielt auch bei der mobilen Ansicht auf Smartphones eine wichtige Rolle. Falsch platzierte Bedienelemente k√∂nnen zus√§tzliche Barrieren f√ľr Nutzer schaffen. Achte daher auf ein gutes Mobile UX Design, insbesondere beim Platzieren von Buttons. Wenn wichtige Bedienelemente in der oberen Bildschirmh√§lfte liegen, k√∂nnen Nutzer mit nur einer Hand Schwierigkeiten haben, sie zu erreichen.

Gliedere deine Seite in Abschnitte

Die Struktur deiner Seite ist auch in der Browser-Ansicht wichtig. Falls Nutzer keine Maus verwenden k√∂nnen, um durch deine Website zu navigieren, sollte es m√∂glich sein, nur mit der Tastatur zu navigieren. Strukturiere deine Seite mit verschiedenen √úberschriften und Bedienelementen, um sie in √ľbersichtliche Abschnitte zu unterteilen. Auf diese Weise k√∂nnen Nutzer mithilfe der Tabulatortaste (Tab) durch deine Seite navigieren.

Mögliche Einschränkung

Mögliche Barrieren, die den Nutzer mental einschränken können:

  • Stress, z.B. verursacht durch Zeitdruck
  • Ablenkung verursacht z.B. durch L√§rm
  • Das Erlernen einer neuen Sprache (Nicht-Muttersprachler)
  • Konzentrationsschwierigkeitenn

TIPPS

Mache intuitive Navigation möglich

Erste wichtige Punkte sind, Ordnung und √úbersicht in Deine Seite zu bringen. R√§ume Deine Website auf und schaffe eine √ľbersichtliche und intuitive Struktur. Als Hilfestellung bei der Navigation durch Deine Seite k√∂nnen zum Beispiel sogenannte ‚Äěbreadcrumbs‚Äú (de.: Brotkrumen) helfen. Sie zeigen dem Nutzer, auf welchen Seiten er sich vorher befand und erm√∂glichen eine einfache und schnelle Navigation zur√ľck.

Erwartungskonformität

Bei Deinem Webdesign fällt auch das Stichwort Erwartungskonformität. Elemente sollten ein bestimmtes Aussehen haben oder an Orten platziert sein, an denen sie der Nutzer erwartet. Das heißt zum Beispiel, dass die Suchfunktion durch eine Lupe gekennzeichnet ist.

Du brauchst das Rad nicht neu zu erfinden. Arbeite stattdessen mit bereits erlernten und gefestigten Elementen.

Nutze leichte Sprache

Damit der Inhalt deiner Website von jedem verstanden wird, solltest du leichte Sprache verwenden. Das heißt: Bilde kurze verständliche Sätze, verwende einfachen Satzbau (vermeide zum Beispiel Nebensätze und viele Kommata), verzichte, soweit es möglich ist, auf Fremdwörter und Fachbegriffe. Alternativ kannst du auch zwei verschiedene Textversionen anbieten.

Erkläre mithilfe von Grafiken

Auch ergänzende Grafiken und Illustrationen können dir helfen, komplizierte Sachverhalte einfach zu erklären. Doch vergiss nicht, dass Menschen mit eingeschränktem Sehen deine Grafiken nicht immer vollständig wahrnehmen können.

Biete verschiedene Sprachen an

Um Deine Website international zug√§nglich zu gestalten, empfiehlt es sich, Inhalte mehrsprachig anzubieten. Neben einer Deutschen- und einer Englischen Textversion, kann gegebenenfalls sogar eine dritte Sprache angeboten werden. Dies ist, gerade bei gro√üen Websites, im Gegensatz zu den meisten anderen Ma√ünahmen mit h√∂herem Aufwand verbunden, da jede Textversion einzeln √ľbersetzt werden muss.

Ist deine Website barrierefrei?

Du kannst die umst√§ndlichen Richtlinien der BITV oder des WCAG umgehen, indem du einfach die oben genannten Punkte abarbeitest. Wenn alle Punkte erledigt sind, ist deine Website barrierefrei und f√ľr alle Nutzer optimiert. Du kannst dies leicht √ľberpr√ľfen, entweder mit einem Selbsttest oder mit Hilfe eines Analysetools. Es gibt viele kostenfreie Tools im Internet, die nicht nur Bewertungen der Seite liefern, sondern auch Tipps und Verbesserungsvorschl√§ge, nicht nur f√ľr Barrierefreiheit. So kannst du dich orientieren und gegebenenfalls Anpassungen vornehmen. Hier sind einige bekannte Tools:

  • Google Lighthouse
  • WAVE (Web Accessibility Evaluation Tool)
  • Accessibility Checker (Siteimprove)

Wir werden uns im Folgenden genauer mit Google Lighthouse befassen, da Online-Marketer m√∂glicherweise bereits Erfahrungen damit haben. Google Lighthouse ist kostenlos im Google Chrome-Browser verf√ľgbar. Neben der Barrierefreiheit analysiert Google auch die Bereiche Leistung, Best Practices und SEO.

F√ľr jede Kategorie gibt Google Lighthouse einen Score an, der zeigt, in welchen Bereichen Verbesserungspotenzial besteht. Du kannst auch einzelne Bereiche testen, z. B. die Barrierefreiheit. Wenn die Checkliste abgearbeitet ist, sollte der Score im gr√ľnen Bereich liegen.

Eine Verbesserung der Barrierefreiheit wirkt sich automatisch auch auf die anderen Bereiche aus. Eine √úberarbeitung deiner Website lohnt sich also auf jeden Fall, und schon kleine √Ąnderungen k√∂nnen gro√üe Auswirkungen auf Barrierefreiheit, Nutzerfreundlichkeit und Zug√§nglichkeit haben.

Fazit

Hier sind die Vorteile einer barrierefreien Website auf einen Blick:

  • H√∂here Nutzerfreundlichkeit f√ľr alle Nutzer
  • Verbesserte mobile Benutzerfreundlichkeit
  • Bessere Leistung und schnellere Ladezeiten
  • Bessere Platzierung in organischen Suchergebnissen
  • Steigerung der Conversion-Rate
  • Verbesserung der Inhalte und des gesamten Online-Auftritts
  • Zug√§nglichkeit f√ľr Menschen mit Behinderungen (rund 7,9 Millionen Menschen in Deutschland)

Wenn du unsicher bist, wie barrierefrei deine Website ist oder einfach dein Webdesign und die Nutzerfreundlichkeit verbessern m√∂chtest, solltest du jetzt einen Online-Check durchf√ľhren. Dann kannst du direkt mit der Arbeit beginnen! Es lohnt sich, und deine Nutzer werden es dir auf jeden Fall danken! Nat√ľrlich stehen wir dir auch gerne als Experten zur Verf√ľgung, um dir bei Bedarf zu helfen.

Betty-Lee Z.

Projektmanagement & Teamleitung

Wie Betty-Lee zu SMARTTEC gekommen ist? In einer Warteschlage vor einer Achterbahn ‚Äď wie denn auch sonst! Der Funke ist nicht nur zwischen dem Team von SMARTTEC und Betty √ľbergesprungen, sondern sie wird auch von Ihren Kunden geliebt. Ihre ruhige und herzliche Art im Projektmanagement macht nicht nur jedes Projekt angenehmen sondern auch besonderes. Getreu nach dem Motto der Weg ist das Ziel ist es immer ein Erlebnis mit Betty eine digitale Rakete zu starten.

Blog-Beitrag-bg
Welche F√∂rderung gibt es f√ľr die Digitalisierung neben Digital-Jetzt?
Blog-Beitrag-bg
Steigere deine Reichweite um online Kunden gewinnen zu können
Blog-Beitrag-bg
Kundenzufriedenheit statt Kundenfrust: Biete deinen Kunden eine herausragende Erfahrung
Blog-Beitrag-bg
Google Ads und HubSpot gemeinsam nutzen 
Blog-Beitrag-bg
Fehlende Kundennähe: Steigere deine Kundenbindung

Starte jetzt dein Projekt mit uns!