Semantik im Web bedeutet, Inhalte durch HTML-Elemente nach ihrer Bedeutung auszuzeichnen – nicht nach ihrem Aussehen. Eine Überschrift ist eine Überschrift, weil sie einen Abschnitt einleitet, nicht weil sie größer dargestellt wird.
Aus dieser Auszeichnung baut der Browser den Accessibility Tree auf. Screenreader und andere assistive Technologien lesen ausschließlich diesen Baum. Semantisch korrektes HTML ist damit keine Stilfrage, sondern die Voraussetzung dafür, dass eine Website überhaupt zugänglich sein kann. Erfolgskriterium 1.3.1 Info und Beziehungen (Level A) verlangt genau das: Struktur und Beziehungen müssen programmatisch ermittelbar sein.
Grundprinzipien semantischer Auszeichnung:
Elemente entsprechend ihrer Bedeutung verwenden
Inhalt und Darstellung voneinander trennen
Hierarchische Beziehungen abbilden
Semantische Landmark-Elemente zur Orientierung bereitstellen
Interaktive Elemente korrekt kennzeichnen
Wichtige semantische Elemente:
<header>– Kopfbereich<nav>– Navigation<main>– Hauptinhalt<article>– In sich abgeschlossener Inhalt<section>– Thematisch zusammenhängender Bereich<aside>– Ergänzender Inhalt<footer>– Fußbereich<h1>bis<h6>– Überschriftenhierarchie
Häufige Fehler:
<div>und<span>übermäßig nutzenFalsche Überschriftenhierarchie
Fehlende Landmark-Bereiche
Tabellen für Layout verwenden
Die korrekte semantische Auszeichnung ist die Basis für barrierefreie Webseiten – sie ermöglicht es assistiven Technologien, Inhalte richtig zu interpretieren und an die Nutzenden zu vermitteln.
