ARIA HTML

ARIA HTML: Erst Semantik wählen, dann ergänzen.

Natives HTML bringt Rolle, Tastaturverhalten und Zustände mit. ARIA ergänzt fehlende Informationen – es repariert kein falsches Element.

01 / Semantik-Zoll

Markup deklarieren, Befund direkt lesen.

Die Demo startet von selbst und zeigt die wichtigsten Zustände. Sobald Sie eingreifen, gehört der Prüfstand Ihnen.

Semantik-Zoll

2 Konflikte

Prüfpass · beispiel.de

Starke HTML-Semantik überschrieben
Zeile 1 · <h2>: role="button" widerspricht der Überschrift.
Interaktion in ein button-Element verschieben; Überschrift als Überschrift erhalten.
ARIA ersetzt kein Button-Verhalten
Zeile 2 · <div>: role="button" liefert weder Tastaturverhalten noch Formularlogik.
Durch <button type="button"> ersetzen und Zustände per ARIA ergänzen.
Gesteuerter Bereich nicht benannt
Zeile 2 · <div>: aria-expanded hat keinen aria-controls-Bezug.
Den ein- und ausgeblendeten Bereich eindeutig per aria-controls referenzieren.

Der Laborcheck erkennt ausgewählte Markup-Konflikte. Verhalten, zugängliche Namen und Screenreader-Ausgabe brauchen Tests auf der laufenden Seite.

02 / Der Unterschied

Rollen behaupten nur Verhalten
role auf div oder Überschrift liefert weder Tastaturbedienung noch Zustände. Das Markup sieht fertig aus, die Bedienung fehlt.
Der Check prüft im Seitenkontext
Der Website-Check findet widersprüchliche Rollen, gebrochene ARIA-ID-Bezüge und weitere automatisch erkennbare Barrieren auf Ihren Seiten.
Fundstellen statt Ausschnitt
Jeder Befund nennt Seite, Vorkommen und den konkreten nächsten Schritt – kostenlos und ohne Installation.

03 / Auf Ihrer Website

Der Laborcheck prüft einen Ausschnitt. Der Website-Check prüft ARIA im gerenderten Kontext Ihrer Seiten.