Semantic first
Barrierefreiheit, semantisches HTML und SEO – verständlich erklärt.
Praxiswissen für Websites, die zugänglich, rechtssicher und gut auffindbar sind: von den Menschen, für die Barrierefreiheit gemacht ist, über BFSG, BITV und WCAG bis zur sauberen Umsetzung im Code.
Die Themen im Überblick
Unsere Themengebiete
Verstehen → Fundament → Recht → Umsetzung → Auffindbarkeit → Nachschlagen: Jeder Bereich hat eine eigene Übersichtsseite und bündelt darunter vertiefende Artikel.
-
Barrierefreiheit verstehen
Der Einstieg: für wen Barrierefreiheit gemacht ist – Menschen, Einschränkungen und die assistiven Technologien, mit denen sie das Web nutzen.
-
Semantisches HTML
Das Fundament: Inhalte mit den Elementen auszeichnen, die ihre Bedeutung beschreiben – von header, nav, main und footer bis zur sauberen Überschriften-Hierarchie.
-
WCAG & BFSG
Recht und Standard: BFSG für die Wirtschaft, BITV für öffentliche Stellen – und dahinter die WCAG 2.2, hier mit allen A/AA-Kriterien als Referenz.
-
Komponenten
Formulare, Menüs, Dialoge, Tabs: die typischen Bausteine, jeweils mit Tastatur und Screenreader bedienbar – und mit so wenig ARIA wie möglich.
-
SEO & KI
Wie dieselbe saubere Struktur, die Barrierefreiheit schafft, auch Suchmaschinen und KI-Systemen hilft, deine Inhalte zu verstehen.
-
Ressourcen
Zum Nachschlagen und Mitnehmen: Snippets, Checklisten, der BFSG-Check, Muster-Erklärungen, ein Glossar und erprobte Tools für den Alltag.
-
Alles auf einen Blick
Sechs Bereiche, die aufeinander aufbauen – Semantik als gemeinsame Wurzel.
Der Zusammenhang
Warum Semantik alles verbindet
Barrierefreiheit, SEO und Performance werden oft als drei getrennte Aufgaben behandelt – mit eigenen Tools, eigenen Checklisten, eigenen Zuständigkeiten. In meiner Erfahrung teilen sie sich eine gemeinsame Wurzel: eine ehrliche, semantische Struktur.
Ein korrekt ausgezeichneter <button> ist mit der Tastatur bedienbar und für einen Screenreader verständlich, für eine Suchmaschine eindeutig und kommt ohne nachgerüstetes JavaScript aus. Eine einzige gute Entscheidung zahlt auf alle Ziele gleichzeitig ein.
Wie das im Detail funktioniert: Was ist semantisches HTML? →
Hier anfangen
Gute Einstiegsartikel
Alle sechs Bereiche sind inhaltlich vollständig. Diese Artikel sind ein guter Start:
-
Wie Screenreader-Nutzer surfen: Strategien & Zahlen
Wie Screenreader-Nutzer surfen: 71,6 % springen per Überschrift, nur 6,4 % lesen linear (WebAIM 2024). Die Zahlen – und was dein Markup liefern muss.
-
Was ist semantisches HTML?
Semantisches HTML heißt: Elemente nach Bedeutung wählen, nicht nach Aussehen. Was dabei im Accessibility Tree entsteht – mit Beispielen und Checkliste.
-
BFSG einfach erklärt
BFSG einfach erklärt: Wen das Barrierefreiheitsstärkungsgesetz betrifft, was ab wann gilt und welche Pflichten entstehen – mit Fallbeispielen.
-
Die erste Regel von ARIA
Die erste Regel von ARIA: natives HTML vor ARIA – warum eine Rolle ohne Verhalten schadet, alle fünf Regeln und die Fälle, in denen ARIA nötig ist.
-
Semantik & SEO: Wie sauberer Code rankt
Semantik und SEO: was semantisches HTML für Rankings wirklich bringt, was nicht – und warum Struktur bei KI-Antworten heute mehr zählt als früher.
-
Semantik, Barrierefreiheit, SEO & Performance
Semantik, Barrierefreiheit, SEO und Performance hängen an derselben Struktur: eine Entscheidung, vier Wirkungen – und die wenigen Stellen, wo es sich reibt.
Wer hinter html-einfach.de steckt
