Semantisches HTML heißt: Du wählst jedes HTML-Element nach seiner Bedeutung, nicht nach seinem Aussehen. Eine Schaltfläche wird zum <button>, eine Navigation zum <nav>, eine Überschrift zum <h1> bis <h6>. Der Browser und assistive Technologien wie Screenreader lesen daraus die Struktur deiner Seite ab. Ein <div> mit einem Klick-Handler sieht zwar aus wie ein Button, ist aber keiner – für Tastatur und Screenreader bleibt er unsichtbar.
Wie du es umsetzt
Nutze native Elemente, bevor du etwas selbst nachbaust. Sie bringen Tastaturbedienung, Fokus und Rollen von Haus aus mit.
- Interaktion:
<button>,<a href>,<input>statt klickbarer<div>. - Struktur:
<header>,<nav>,<main>,<footer>für klare ARIA-Landmarks. - Inhalt: eine logische Überschriftenstruktur ohne übersprungene Ebenen.
Native Elemente liefern dir automatisch einen Accessible Name aus dem sichtbaren Text. Erst wenn das nicht reicht, ergänzt du gezielt WAI-ARIA.
Häufiger Fehler
In WordPress bauen viele Page-Builder reine <div>-Strukturen. Klickbare Boxen ohne echtes Button- oder Link-Element fallen für die Tastaturbedienbarkeit komplett aus. Prüfe deine Templates: Lässt sich jedes interaktive Element mit Tab erreichen und mit Enter auslösen? Wenn nicht, fehlt das semantische Element. Sauberes HTML ist günstiger als jedes nachträgliche ARIA-Pflaster – und es hilft zugleich deinem SEO, weil Suchmaschinen die Struktur ebenfalls auswerten.