Website & WordPress
Website & WordPress
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.
Inhaltsverzeichnis
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.
-
Sehen
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.
-
Hören
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.
-
Geschicklichkeit
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.
-
Physische Beweglichkeit
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.
-
Mental
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.
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.
