Definition: Semantisches HTML heißt, jedes Element nach seiner Bedeutung zu wählen, nicht nach seinem Aussehen: <button> für Aktionen, <a href> für Ziele, <nav> für Navigation, <h2> für eine Überschrift. Der Browser übersetzt diese Bedeutung in Rollen, die Screenreader ansagen, und liefert das passende Tastaturverhalten gleich mit [1][2].
Englisch: Semantic HTML · Auch: semantisches Markup · Zuletzt geprüft: 27. September 2026
Warum Bedeutung wichtiger ist als Aussehen
Mit CSS kann ein <div> aussehen wie ein Button, eine Überschrift oder eine Liste. Für den Accessibility Tree bleibt es ein <div> ohne Rolle [4]. Ein echtes Element bringt dagegen viel ohne eine Zeile Zusatzcode mit [2]:
- Ein
<button>ist per Tab erreichbar, reagiert auf Enter und Leertaste und wird als „Schaltfläche“ angesagt. - Ein
<a href>ist erreichbar, reagiert auf Enter und erscheint in der Linkliste des Screenreaders. - Ein
<label for>verknüpft Text und Feld. Ein Klick auf den Text setzt den Fokus ins Feld. - Eine
<ul>wird als „Liste, 5 Einträge“ angesagt. <th>macht Tabellenköpfe zu Überschriften für jede Zelle.
Genau das verlangt WCAG 1.3.1 Info und Beziehungen: Struktur, die man sieht, muss auch im Code stehen [3].
Element nach Aufgabe
| Aufgabe | Richtiges Element | Häufiger Ersatz |
|---|---|---|
| Aktion auslösen | <button> | <div onclick> |
| Zu einer Seite gehen | <a href> | <span onclick> |
| Hauptinhalt | <main> | <div id="main"> |
| Überschrift | <h2> | <p class="title"> |
| Aufzählung | <ul>, <ol> | Absätze mit Strichen |
| Datentabelle | <table>, <th> | ein Raster aus <div>s |
| Feld beschriften | <label> | nur ein placeholder |
Im Code
<!-- Sieht aus wie ein Button, ist keiner -->
<div class="btn" onclick="save()">
Speichern
</div><!-- Semantisch: Tab, Enter, Leertaste -->
<button type="button" onclick="save()">
Speichern
</button>Häufige Fehler
- Überschriften nach Schriftgröße: Die Ebene folgt der Gliederung, die Größe regelt CSS. Mehr unter Überschriftenstruktur.
- Link oder Button verwechselt: Ein Link führt woandershin, ein Button löst etwas aus. Ein
<a>ohnehrefist nicht einmal per Tab erreichbar. - Tabellen fürs Layout, oder umgekehrt Datentabellen aus
<div>s. <br>und leere Absätze für Abstände. Screenreader sagen manche davon als „leer“ an.- Alles in
<div>s, dann ARIA darüber. Das ist mehr Arbeit und fehleranfälliger als das richtige Element – siehe ARIA.
Wie Reviseberg damit umgeht
axe-core findet viele Folgen fehlender Semantik: Listen ohne gültige Einträge (list, listitem), Felder ohne Beschriftung (label), eine übersprungene Überschriftenebene (heading-order) oder eine Seite ohne Hauptbereich (landmark-one-main). Listen und Beschriftungen ordnet Reviseberg WCAG-Kriterien zu (1.3.1, 4.1.2). Überschriftenfolge und Hauptbereich führt axe-core als Best Practice: Reviseberg zeigt sie als „Best Practice, kein WCAG-Kriterium“, sie zählen nie als Verstoß gegen ein Kriterium. Der Tastatur-Agent meldet keyboard:unreachable, wenn ein Element ein onclick-Attribut oder eine Bedien-Rolle hat, aber per Tab nicht erreichbar ist – das klassische <div> als Button. Handler, die per JavaScript angehängt werden, sieht keine Prüfung von außen. Und ob die Struktur im Code zur sichtbaren Gliederung passt, entscheidet am Ende ein Mensch.
Verwandte Begriffe
Accessibility Tree · ARIA · Landmark · Überschriftenstruktur · Tastaturbedienbarkeit