Das Konzept des „barrierefreien Webdesigns“ beschreibt ein Paradigma bei der Erstellung von Websites und mobilen Apps, welches es Personen mit eingeschränkten physischen und/oder psychischen Fähigkeiten erlaubt, diese zu nutzen.
Man spricht dabei auch von „Accessibility“ (englisch für „Zugänglichkeit“) und meint neben den zuvor genannten speziellen Nutzergruppen auch den unkomplizierten und bequemen Zugang zu Inhalten.
In vielen Fällen kann keine vollständige Barrierefreiheit erreicht werden. Die meisten Websites lassen sich jedoch mit wenig Aufwand barrierearm gestalten, um Besuchern zumindest Zugriff auf die wichtigsten Funktionen und Inhalte zu gewähren.
Spannungsfeld zwischen „Featuritis“ und Barrierefreiheit
Die attraktive Website nutzt die neuesten Web-Technologien und viele multimediale Elemente zur Interaktion und Präsentation von aufwändig gestalteten Inhalten.
dem gegenüber steht
Die ideale barrierefreie Website verwendet ausschließlich text-basierende, hierarchisch strukturierte Inhalte und ein kontrastreiches, schlichtes Layout.
Das ist jedoch kein Widerspruch. Eine auf Funktionalität und Inhalt („Mehrwert“) ausgerichtete Website bedient beide Anforderungen – sowohl die der größtmöglichen Barrierearmut als auch die einer größtmöglichen Attraktivität auf die Zielgruppe.
Die 4 Grundprinzipien barrierefreien Webdesigns
Wahrnehmbarkeit
Alle bereitgestellten Inhalte müssen so aufbereitet werden, dass sie für jeden Benutzer vollständig und ohne Einschränkungen erfassbar sind.
Eine Möglichkeit wäre die Unterstützung von Screenreadern für Blinde und sehbehinderte Nutzer oder die Bereitstellung der Inhalte ohne ablenkende Layoutelemente in einer Art vereinfachten Seitenansicht.
Bedienbarkeit
Die gesamte Benutzerschnittstelle muß für jeden Anwender uneingeschränkt bedienbar sein (z.B. Navigation und Eingabeelemente).
Achten Sie vor allem auf ausreichend große Schaltflächen und klar beschriftete Eingabeelemente. Auch sollte die Menüführung logisch strukturiert und dementsprechend funktional gestaltet sein..
Verständlichkeit
Alle bereitgestellten Inhalte und die eingesetzte Navigation müssen in einer (für die Zielgruppe) verständlichen Weise verfügbar sein.
Ein passendes Hilfsmittel könnten beispielsweise die Bereitstellung von alternativen Inhaltsseiten in „leichter Sprache“ sein, ebenso das Ausstatten von Videos mit Untertiteln.
Robustheit
Die Web-Präsenz muß technisch stabil und standard-kompatibel sein, um von einer großen Zahl verschiedener Webbrowser (und deren Engines) fehlerfrei verarbeitet werden zu können.
Dies erreichen Sie vor allem durch Einhaltung der Best Practices und ausschließlicher Nutzung gängiger Standards und Medienformate.
Außerdem sollte eine fertige Website vor Veröffentlichung gründlich in marktgängigen Browsern und auf verschiedenen Endgeräten getestet werden (z.B. Desktop-PC, Notebook, Tablet, Smartphone Hoch-/Querformat).
Praxistipps für barrierefreies/barrierearme Webentwicklung
- Stellen Sie Alternativen für nicht-textbasierende Inhalte zur Verfügung. Bei Bildern und Grafiktext genügt meist die Verwendung des alt-Attributs im HTML-Code. Für Videos und Audiodokumente sollten Textabschriften oder zumindest verschiedene Formate bereitstehen.
- Sorgen Sie für eine gute Lesbarkeit von Texten durch eine kontrastreiche Farbgebung und ausreichend große Serifen-Fonts.
- Bieten Sie eine logisch aufgebaute Navigation, die sich sowohl per Maus als auch Tastatur nutzen lässt, sowie weitere Funktionen, um Inhalte schnell auffindbar zu machen (z.B. lokale Suchfunktion, Sitemaps, Brotkrümelnavigation).
- Trennen Sie strikt zwischen Layout und Inhalt (z.B. HTML als Auszeichnungssprache zur Strukturierung der Inhalte und CSS für deren Formatierung).
- Bauen Sie die Struktur der Website streng hierarchisch auf und bevorzugen text-basierende Inhalte, wann immer möglich. Multimedia sinnvoll einsetzen!
Testen Sie Ihre Website mit deaktivierten Erweiterungen und Plugins (JavaScript, CSS):
- Sind alle Inhalte und Informationen lesbar?
- Ist eine Navigation durch die Website möglich?
- Können alle Dienste der Website (z.B. Kontaktformulare, Bildergalerien) genutzt werden?
Barrierefreiheit und Suchmaschinenmarketing…
… verträgt sich das?!
Ja, denn die meisten verwendeten Techniken spielen auch im Bereich der Suchmaschinenoptimierung (SEO) eine große Rolle.
Grundsätzlich gilt: Suchmaschinen bevorzugen text-basierende, strukturierte Inhalte, da diese leichter indexiert werden können.
Accessibility lohnt sich also doppelt: Es zeigt, dass alle Besucher willkommen sind und erhöht die Sichtbarkeit bei Suchmaschinen.
Methoden und Techniken barrierefreien Webdesigns
Zum Abschluss dieser Einführung ein paar Prinzipien, die bei barrierearmen bzw. barrierefreiem Webdesign zum Einsatz kommen:
- Skalierbarkeit der Inhalte (z.B. Vergrößern von Schriften und Bildern)
- Strukturierung der Inhalte mittels HTML (z.B. HTML-Elemente <h1> bis <h6> für Überschriften, <p> für Absätze und <ul>/<ol> für Aufzählungen)
- Alternativen zu Bildern und Videos (z.B. durch die Bereitstellung von alternativen Beschreibungen oder Untertiteln)
- Höchstmögliche Kompatibilität mit marktüblichen Webbrowsern und Endgeräten
Autor: Tobias Eichner | Datum der Veröffentlichung: März 2023
Wichtig: Bitte beachten Sie die Nutzungsbedingungen und rechtlichen Hinweise für diesen Beitrag!
