Barrierefreie Inhalte können von Menschen unabhängig von ihren körperlichen Merkmalen verstanden werden. Wenn du also Inhalte so erstellst, dass man sie ohne Sehen oder Hören verstehen kann, sind sie auch für Maschinen verständlich. Der Grund dafür liegt in der gemeinsamen Basis: semantischem HTML.
Was ist Maschinenlesbarkeit?
Maschinenlesbarkeit beschreibt, wie gut Software, zum Beispiel ein Crawler, ein KI-Modell oder ein Screenreader, Inhalte einer Website interpretieren kann. Es geht nicht darum, ob ein Mensch den Text lesen kann, sondern ob eine Maschine versteht: Was ist eine Überschrift? Was ist eine Liste? Was gehört zusammen? Was ist der Inhalt dieses Bildes?
Eine Website, die beispielsweise nur aus einem unendlich langen Textblock ohne Überschriften und Bildern ohne Alt-Texte besteht, ist für Software schwer zu verstehen. Es fehlt der Bezug der Inhalte zueinander. Die Information, was im Bild abgebildet ist, fehlt der Software komplett.
Was hat Barrierefreiheit damit zu tun?
Digitale Barrierefreiheit bedeutet unter anderem, dass Webinhalte von assistiven Technologien (Software, die Menschen mit Behinderungen beim Zugang zu digitalen Inhalten unterstützt) verarbeitet werden können. Ein Screenreader kann nur dann sinnvoll vorlesen, wenn Webseiteninhalte klar strukturiert sind.
Konkret heißt das: Der Screenreader muss wissen, dass ein bestimmter Text eine Überschrift ist (nicht nur optisch größer, sondern tatsächlich als <h2> ausgezeichnet). Er muss wissen, dass ein Bild existiert und was es zeigt (Alt-Text).
Genau diese Informationen sind es, die auch ein Google-Crawler, ein KI-Sprachmodell beim Indexieren oder ein anderes automatisiertes System benötigt, um eine Seite zu verstehen.
Semantisches HTML
Semantisches HTML bedeutet, HTML-Elemente entsprechend ihrer inhaltlichen Bedeutung einzusetzen und nicht nur für das visuelle Erscheinungsbild. Statt alles in <div>-Container zu packen, werden bedeutungstragende Elemente verwendet:
| Barrierefreiheits-Maßnahme | Vorteil für Maschinenlesbarkeit |
|---|---|
Überschriften <h1>–<h6> für inhaltliche Gliederung | Suchmaschinen und KI erkennen Struktur, Hierarchie und Relevanz von Inhalten |
Listen <ul> / <ol> für aufzählbare Inhalte | Maschinen erkennen Zusammengehörigkeit und können Listenelemente einzeln verarbeiten |
Tabellen <table> mit <th>-Spaltenköpfen | Crawler und KI können tabellarische Daten korrekt als solche interpretieren |
Alt-Texte für Bilder (alt="...") | Suchmaschinen indexieren Bildinhalte; KI kann Bilder semantisch einordnen |
<nav>, <main>, <footer> (Landmarks) | Maschinen wissen, welcher Teil der Seite der Hauptinhalt ist |
<blockquote> für Zitate | Inhalte werden als Zitat kontextualisiert, nicht als eigenständige Aussage |
Das Prinzip dahinter
Der Kerngedanke ist einfach: Bedeutung muss im Code stecken, nicht nur im Auge des Betrachters. Wenn ein Text optisch wie eine Überschrift aussieht (groß, fett, oben), aber im Code als normaler Paragraph (<p>) ausgezeichnet ist, weiß weder der Screenreader noch der Crawler, dass es sich um eine Überschrift handelt. Die Information geht verloren. Für Menschen mit Sehbehinderung und für Maschinen gleichermaßen.
Wie profitieren KI-Systeme von barrierefreien Inhalten?
Große Sprachmodelle (LLMs) wie die, die hinter KI-Assistenten stecken, werden unter anderem auf Webinhalten trainiert und greifen beim Beantworten von Fragen auch auf Webinhalte zu. Dabei ist entscheidend, wie gut die Inhalte strukturiert sind.
Ein barrierefrei aufgebauter Text gibt einem KI-System deutlich mehr Kontext als ein unstrukturierter Fließtext. Das Modell kann besser einordnen:
- In welcher Beziehung stehen die Informationen zueinander?
- Was sind die wichtigsten Inhalte?
- Welche Informationen zeigen (komplexe) Grafiken?
- Wie hängen tabellarische Daten zusammen?
Barrierefreie Websites sind damit auch KI-freundliche Websites.
Was bedeutet das für die Praxis?
Wer barrierefreie Webinhalte erstellt, muss keine extra Arbeit für Maschinenlesbarkeit leisten. Beides entsteht aus denselben guten Gewohnheiten:
- Überschriften nicht zur optischen Gestaltung verwenden, sondern zur inhaltlichen Strukturierung.
- Bilder immer mit einem Alt-Text versehen.
- Listen als Listen auszeichnen, nicht als Absätze mit Bindestrichen.
- Tabellen mit Spaltenköpfen (
<th>) für tabellarische Daten nutzen.
Diese Maßnahmen sind der kleinste gemeinsame Nenner von Barrierefreiheit, SEO und Maschinenlesbarkeit. Sie kosten wenig Aufwand und zahlen auf mehrere Ziele gleichzeitig ein.