Barrierefreiheit im Web als Chance, Teil 2: ein gutes technisches Fundament
Barrierefreiheit im Netz ist ab 28.06.2025 eine gesetzliche Vorschrift in der EU. In Österreich wird sie durch das Barrierefreiheitsgesetz (BaFG) geregelt
Digitale Barrierefreiheit senkt die Instandhaltungskosten und verbessert das Suchmaschinen-Ranking von Websites.
Digitale Barrierefreiheit begünstigt zum einen langfristige Wartbarkeit und reduziert Instandhaltungskosten. Zum anderen verbessert Barrierefreiheit für Menschen auch die Lesbarkeit Ihrer Inhalte für Maschinen: digitale Barrierefreiheit fördert Suchmaschinenoptimierung (SEO).
Barrierefreiheit im Sinne des BaFG
Für alle, die die bisherigen Beiträge unserer Serie nicht gelesen haben, beginnen wir mit einer knappen Definition: Ein Online-Service ist dann barrierefrei im Sinne des BaFG, wenn er die AA-Kriterien der Web Content Accessibility Guidelines (WCAG) ab Version 2.1 erfüllt. Die WCAG definiert eine strukturierte Liste von Voraussetzungen, sogenannte Success Criteria, kurz "SC", für Barrierefreiheit.
Semantische Datenstruktur als Fundament einer Website
In der grauen Vorzeit des Internet waren Webseiten alleine durch deren Hyper Text Markup Language (HTML) definiert. HTML deklariert die Bedeutung von Daten auf einer Website, indem diese in "Tags" verpackt werden. So erklärt beispielsweise der Tag <h1>Lorem Ipsum</h1> die Worte "Lorem Ipsum" zu einer Überschrift erster Ordnung. Frühe Websites waren durch ihren puristischen HTML-Aufbau sehr gut maschinell lesbar und überließen die graphische Aufbereitung von Informationen vollständig dem Browser. Für den Großteil der menschlichen Leserschaft waren die ersten Dokumente im Web dadurch allerdings visuell wenig ansprechend
Cascading Style Sheets (CSS) sollten dem nüchternen Aussehen früher Websites Abhilfe schaffen und ermöglichten die visuelle Aufbereitung von HTML ("Styling"). Noch später betrat dann JavaScript die Bühne, um HTML und CSS dynamisch zu verändern – damit konnten Websites flexibel auf Aktionen des Benutzers reagieren. Dies drei Komponenten sind die Grundlage für das moderne Internet.
Dem Urgedanken des World Wide Web folgend kümmert sich das HTML einer Website also um die Struktur der Daten. HTML gibt damit den Elementen auf einer Seite eine maschinenlesbare semantische Bedeutung, die von der visuellen Darstellung losgelöst ist. Diese semantsiche Bedeutung ist allgemeingültig und standardisiert
Sauberes und standardkonformes HTML bildet dadurch das Fundament einer Website bzw. eines Online-Service. Jedwede Funktionalität baut letztendlich darauf auf. Die Qualität dieses Fundamentes hat erhebliche Auswirkungen – nicht nur auf die Barrierefreiheit, sondern auch auf viele andere technische und wirtschaftliche Faktoren.
Auswirkungen eines maroden Website-Fundaments auf die Barrierefreiheit
Unsauberes HTML kann auf zwei verschiedene Arten das Fundament einer Website untergraben:
- durch syntaktische Fehler, wenn der HTML-Code selbst fehlerhaft ist (grob vergleichbar mit Rechtschreib- oder Grammatikfehlern in natürlicher Sprache).
- durch semantische Fehler, wenn der HTML-Code die Inhalte einer Website nicht oder falsch strukturiert und deklariert.
Während syntaktische Fehler mitunter unmittelbar zu einer falschen Darstellung der Seite führen, sind semantische Fehler meist nicht auf den ersten Blick erkennbar. Ein semantischer Fehler liegt zum Beispiel dann vor, wenn eine Überschrift nicht als solche ausgewiesen wird. Stattdessen kommt ein unerfahrener Entwickler mitunter auf die Idee, lediglich den Text zu vergrößern und diesen dadurch rein optisch zur Überschrift zu befördern. Vielen Besuchern fällt das nicht auf, weil wir alle darauf trainiert sind, großen Text als Überschrift zu interpretieren. Jedoch können weder Browser noch die meisten Suchmaschinen die vermeintliche Überschrift als solche erkennen.
Problematisch ist das im Sinne der Barrierefreiheit deshalb, weil es die möglichen Wiedergabemodalitäten von Inhalten stark einschränkt. Es gibt viele Benutzer, die sich auf Unterstützung durch ihren Browser verlassen, um Websiten zu konsumieren. Für diese stellt HTML, das nicht dem Standard entspricht und keine semantische Information transportiert, eine erheblich Hürde dar.
Ein HTML-Fundament, welches von Standards abweicht und keine semantische Information übermittelt, macht eine Website für viele Benutzer unbedienbar.
Zu dieser Gruppe Benutzer zählen unter anderem:
- Menschen mit Sehbeeinträchtigung, die einen Screenreader verwenden, um sich die Website vorlesen zu lassen. Ist die Seite nur visuell oder nicht nach HTML-Standards strukturiert, werden die Informationen unter Umständen in der falschen Reihenfolge wiedergegeben.
- Menschen mit motorischer Beeinträchtigung, welche die Tastatur benutzen, um durch die Seite zu navigieren. Ohne saubere Deklaration von Elementen durch HTML ist dies im besten Fall sehr mühsam, im schlimmsten Fall unmöglich.
- Benutzer, die Erweiterungen in ihrem Browser zu Hilfe nehmen, um die Struktur und den Inhalt einer Seite leichter verständlich oder besser lesbar zu machen. Auch diese Hilfsmittel funktionieren bei einer schlecht strukturierten Seite nicht.
Die WCAG als Gradmesser für ein standardkonformes, semantisches Website-Fundament
Dass die semantische, standarkonforme Datenstruktur eine Website essenziell für Barrierefreiheit ist, spiegelt sich auch in den WCAG und deren Kriterien wider. Viele davon lassen sich am besten oder überhaupt nur durch ein solides HTML-Fundament erfüllen, das gemäß des HTML-Standards definiert ist. Beispielhaft dafür seien folgende WCAG-Kriterien genannt:
- SC 1.3.1 gibt vor, dass die Struktur von Inhalten für möglichst viele Menschen verständlich sein muss (auch wenn sich die Darstellungsform ändert) und ist damit das essenzielle Kriterium für ein starkes Website-Fundament.
- SC 1.3.2 verlangt, dass die Reihenfolge von Informationen auf einer Website von möglichst vielen Menschen verstanden werden kann. Das setzt wohlstrukturiertes HTML voraus, da die Position der Information in der Code-Struktur entscheidend ist.
- SC 4.1.2 wird erfüllt, wenn Elemente einer Seite den eigenen Zustand verständlich machen und bedingt dadurch, dass standardisierte HTML-Elemente konform verwendet werden beziehungsweise selbstgestrikte Komponenten standardisierte Schnittstellen unterstützen.
Abgesehen von den angeführten Beispielen, in denen der Zusammenhang zwischen einer sauberen HTML-Struktur und Barrierefreiheit direkt sichtbar ist, gibt es noch viele weitere WCAG Kriterien, welche davon profitieren. Anders ausgedrückt ist der einfachste Weg zur Barrierefreiheit ein starkes Fundament aus semantischerm und standardkonformen HTML-Code. Die WCAG fördern damit ein stabiles Fundament für Websites.
Wirtschaftliche und technische Vorteile für semantische Struktur als Grundlage von Websites
Hat eine Website ein starkes Fundament aus standardkonformer, semantischer HTML-Struktur, so hat sie auch abseits der Barrierefreiheit wirtschaftlich und technisch einen Vorsprung.
Suchmaschinenoptimierung
Je leichter Information zugänglich ist, desto höher ihre Reichweite – das gilt nicht nur für Menschen, sondern auch für Maschinen. Durch ein semantisches HTML-Fundament werden Daten zu Informationen, die leichter und korrekt automatisch verarbeitet werden können. Die Qualität der Seite erhöht sich damit auch für Suchmaschienen – und höhere Qualität bedeutet ein besseres Ranking.
Erhöhte Kompatibilität
Hält sich eine Seite an den HTML-Standard, verbessert sich ihre Kompatibilität mit der diversen Menge an Endgeräten und Browsern auf dem Markt. Auch dadurch erhöht sich ihre Reichweite und das potenzielle Publikum.
Besser lesbarer Code
Für die Entwickler unter uns ist relevant, dass semantischer und standardkonformer HTML Code besser lesbar ist. Das zwölfmal verschachtelte Element ohne semantische Differenzierung ist nunmal schwer zu entschlüsseln. Semantischer HTML Code spart beim Entwickeln Zeit und Nerven und macht die Gesamtstruktur einfacher zu warten.
Langlebigkeit und Stabilität
Der HTML-Standard ist langlebig. Die aktuelle Version 5 der Spezifikation ist als “lebender Standard” bereits seit mehr als zehn Jahren aktuell
Werkzeuge und Ressourcen
Falls wir Sie davon überzeugen konnten, dass ein starkes Fundament wichtig für Websites und Online-Services ist, empfehlen wir zwei weiterführende Ressourcen:
- Das World Wide Web Consortium (W3C) bietet einen Online-Validator an, um die Gültigkeit von HTML auf Websites zu testen. Damit können Sie rasch und unkompliziert einen ersten Eindruck vom Zustand Ihrer Seite gewinnen: https://validator.w3.org/
- Für alle technisch interessierten, die sich eingehender damit beschäftigen wollen, was HTML semantisch macht, empfehlen wir folgenden Artikel: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Accessibility/HTML.
Fazit
Der einfachste Weg, eine Website möglichst weitreichend barrierefrei zu gestalten, ist ein starkes Fundament aus standardkonformer, semantischer Struktur durch HTML. Dadurch vermindern Sie nicht nur die Barrieren für Ihr Publikum, sondern erhöhen auch die Reichweite und Langlebigkeit Ihrer Inhalte. Wer sich die Mühe macht, Inhalte für das Web zu erstellen, sollte diese auch mit einer entsprechenden Verpackung würdigen!
Mit diesem Beitrag schließen wir unsere Reihe zum Thema "Barrierefreiheit im Web". Wir hoffen, Ihnen einen guten Überblick über die Thematik gegeben zu haben und freuen uns, wenn wir uns beim nächsten Artikel wieder lesen. Bis dann!