Online-Marketing, Usability, Conversion-Optimierung und Co. sind dann am erfolgreichsten, wenn als Grundvoraussetzung möglichst viele Menschen die Website nutzen können. Dazu muss die Website zugänglich sein („Accessibility“) und darf keine Barrieren für die Nutzenden aufweisen. Spätestens wenn am 28. Juni 2025 das Barrierefreiheitsstärkungsgesetz (BFSG) in Kraft tritt, sollten Sie sich mit dem Thema „Barrierefreie Website“ beschäftigt haben. Eine barrierefreie Website hilft allen.
Digitale Barrierefreiheit bedeutet, dass Websites, Apps oder PDF-Dokumente ohne fremde Hilfe genutzt werden können. Die Bandbreite der zu berücksichtigenden Beeinträchtigungen und Behinderungen ist sehr groß und die Anforderungen sind entsprechend vielfältig. Der große Vorteil ist jedoch, dass alle Menschen davon profitieren. In der physischen Welt sind abgesenkte Bordsteine nicht nur für Rollstuhlfahrende notwendig und hilfreich, sondern auch Kinder mit Fahrrädern oder Eltern mit Kinderwagen haben einen Vorteil davon („Curb-Cut-Effekt“). Untertitel in Social Media zum Beispiel ermöglichen nicht nur Hörbeeinträchtigten, die Inhalte zu erfassen, sondern unterstützen auch den Medienkonsum an ruhigen Orten wie in Büros/Bibliotheken oder von Studierenden (heimlich) während einer Vorlesung.
Blinde oder stark seheingeschränkte Nutzende sind auf assistive Systeme wie Screenreader oder die Ausgabe der Inhalte mittels Braillezeile angewiesen. Dies erfordert neben Alternativtexten zu relevanten Bildern auch eine entsprechende semantische Auszeichnung im HTML. Einer der wichtigsten Aspekte der Zugänglichkeit generell ist jedoch, dass die Website vollständig ohne Maus bedient werden kann. Legen Sie also die Maus beiseite und bedienen Sie Ihre Website ausschließlich mit der Tastatur. Mit der TAB-Taste können Sie sich durch die Website bewegen. Mit der Umschalttaste + TAB können Sie zum Beispiel einen Schritt zurückgehen und mit der EINGABETASTE beziehungsweise den PFEILTASTEN können Sie entsprechende Interaktionen wie zum Beispiel die Aktivierung eines Buttons oder das Öffnen einer Drop-down-Liste durchführen. Zusätzlich sollte immer klar erkennbar sein, wo Sie sich gerade auf der Website befinden, wenn Sie die Tastatur nutzen. Der jeweilige Link beziehungsweise Menüpunkt muss daher beim Fokussieren optisch hervorgehoben werden (meist per Rahmen um das Objekt). Achten Sie unbedingt darauf, ob bei der Bedienung „Tastaturfallen“ auftreten: Wird ein Element per Tastatur fokussiert, muss es auch möglich sein, den Fokus wieder zu verlassen. Ansonsten ist die weitere Navigation durch die Website per Tastatur nicht mehr möglich (Abbruch).
Abbildung 1 zeigt die Simulation der Fokusreihenfolge bei Tastaturnutzung mithilfe des Browser-Plug-ins „Silktide Accessibility Checker“ (Chrome: einfach.st/accplugin). Damit kann sehr schnell überprüft werden, ob einzelne Menüpunkte oder Funktionen wie die interne Suche zugänglich sind und ob die Reihenfolge sinnvoll und logisch ist.
Tipp: Sofern Sie ein Cookie-Banner verwenden, sollten Sie prüfen, ob dieses auch mit der Tastatur erreicht und aktiviert/geschlossen werden kann (zum Beispiel im Inkognito-Modus). In der Testpraxis zeigt sich immer wieder, dass das Banner nicht über die Tastatur bedient werden kann und damit bei Nutzenden, die keine Maus verwenden (zum Beispiel bei motorischen Einschränkungen), permanent im Blickfeld ist.
Sehende Menschen erfassen Websites durch eine Kombination aus einer Vielzahl von ruckartigen Augenbewegungen (Sakkaden) und Fixationen des Inhalts. Nutzende von Screenreadern erkunden den Inhalt sequenziell, das heißt, zum Beispiel Überschriften sowie Bereiche (Landmarks) werden nacheinander adressiert und ausgegeben. Daher ist es wichtig, dass Überschriften in HTML semantisch korrekt ausgezeichnet sind. Screenreader können über Tastenkombinationen (im kostenlosen Screenreader NVDA die Taste H) die entsprechenden Überschriften direkt ausgeben. Eine Webseite sollte also eine H1 (Hauptüberschrift) haben, dann passende H2s und gegebenenfalls weitere H3 bis H6 in einer sinnvollen Reihenfolge. Dies ist vergleichbar mit einem Buch mit Kapitel 1, gefolgt von Unterkapitel 1.1 und weiteren Gliederungsebenen. So kann in einem Buch über das Inhaltsverzeichnis schnell eine passende Stelle gefunden werden beziehungsweise auf einer Webseite lässt sich über die H-Struktur schnell ein Überblick verschaffen und eine entsprechende Passage kann ausgegeben werden. Abbildung 2 zeigt die Struktur der Überschriften mithilfe des Plug-ins „Headingsmap“ (Chrome: einfach.st/headmap). Die Webseite in Abbildung 2 hat eine H1, springt dann aber in mehrere H5 und lässt die Ebene 2 (H2) aus. Die entsprechenden Artikel sind im HTML nicht mit einer H-Struktur ausgezeichnet, was die Navigation für Nutzende von Screenreadern erschwert.
Tipp: Verwenden Sie immer die Auszeichnungen H1 bis H6, um die Struktur beziehungsweise Semantik des Dokuments abzubilden. Stylen Sie dann die jeweiligen Überschriftenebenen mittels CSS. Verwenden Sie keine H-Struktur nur für die Darstellung. Wenn Sie zum Beispiel den Text „Newsletter abonnieren“ am Anfang jeder Seite optisch hervorheben wollen und dafür die H1 verwenden (H1 wird typischerweise optisch am größten dargestellt), dann gibt der Screenreader diese Information auf der Webseite als Hauptüberschrift aus. Dies kann zu Verwirrungen bezüglich des Inhalts führen.
Ein weiteres Beispiel für die Bedeutung der Semantik ist die Einteilung der Webseite in sinnvolle, abgrenzbare Bereiche. Damit Nutzende von Screenreader direkt bestimmte Positionen oder Bereiche im Dokument adressieren können, wird auf Landmarks zurückgegriffen. Wird in HTML zum Beispiel das Element <main> verwendet, um den Hauptinhalt des Dokuments zu markieren, kann der Screenreader diesen Bereich auf Befehl direkt ausgeben. Elemente wie die Navigation werden dadurch direkt übersprungen, was die Nutzung vereinfacht. Bei bekannten Websites kann direkt der aktuelle Inhalt der jeweiligen Webseite ausgegeben werden, ohne die Seite zunächst Element für Element ausgeben zu müssen. Abbildung 3 zeigt die semantische Einteilung einer Webseite in fixe Bereiche. Der Hauptinhalt der Webseite, die Hightech Agenda Bayern (dargestellt mit „main“), könnte so direkt vom Screenreader adressiert und ausgegeben werden. Die Landmark „navigation“ könnte spezifisch benannt werden (zum Beispiel mittels WAI ARIA), um es noch verständlicher zu machen.
Menschen mit Seheinschränkungen benötigen hohe Kontraste. Ebenso ist ein hoher Kontrast für alle Nutzenden hilfreich, zum Beispiel bei starker Sonneneinstrahlung auf ein spiegelndes Smartphone-Display. Mit Kontrast ist das Verhältnis der Vordergrundfarbe und Hintergrundfarbe gemeint. Je höher der Kontrast, desto besser kann der Text wahrgenommen werden. Der maximale Kontrast wäre Schwarz auf Weiß, was rechnerisch einem Verhältnis von 21 : 1 entspricht. Die WCAG (Web Content Accessibility Guidelines, aktuelle Version unter www.w3.org/TR/WCAG22/ abrufbar) fordern ein Verhältnis von 4,5 : 1 für normalen Text und 3 : 1 bei großer Schriftgröße (> 18 pt beziehungsweise 24 px), gefettetem Text (> 14 pt beziehungsweise 18,7 px) sowie Schaltflächen (Buttons) und Icons. Ideal ist ein Verhältnis von 7 : 1 (höchstes Level AAA der WCAG). Diverse Plug-ins (zum Beispiel Silktide in Abbildung 4) sowie Programme wie der Colour Contrast Analyser (www.tpgi.com/color-contrast-checker/) ermöglichen die Messung von Kontrasten und gleichzeitig die Überprüfung der WCAG-Konformität. So sollte der Kontrast des Texts in Abbildung 4 sowie des Hinweises „Alle Artikel“ mit rotem Hintergrund und schwarzer Schrift erhöht werden. Das Verhältnis von 3,95 : 1 erfüllt die Anforderungen der WCAG nur bei groß dargestelltem Text, was hier nicht der Fall ist. Das heißt, die Schriftfarbe muss dunkler zum weißen Hintergrund gewählt werden.
Seit Jahren wird in der Google Search Console und im Google Lighthouse Report (siehe Abbildung 5) überprüft, ob klickbare Elemente eine entsprechende Größe (nach WCAG mindestens 24 × 24 CSS-Pixel, im Idealfall 44 × 44 CSS-Pixel) und ausreichend Abstand zueinander haben. Infolge von motorischen Einschränkungen oder Tremor (Zittern) fällt es den Nutzenden schwer, das gewünschte Objekt einfach zu treffen und zu aktivieren. Daher: Bieten Sie großflächige Interaktionselemente an, die einfach zu bedienen sind. Der Lighthouse Report in Google Chrome bietet neben den Aspekten der Ladezeit und SEO ebenfalls einen eigenen Accessibility-Report mit konkreten Hinweisen (siehe Abbildung 5).
Wenn die Ladezeit einer Webseite unerwartet sehr langsam ist oder Nutzende einen Screenreader verwenden, werden Alternativtexte (Alt-Text) als Ersatz für das Bild wichtig. Alt-Texte werden anstelle des Bilds ausgegeben und sollen die adäquate Information vermitteln. Dabei ist es wichtig, zu unterscheiden, ob es sich um dekorative oder sinntragende/bedeutungstragende Bilder handelt. Dekorative Bilder werden im Gegensatz zu sinntragenden Bildern von Screenreadern ignoriert und daher nicht ausgegeben. Um sie als dekorativ zu kennzeichnen, muss das Alt-Attribut leer sein (alt=““). Ansonsten gilt für sinntragende Bilder, dass der Inhalt des Bilds kurz und prägnant beschrieben werden sollte. Wichtig: keine Ansammlung von Keywords in loser Reihenfolge im Alt-Text unter SEO-Gesichtspunkten, sondern eine für die Nutzenden sinnvolle Wiedergabe des dargestellten Inhalts.
Tipp: Das Silktide-Plug-in zeigt die als dekorativ gekennzeichneten Bilder sowie den zugehörigen Alt-Text für alle auf dieser Seite verwendeten Bilder an (siehe Abbildung 6). Prüfen Sie daher, ob ein Alt-Text notwendig und für die Nutzenden mit assistiven Technologien sinnvoll ist.
„Klicken Sie auf den roten Button, um das Abo abzuschließen“ (in Abbildung 6) – ein klarer Hinweis, wenn man Farben sehen kann. Doch wenn die Nutzenden farbenblind sind oder eine Farbsehschwäche haben, ist dies eine große Herausforderung. Eine Rot-Grün-Schwäche kommt immerhin bei circa 8 % der Männer vor. Darüber hinaus gibt es weitere Kombinationen in Bezug auf Rot, Grün und Blau (siehe Abbildung 7), die dazu führen können, dass Inhalte falsch interpretiert oder Hinweise gar nicht verstanden werden.
Tipp: Prüfen Sie daher, ob die Kommunikation jederzeit klar ist und nicht ausschließlich über Farben kommuniziert wird. Wird die Webseite auch ohne Farben vollständig verstanden? Gerade bei Fehlermeldungen (roter Rahmen um fehlerhafte Eingaben) sollte die Grundregel „Kommunikation auf zwei Wegen“ beachtet werden. Das heißt, neben dem roten Rahmen sollte ein Hinweis in textueller Form stehen („Bitte Vornamen eingeben“).
Podcasts und Videos werden zu Recht immer häufiger im Marketingportfolio berücksichtigt. Damit auch Nutzende ohne oder mit eingeschränktem Hör- und Sehvermögen diese Inhalte konsumieren können, sind Untertitel beziehungsweise Transkriptionen notwendig. YouTube erstellt automatisch Untertitel sowie eine Transkription (siehe Abbildung 8), womit die grundlegendsten Anforderungen erfüllt werden. Allerdings stellen diese automatisierten Möglichkeiten nicht immer eine adäquate Alternative dar. Für die Nutzenden von assistiven Technologien wie Screenreadern ist zusätzlich zu beachten, dass gegebenenfalls eine zusätzliche Audiospur oder ein Transkript zur Verfügung gestellt wird. Sofern im Video neben dem Gesprochenen auch Dinge gezeigt werden (zum Beispiel ein Kochvideo zeigt die Gradzahl des Backofens und spricht sie nicht aus), fehlt eine entscheidende Information für seheingeschränkte Nutzende. Überprüfen Sie Ihre Videos daraufhin, ob sie auch ohne Ton vollständig nutzbar sind und ob die Transkription sinnvoll ist.
Texte sind nur dann sinnvoll, wenn sie inhaltlich verstanden werden. Da nicht alle Menschen aus verschiedenen Gründen über ein hohes Sprachverständnis verfügen (zum Beispiel Deutsch nicht als Muttersprache, kognitive Einschränkungen, psychische Belastungen etc.), kann auf das Prinzip der Einfachen Sprache sowie der Leichten Sprache zurückgegriffen werden. Einfache Sprache ist in der Norm DIN ISO 24495-1 beziehungsweise DIN 8581-1 definiert und gibt konkrete Hinweise, wie Texte einfach geschrieben werden sollten. Zu den Grundprinzipien gehören unter anderem die Verwendung verständlicher Wörter mit einfachen Wortformen sowie die Vermeidung von Sprichwörtern, Ironie, Negationen und Metaphern. Weiterhin sollten Schachtelsätze vermieden und möglichst kurze Sätze (circa 15 Wörter) verwendet werden. Leichte Sprache richtet sich insbesondere an Menschen mit kognitiven Behinderungen. In der Leichten Sprache werden bewusst nur einfache und bekannte Wörter verwendet, keine Abkürzungen benutzt und lange Wörter in kurze getrennt. Für die Leichte Sprache im Deutschen gibt es derzeit noch keine Norm, obwohl ein Entwurf bereits existiert (DIN SPEC 33429:2023-04). Eine entsprechende Standardisierung ist also in Zukunft zu erwarten. Das Netzwerk Leichte Sprache (einfach.st/leispr) bietet umfassende Informationen dazu. Der folgende Text ist ein Auszug aus der Leichten Sprache der Technischen Hochschule:
„Die Studierenden müssen Veranstaltungen besuchen und Prüfungen bestehen.
Danach haben sie einen Studien-Abschluss.
Es gibt viele verschiedene Abschlüsse.
Einen Studien-Abschluss braucht man für viele Berufe.“
Abbildung 9 zeigt eine Simulation von Dyslexie und der damit verbundenen Schwierigkeit, Texte inhaltlich zu erfassen. Einfache Sprache hilft allen Menschen, Inhalte zu konsumieren und zu verstehen.
PDF-Dokumente werden auf vielen Websites eingesetzt. Sofern auf der Website keine PDFs eingebunden sind (was unter Usability-Gesichtspunkten positiv zu bewerten ist), werden in der weiteren Kommunikation häufig Widerrufserklärungen oder Bestellbestätigungen als PDF versandt. Es ist wichtig, zu wissen, dass auch PDF-Dokumente barrierefrei gestaltet werden können. Durch entsprechende Tags im PDF versteht ein assistives System die semantische Struktur und kann diese den Nutzenden entsprechend zur Verfügung stellen. Wenn man zum Beispiel in einem Word-Dokument die Formatvorlagen „Überschrift 1“ und „Überschrift 2“ verwendet und dann ein PDF erzeugt, werden die Überschriften zugänglich für die Screenreader. Dies ist vergleichbar mit der H-Struktur von Webseiten. Wird dagegen der Überschriftentext im Word-Dokument als Standard markiert und formatiert (größere Schrift), ist er für Screenreader nicht „vertagt“ und damit ohne Struktur und Semantik.
Tipp: Prüfen Sie Ihre PDF-Dokumente auf Konformität mit dem kostenlosen Programm PAC (PDF Accessibility Checker, abrufbar unter pac.pdf-accessibility.org/en). Das Beispieldokument in Abbildung 10 ist laut PAC nicht barrierefrei. Im Detailbericht beziehungsweise Prüfbericht werden exakte Hinweise gegeben, warum das Dokument nicht barrierefrei ist.
Die im PDF enthaltenen Fehler können anschließend zum Beispiel mit dem kostenpflichtigen Adobe Acrobat korrigiert oder (noch besser) zukünftig direkt aus der Quellanwendung heraus korrekt erzeugt werden. Handelt es sich bei der Quellanwendung zum Beispiel um MS Word, sollten neben den Formatvorlagen, Kontrastprüfungen und Tabellenauszeichnungen auch die integrierten Barrierefreiheitsfunktionen genutzt werden, die über den Menüpunkt „Überprüfen“ aufgerufen werden können. Der Barrierefreiheit-Assistent in Word (siehe Abbildung 11) führt durch einzelne Aspekte eines barrierefreien Dokuments.
Die obigen Beispiele zeigen einen kleinen Ausschnitt, wie Websites, Apps und PDF-Dokumente möglichst barrierefrei gestaltet werden können. Mit Blick auf die BITV (Fokus öffentliche Hand) und das Barrierefreiheitsstärkungsgesetz (Fokus B2C) werden barrierefreie Seiten (endlich) zur Pflicht. Im E-Commerce betrifft dies künftig Unternehmen, die Dienstleistungen für Verbraucher anbieten. Ausgenommen vom BFSG sind Kleinstunternehmen mit weniger als zehn Beschäftigten UND entweder einem Jahresumsatz von höchstens zwei Millionen Euro oder einer Jahresbilanzsumme von höchstens zwei Millionen Euro. Das „und“ ist deshalb hervorgehoben, da ein Kleinstunternehmen bereits nicht mehr vorliegt, wenn das Unternehmen mehr als zehn Personen beschäftigt. Die europäische Norm EN 301 549 regelt, dass neben den WCAG weitere in der Norm genannte Anforderungen (wie zum Beispiel die Zweiwegekommunikation) eingehalten werden müssen. Für klassische Online-Shops wird jedoch die Einhaltung der WCAG den Schwerpunkt der Prüfung auf Barrierefreiheit bilden. Die WCAG bieten durch ihre Struktur und ihre Prüfkriterien einen roten Faden. Ausgehend von den vier Grundprinzipien
werden Richtlinien detailliert beschrieben und mit Erfolgskriterien (Qualitätsmerkmale/Konformitätsstufen von A bis AAA) versehen. In Summe müssen aktuell vier Prinzipen mit 13 Richtlinien erfüllt sein, damit die Website beziehungsweise App als barrierefrei im Sinne der WCAG gilt. Um diese Prinzipien wie zum Beispiel „Richtlinie 2.1 Mit der Tastatur bedienbar“ sicherzustellen, werden überprüfbare Erfolgskriterien definiert (zum Beispiel Tastaturfalle 2.1.2, siehe Abbildung 12).
Weitere Aspekte der digitalen Barrierefreiheit, Prüfwerkzeuge sowie Kriterien der WCAG und EN 301 549 werden in den nächsten Ausgaben vorgestellt.
In diesem Sinne: Beschäftigen Sie sich zeitnah mit den Kriterien einer barrierefreien Website/App und ermöglichen Sie allen Nutzenden einen Zugang zu Ihren Informationen auf der Website – mit den hoffentlich damit verbundenen Konversionen. Von Barrierefreiheit können ALLE profitieren.