aria javascript

aria javascript hält Oberfläche und DOM im selben Takt.

JavaScript muss sichtbaren Zustand, aria-expanded und Tastaturverhalten gemeinsam ändern. ARIA allein öffnet nichts. Native HTML-Elemente sparen dabei eigene Interaktionslogik.

01 / State-Labor

Einen Zustand ändern, drei Spuren vergleichen.

Die Demo startet von selbst und zeigt die wichtigsten Zustände. Sobald Sie eingreifen, gehört das Labor Ihnen.

Live-Komponente

Sichtbarzu

DOMexpanded=false

Tastaturbedienbar

Erzeugter JavaScript-Vertrag

DOM und Verhalten

const trigger = document.querySelector('button');
const panel = document.querySelector('#details');

function toggle() {
  const open = panel.hidden;
  trigger.setAttribute('aria-expanded', String(open));
  panel.hidden = !open;
}

trigger.addEventListener('click', toggle);

02 / Der Unterschied

Eine Komponente ist der Anfang, nicht die Oberfläche.

Zustände laufen auseinander
Nach jeder Änderung am Toggle-Code kann der Klick das Panel öffnen, ohne aria-expanded zu aktualisieren – oder umgekehrt. Oberfläche und Screenreader zeigen dann zwei verschiedene Wahrheiten.
Der Check liest das veröffentlichte DOM
Der Website-Check findet ARIA-Attribute mit ungültigen Werten, Verweise ohne Ziel und Controls ohne zugänglichen Namen – die Stellen, an denen State-Logik und Markup auseinanderlaufen.
Fundstellen statt Code-Review
Jeder Befund nennt Seite, Vorkommen und den konkreten nächsten Schritt – kostenlos und ohne Installation.

03 / Auf Ihrer Website

Jetzt die eigene Oberfläche prüfen.

Das Labor prüft einen State-Wechsel. Der Website-Check prüft Ihre veröffentlichten Seiten auf ARIA-Probleme und weitere automatisch erkennbare Barrieren.

1URL
2Auswahl
3Prüfung
4Ergebnis

DOM und Verhalten

Zustände laufen auseinander

Der Check liest das veröffentlichte DOM

Fundstellen statt Code-Review