Inklusion bekommt einen immer höheren Stellenwert in unserer Gesellschaft. Auch im digitalen Bereich ist auf Barrierefreiheit nicht zu verzichten. Barrierefreies Webdesign, auf Englisch Web Accessibility, ist die Kunst, Webseiten so zu gestalten, dass alle sie nutzen können. Hierbei ist wichtig, dass keine Hindernisse in der Nutzerfreundlichkeit erstellt oder dem Betrachter besondere Hürden, in der Wahrnehmung und Verarbeitung gestellt werden, sodass die Website ohne fremde Hilfe genutzt werden kann.
Von der Planung, der Konzeption und Gestaltung bis hin zu Webentwicklung sollte auf ein barrierefreies Webdesign geachtet werden. Barrierefreie Webseiten sollten mit den Web Content Accessibility Guidelines (WCAG) konform sein, damit Hilfsmittel wie Screenreader, Vergrößerungssysteme oder spezielle Hardware auf jeder Webseite genutzt werden können. In diesem Artikel geben wir eine Übersicht über die wichtigsten Tipps für ein barrierefreies Webdesign und erläutern, welche Vorteile Sie damit erzielen.
Alternativen für Grafiken und Multimedia
Menschen, die nur eingeschränkt sehen können, sollten natürlich trotzdem Ihre Webseite ungehindert nutzen können. Für diesen Zweck werden Screenreader benutzt. Diese Programme können automatisch die Webseiten vorlesen oder über andere Ausgabegeräte wiedergeben (z. B. in Form von Braillezeilen). Damit dieses Hilfsmittel optimal funktioniert, ist es wichtig, grafische Inhalte mit geeigneten Text-Alternativen zu versehen, die den Kontext des Bildes oder der Grafik erläutern.
Für Multimedia-Inhalte, also Inhalte, die aus mehreren Medien bestehen, wie zum Beispiel Animationen, Audio oder Videos sind die alternativen Inhalte komplexer und es sollte auf Audiodeskription und Untertitel zurückgegriffen werden. In Content-Management-Systemen (CMS) wie WordPress oder Joomla können ganz einfach Alternativtexte hinterlegt und der erste Schritt in Richtung Barrierefreiheit gemacht werden. Es ist generell zu beachten, dass auch ohne Grafiken der Informationsumfang und die Verständlichkeit der Website gleichbleiben.
Kontrast und Farbe
Eine Webseite soll schön und ansprechend erstellt sein. Die Ästhetik wird von Bildern, Farben und Schriften bestimmt. Für Menschen, die ein vermindertes Sehvermögen haben, ist es wichtig, auf einen gewissen Kontrast zwischen Hintergrund und Vordergrund zu achten. Denn so können Unlesbarkeit und Verwirrung verhindert werden. Nach WCAG 2.0 1.4.6, in der die Erfolgskriterien der Website definiert sind, soll das Kontrastverhältnis von Vordergrund und Hintergrund 7:1 sein.
Welches genaue Verhältnis Sie für Ihre Webseite nutzen, ist von Ihrem spezifischen Design abhängig. Besonders wichtige Stellen, wie Texte, sollten am besten keine Hintergrundfarbe haben, sodass der Informationsgehalt für Menschen mit Behinderung nicht gemindert wird. Eine Ausnahme für das Kontrastverhältnis sind dekorative Inhalte, Logos und Markennamen.
Vergrößerbarkeit für barrierefreies Webdesign
Manche Nutzer und Nutzerinnen sind auf eine stark vergrößerte Schrift angewiesen. Hier ist es grundlegend, dass die Seitenzoom-Funktion des Browsers richtig funktioniert. Die Bildschirmauflösung sollte hierbei gleichbleiben und das Scrolling immer noch unverzögert sein.
Linearisierbarkeit
Für ein barrierefreies und funktionierendes Webdesign sollte neben einem strukturierten Seitenaufbau mit Überschriften, Listen und Absätzen auch auf die Sinnhaftigkeit der Reihenfolge in der Programmierung geachtet werden. Linearisierbarkeit ist ein wichtiger Aspekt bei der Entwicklung barrierefreier Webseiten: die Fähigkeit einer Webseite, in einer linearen und geordneten Reihenfolge Sinn zu ergeben, auch wenn visuelle Grafiken und Tabellen für den Screenreader deaktiviert werden.
Eine linearisierbare Webseite erleichtert Menschen mit kognitiven Beeinträchtigungen, Sehbehinderungen oder motorischen Einschränkungen die Navigation und die Nutzung der Webseite. Durch diese Strukturierung der Webseite können Programmierer sicherstellen, dass die Inhalte in einer logischen und linearen Reihenfolge präsentiert werden. Eine klare und konsistente Gestaltung, die Hierarchien und visuelle Abgrenzungen verwendet, erleichtert es Usern, sich auf den Inhalt zu konzentrieren und nicht von irrelevanten visuellen Elementen abgelenkt zu werden.
Außerdem sollte eine einfache Bedienbarkeit gewährleistet werden, wodurch Screenreader, Vergrößerungsprogramme und andere Hilfsmittel einfach durch die Webseite springen können. Dies ist zusätzlich hilfreich, um Suchmaschinenoptimierung zu betreiben. Denn wenn eine systematisch-schlüssige Struktur vorhanden ist, kann auch der „Crawler“ die Webseite besser erfassen und sie höher platzieren. Achten Sie also darauf, dass eine Navigation innerhalb der Seite auch mit der Tastatur möglich ist (wie z.B. der Sprung zwischen Buttons mithilfe der Tab-Taste).
HTML- Code
Der HTML-Code, abgekürzt von „Hyper Text Markup Language“, ist eine Standard-Programmiersprache. Sie beschreibt eine Reihe von Tags, die das Layout, den Inhalt, inklusive Text und Bilder formatieren. Jeder Tag hat einen bestimmten Nutzungszweck und sind dafür verantwortlich, dass eine Webseite reibungslos funktioniert. Ein Beispiel dafür sind die Formatierung von Absätzen, Überschriften oder Listen. Dazu gibt es auch Tags, die bestimmte Abschnitte abgrenzen, wie für den Header, Footer, Navigation und Artikelinhalt.
Diese sind das A und O für eine barrierefreie Website, denn so kann ein Screenreader die Website, sowie deren Aufbau, einfacher erfassen und eine gute Vermittlung der Inhalte gewährleisten. Achten Sie deshalb bei Ihrer barrierefreien Webseite darauf, dass die Semantik in HTML für Abschnitte, sowie Überschriften und Absätzen stimmt.
Geräteunabhängigkeit
Das Hauptziel einer Website ist es, eine barrierefreie Bedienbarkeit auf jedem Gerät zu gewährleisten. Mobil oder auf dem Desktop sollen alle Funktionen gleich gut für den Screenreader oder andere Hilfsmittel lesbar sein. Es ist demnach auch wichtig, dass die Webseite mit der Tastatur oder der Maus bedient werden kann. Probieren Sie also für ein optimales Ergebnis die Barrierefreiheit auf verschiedenen Endgeräten aus.
Vorteile:
- Durch eine barrierefreie Nutzung der Webseite erreichen Sie mehr potenzielle Kunden und Kundinnen. Denn 30 % der Bevölkerung haben eine Sehbehinderung, motorische Einschränkung, eine Konzentrationsschwäche oder eine begrenzte Lesekompetenz.
- Wenn Kunden und Kundinnen sich problemlos und leicht auf Ihrer Website zurechtfinden, steigert es die User Experience und es wird häufiger auf Ihre Website zurückgegriffen.
- Sie generieren damit ebenso eine hohe Kundenzufriedenheit.
- Mit einem barrierefreien Webdesign ranken Sie auch besser in der organischen Suche. Denn der Google Algorithmus legt Wert auf ein barrierefreies Design und lässt Sie besser ranken, wenn er hochwertige Barrierefreiheit erkennt.
- Wenn die Webseite mit den Web Content Accessibility Guidelines (WCAG) übereinstimmt, ist diese wahrnehmbar, bedienbar, verständlich und robust und kann damit Werbebotschaften besser vermitteln.
Fazit
Ein barrierefreies Webdesign ermöglicht es Ihnen, all Ihre Kunden und Kundinnen glücklich zu machen, Inklusion zu fördern und Ihrem Unternehmen oder Dienstleitung mehr Reichweite zu bieten. Es ist also immer eine gute Idee, die Barrierefreiheit Ihrer Anwendungen zu überprüfen und weiter zu optimieren.
