Was ist ein Inlay?
Ein Inlay ist eine Korrektur für Barrierefreiheit, die im HTML deiner Seite steht, so wie dein Server sie ausliefert. Anders als ein Overlay braucht es kein Skript im Browser: Suchmaschinen, KI-Crawler und Screenreader bekommen die korrigierte Seite sofort, ohne dass jemand etwas einschalten muss.
Inlay und Overlay im Vergleich
Beide Ansätze wollen Barrieren auf einer Website beheben. Der Unterschied liegt darin, wo die Korrektur sitzt. Ein Overlay ist ein Skript, das erst im Browser lädt und die Seite dort verändert, oft erst, wenn jemand eine Funktion einschaltet. Die Seite, die dein Server ausliefert, bleibt dabei unverändert. Ein Inlay steht dagegen in genau dieser Seite.
| Merkmal | Overlay | Inlay |
|---|---|---|
| Wo die Korrektur sitzt | Legt sich im Browser über die Seite | Steht im HTML, das dein Server ausliefert |
| Wann sie wirkt | Oft erst, wenn jemand sie einschaltet | Sofort, für alle Besucher*innen |
| Wer sie sieht | Suchmaschinen und KI-Crawler nicht | Suchmaschinen, KI-Crawler und Screenreader |
| Für das BFSG | Macht eine Website nicht barrierefrei | Behebt die Barriere in der Seite selbst |
Warum Suchmaschinen und KI-Crawler den Unterschied sehen
Ein großer Teil der Aufrufe einer Website kommt heute nicht von Menschen, sondern von Crawlern: von Suchmaschinen, die Seiten erfassen, und von KI-Systemen, die aus Websites ihre Antworten zusammenstellen. Eine Auswertung von Vercel und MERJ zeigt: Die Crawler von ChatGPT, Claude und Perplexity führen kein JavaScript aus. Was ein Overlay erst im Browser an der Seite ändert, sehen sie deshalb nie. Google sieht solche Änderungen erst, nachdem die Seite gerendert wurde.
Ein Inlay steht schon im ausgelieferten HTML. Ein korrigierter Alternativtext, eine richtig ausgezeichnete Überschrift oder ein verständlicher Linktext kommt bei allen an, die die Seite abrufen: bei Menschen, bei Screenreadern und bei Crawlern.
KI-Blick: dieselbe Seite, zwei Wege
Eine Produktkachel mit vier Barrieren. Wähle, wie sie korrigiert wird, und vergleiche, was im Browser zu sehen ist und was ein KI-Crawler wirklich bekommt.
Korrektur per Overlay-Skript: Im Browser sieht die Kachel korrigiert aus, sobald das Skript geladen ist. Der KI-Crawler bekommt das ursprüngliche HTML, alle vier Korrekturen fehlen.
Im Browser
In beiden Fällen sieht die Kachel gleich aus. Beim Overlay aber erst, wenn das Skript geladen ist.
Was der KI-Crawler bekommt
<div class="titel">Gartenstuhl Lina</div><img src="stuhl-lina.jpg"><p>Wetterfest, aus Akazienholz. 79 €</p><a href="/gartenstuhl-lina">Hier klicken</a><button><svg>…</svg></button><script src="overlay.js"></script> (Skript, läuft erst im Browser)Das Skript (orange) führt der Crawler nicht aus. Er liest „Hier klicken“, ein Bild ohne Beschreibung und einen Knopf ohne Namen.
| Korrektur | Im Browser | KI-Crawler | |
|---|---|---|---|
| Überschrift statt fett gesetztem Text | nach dem Laden des Skripts | fehlt | erst nach dem Rendern |
| Bildbeschreibung (Alternativtext) | nach dem Laden des Skripts | fehlt | erst nach dem Rendern |
| Linktext statt „Hier klicken“ | nach dem Laden des Skripts | fehlt | erst nach dem Rendern |
| Name für den Warenkorb-Knopf | nach dem Laden des Skripts | fehlt | erst nach dem Rendern |
Vereinfachtes Beispiel. Inhalte, die erst das JavaScript einer Website im Browser erzeugt, korrigiert site-check ebenfalls über ein kleines Skript, sie stehen auch ohne Korrektur nicht im ausgelieferten HTML.
Warum das für das BFSG zählt
Das Barrierefreiheitsstärkungsgesetz verlangt, dass die Website selbst barrierefrei ist. Maßstab sind die EN 301 549 und die WCAG 2.1 auf Stufe AA. Die Überwachungsstellen des Bundes und der Länder halten in ihrer gemeinsamen Einschätzung zu Overlay-Tools fest, dass solche Tools einen Webauftritt mit Barrieren derzeit nicht barrierefrei machen können. Häufig entstehen durch sie sogar neue Barrieren, die es ohne das Tool nicht gäbe.
Ein Inlay setzt deshalb dort an, wo die Anforderungen gelten: in der Seite selbst. Es nimmt dir nicht die Prüfung ab, ob deine Website alle Kriterien erfüllt. Aber es behebt Barrieren an der richtigen Stelle.
Wie viele Barrieren hat deine Website?
Der kostenlose Scan zeigt dir, wie viele Barrieren in deiner Seite stecken.
So setzt site-check ein Inlay
Vier Schritte, vom Scan bis zur korrigierten Seite:
- 01
Prüfen
site-check scannt deine Website nach WCAG 2.1 AA und findet die Barrieren.
- 02
KI-Fix vorbereiten
Für jeden Fund liegt eine Korrektur bereit. Wo es auf den Inhalt ankommt, etwa bei einer Bildbeschreibung, macht die KI einen Vorschlag, den du übernehmen oder anpassen kannst.
- 03
Freigeben
Du gibst die Korrektur mit einem Klick frei.
- 04
Ausliefern
Das site-check-Plugin für WordPress, TYPO3 und Grav setzt die Korrektur in das HTML, das dein Server ausliefert. Ab dann wirkt sie für alle, die deine Seite aufrufen.
Was ein Inlay nicht kann
Ein Inlay ist kein Zaubermittel. Vier Dinge solltest du wissen:
Inhaltliche Entscheidungen
Ob eine Bildbeschreibung stimmt oder eine Reihenfolge Sinn ergibt, entscheidet ein Mensch. site-check bereitet die Korrektur vor, du gibst sie frei.
Farbkontraste
Zu schwache Kontraste hängen an deinem Design. site-check misst sie und schlägt passende Farben vor, setzt sie aber nicht als Inlay. Im Widget gibt es zusätzlich einen Kontrastmodus als Hilfe.
Inhalte aus dem Browser
Manche Inhalte erzeugt erst das JavaScript deiner Website im Browser, sie stehen nie im ausgelieferten HTML. Für sie korrigiert ein kleines Skript im Browser nach. Seitentitel und Sprachangabe setzt site-check dagegen nur im HTML.
Die Prüfung im Ganzen
Ein Inlay behebt einzelne Barrieren. Ob deine Website alle Anforderungen erfüllt, zeigt erst der Blick auf alle Kriterien. Was offen bleibt, findest du in site-check in der Liste der manuellen Aufgaben.
Inlay und Widget ergänzen sich
Zusätzlich zu den Inlays bietet site-check ein Assistenz-Widget. Damit können Besucher*innen Schrift, Kontrast und mehr selbst anpassen. Das Widget ist eine Hilfe, kein Inlay und kein Nachweis für Barrierefreiheit. Warum ein Widget allein nicht reicht, steht im Ratgeber Reicht ein Barrierefreiheits-Widget?
Häufige Fragen zum Inlay
Was ist ein Inlay?
Ein Inlay ist eine Korrektur für Barrierefreiheit, die im HTML deiner Seite steht, so wie dein Server sie ausliefert. Anders als ein Overlay braucht es kein Skript im Browser: Suchmaschinen, KI-Crawler und Screenreader bekommen die korrigierte Seite sofort, ohne dass jemand etwas einschalten muss.
Was ist der Unterschied zwischen Inlay und Overlay?
Ein Overlay ist ein Skript, das die Seite erst im Browser verändert, oft erst, wenn jemand eine Funktion einschaltet. Ein Inlay steht schon im HTML, das dein Server ausliefert. Es wirkt deshalb sofort und für alle, auch für Suchmaschinen und KI-Crawler, die kein JavaScript ausführen.
Verändert ein Inlay die Inhalte in meinem CMS?
Nein. Deine Inhalte im CMS bleiben, wie sie sind. Das site-check-Plugin setzt die Korrektur in das HTML, das dein Server ausliefert. Deshalb lässt sich jede Korrektur jederzeit wieder zurücknehmen.
Macht ein Inlay meine Website barrierefrei?
Ein Inlay behebt einzelne Barrieren dort, wo sie entstehen: in der Seite selbst. Ob eine Website insgesamt barrierefrei ist, hängt an allen Kriterien der WCAG 2.1 AA, auch an solchen, die ein Mensch beurteilen muss. site-check zeigt dir, was behoben ist und was noch offen ist.
Was passiert mit den Korrekturen, wenn ich kündige?
Endet dein Abo, nimmt site-check die Inlays wieder aus deiner Seite. Das passiert beim nächsten Abgleich, in der Regel wenige Minuten nach dem Ende der bezahlten Laufzeit, danach ist deine Website wieder im Ausgangszustand. Kündigst du zum Laufzeitende oder schlägt eine Zahlung fehl, bleiben die Inlays bis zum Ende der bezahlten Laufzeit aktiv. Die Verbindung zum Plugin bleibt bestehen: Schließt du wieder ein Abo ab, sind deine Korrekturen ohne neue Kopplung zurück.
Passende Ratgeber
Gilt das BFSG für dich?
Selbsttest in drei Fragen: Wen das Gesetz betrifft, was es verlangt und welche Fristen gelten.
Mehr erfahren →Barrierefreiheit für WordPress
Was das Plugin als Inlay korrigiert und wie du WordPress in vier Schritten verbindest.
Mehr erfahren →Barrierefreiheit für TYPO3
Die Extension für TYPO3 12.4 bis 14: Korrekturen als Inlay, auch mit Seiten-Cache.
Mehr erfahren →Korrekturen in deiner Seite, nicht darüber
Ein Inlay behebt Barrieren dort, wo sie für Menschen, Suchmaschinen und das BFSG zählen: im HTML deiner Seite. Mit dem kostenlosen Scan siehst du, wie viele Barrieren deine Website heute hat.
Hinweis: Dieser Beitrag ist eine allgemein verständliche Einordnung und keine Rechtsberatung. Maßgeblich ist stets die tatsächliche Barrierefreiheit der Website. Bei konkreten rechtlichen Fragen empfiehlt sich die Prüfung durch eine fachkundige Stelle.