ARIA

Die fünf Regeln von ARIA Muss

Kein ARIA ist besser als schlechtes ARIA. Natives HTML verwenden, wenn möglich.
Keine nativen Semantiken überschreiben. Nicht <h2 role="tab">.
Alle interaktiven ARIA-Elemente müssen per Tastatur bedienbar sein.
Fokussierbare Elemente nicht mit role="presentation" oder aria-hidden="true" versehen.
Alle interaktiven Elemente brauchen einen zugänglichen Namen.

Wann ARIA verwenden? Muss

Natives HTML vs. ARIA
Statt ARIA	Natives HTML verwenden
`role="button"`	`<button>`
`role="link"`	`<a href>`
`role="navigation"`	`<nav>`
`role="checkbox"`	`<input type="checkbox">`

Häufig benötigte ARIA-Attribute

Zugängliche Namen

<!-- Sichtbares Label -->
<button aria-label="Menü schliessen">✕</button>

<!-- Label referenzieren -->
<div aria-labelledby="dialog-title">
  <h2 id="dialog-title">Konto löschen</h2>
</div>

Zustände

<button aria-expanded="false" aria-controls="menu">Menü</button>
<ul id="menu" hidden>...</ul>

<input aria-invalid="true" aria-describedby="error-msg">
<p id="error-msg">Pflichtfeld</p>

Live Regions

<!-- Für Statusmeldungen -->
<div aria-live="polite" role="status">3 Ergebnisse gefunden.</div>

<!-- Für dringende Meldungen -->
<div aria-live="assertive" role="alert">Sitzung läuft in 2 Minuten ab.</div>