html-einfach.de

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.

Mit Barrierefreiheit starten Zu den Themenbereichen

Die Themen im Überblick

Sechs Bereiche, ein roter Faden

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

    Überschriften-Sprünge, Landmark-Navigation, Element-Listen: die typischen Surf-Strategien von Screenreader-Nutzern – und was dein Markup dafür liefern muss.

  • Was ist semantisches HTML?

    Bedeutung statt Aussehen: Was semantisches HTML ausmacht und warum es Browsern, Screenreadern und Suchmaschinen hilft, deine Inhalte zu verstehen.

  • BFSG einfach erklärt

    Das Barrierefreiheitsstärkungsgesetz verständlich: Wen es betrifft, was ab wann gilt und welche Pflichten entstehen. Keine Rechtsberatung.

  • Die erste Regel von ARIA

    Kein ARIA ist besser als schlechtes ARIA: Warum natives HTML zuerst kommt und wann ARIA wirklich nötig ist.

  • Semantik & SEO: Wie sauberer Code rankt

    Warum semantisches HTML die Grundlage für gutes Ranking ist und wie Suchmaschinen strukturierte Inhalte besser verstehen.

  • Semantik, Barrierefreiheit, SEO & Performance

    Wie semantisches HTML, Barrierefreiheit, SEO und Performance zusammenhängen und sich gegenseitig verstärken.

Jakob Sommer

Wer dahinter steckt

Ich bin Jakob Sommer und arbeite seit rund zwei Jahrzehnten als Webdesigner und Entwickler. An Werkzeugen, Trends und Frameworks hat sich vieles geändert – dass sich sauberes, semantisches Markup auszahlt, gehört nicht dazu.

html-einfach.de ist mein Versuch, dieses Wissen so weiterzugeben, wie ich es mir selbst oft gewünscht hätte: praxisnah, ohne Dogma und immer am echten Code orientiert.

Mehr über mich und dieses Projekt →