SEO & KI · Zusammenhang & Performance
Semantik, Barrierefreiheit, SEO & Performance
Barrierefreiheit, SEO und Performance werden in vielen Projekten als drei getrennte Aufgaben behandelt – mit eigenen Tools, eigenen Checklisten, manchmal eigenen Zuständigkeiten. In meiner Erfahrung teilen sie sich eine gemeinsame Wurzel, und es ist genau die, um die sich diese ganze Website dreht: eine ehrliche, semantische Struktur. Wer die hat, bekommt von allem dreien einen großen Teil geschenkt.
Das ist keine schöne Theorie, sondern lässt sich an fast jeder Entscheidung im Frontend zeigen. Fangen wir mit der kleinsten an.
Eine Entscheidung, vier Wirkungen
Nimm einen korrekt ausgezeichneten <button>. Diese eine Wahl zahlt gleichzeitig auf vier Ziele ein:
- Barrierefreiheit: Er ist mit Tastatur und Sprachsteuerung bedienbar und für einen Screenreader als Schaltfläche verständlich.
- SEO: Seine Rolle ist für eine Suchmaschine eindeutig, ohne Rätselraten.
- Performance: Er bringt sein Verhalten nativ mit – kein nachgerüstetes JavaScript, das geladen und ausgeführt werden muss.
- Wartbarkeit: Er ist selbsterklärend; wer den Code später liest, versteht ihn sofort.
Ein nachgebauter <div>-Button müsste all das mühsam nachrüsten – und wäre am Ende schlechter in jeder einzelnen Disziplin. Eine gute Entscheidung, vierfacher Nutzen. Das ist das Muster.
Dieselbe Wurzel, viele Früchte
Der Grund ist simpel: Barrierefreiheit, Suchmaschinen und Performance werten alle dieselbe Sache aus – die Bedeutung, die im Markup steckt. Fehlt sie, müssen alle drei raten oder nachbauen. Ist sie da, profitieren alle drei zugleich:
| Maßnahme | Barrierefreiheit | SEO | Performance |
|---|---|---|---|
| Überschriften-Hierarchie | Navigation per Screenreader | Outline & Snippets | – |
| Alt-Texte | Bildinhalt hörbar | Bildersuche | – |
Echte <button>/<a> |
Tastatur bedienbar | eindeutige Rolle | weniger JS |
| Schlankes semantisches HTML | robust für Hilfsmittel | gut crawlbar | schnelleres Rendern |
Man muss diese Punkte nicht dreimal aus drei Blickwinkeln abarbeiten. Man macht sie einmal richtig – und hakt sie dreifach ab.
Wo es sich auch mal reibt
Ehrlich bleiben gehört dazu: Immer und überall ziehen die vier nicht am selben Strang. Eine aufwendige Animation kann die wahrgenommene Qualität heben und gleichzeitig der Performance und bewegungsempfindlichen Menschen schaden. Ein Endlos-Scroll fühlt sich modern an und macht zugleich Orientierung und Auffindbarkeit schwerer. Solche Zielkonflikte gibt es – aber sie sind die Ausnahme. In der überwiegenden Zahl der Fälle zeigt die gute Entscheidung in dieselbe Richtung.
Performance gehört dazu
Performance wirkt zunächst wie der Außenseiter der Runde – sie hat scheinbar nichts mit Bedeutung zu tun. Hat sie aber: Schlankes, semantisches HTML braucht weniger nachgerüstetes JavaScript, rendert schneller und schneidet bei den Core Web Vitals fast von allein gut ab. Wer ARIA und Skripte nur dort einsetzt, wo nötig – die erste Regel von ARIA –, spart Gewicht und gewinnt Tempo.
Warum ich so baue
Ich optimiere diese vier Dinge schon lange nicht mehr getrennt. Ich baue zuerst semantisch sauber – und stelle dann fest, dass Barrierefreiheit, SEO und Performance zu großen Teilen schon erledigt sind. Das ist kein Dogma, sondern Bequemlichkeit im besten Sinn: der kürzeste Weg zu einer Seite, die zugänglich, auffindbar und schnell ist. Genau diese Verbindung ist der rote Faden hinter jedem Thema auf dieser Website – auch hinter den vier Prinzipien der WCAG, deren viertes, Robustheit, direkt auf semantisches Markup zeigt.
Häufige Fragen
Heißt das, ich brauche keine separaten Audits mehr?
Doch – prüfen muss man trotzdem, jede Disziplin hat ihre Eigenheiten. Aber die gemeinsame Grundlage sorgt dafür, dass diese Audits viel weniger Befunde liefern. Man räumt nicht dreimal auf, sondern baut einmal ordentlich.
Was, wenn ein Ziel mit einem anderen kollidiert?
Dann abwägen – und meist gibt es eine Lösung, die allen dient (etwa Animation nur bei prefers-reduced-motion: no-preference). Echte Konflikte sind selten und lassen sich bewusst entscheiden.
Wo fange ich an, wenn ich es richtig machen will?
Bei der Struktur. Was ist semantisches HTML? ist der Einstieg, von dem aus alles andere leichter wird.
Fazit
Barrierefreiheit, SEO und Performance sind keine drei Baustellen, sondern drei Sichten auf dieselbe Grundlage: semantisches HTML. Eine gute Entscheidung – das echte Element statt des Nachbaus – zahlt auf alle gleichzeitig ein. Es gibt Ausnahmen, in denen man abwägen muss, aber die Regel ist Eintracht, nicht Konflikt. Deshalb beginnt gute Arbeit nicht bei den Tools, sondern beim Markup.