ARIA (Accessible Rich Internet Applications) ist eine Sammlung von Attributen, die Barrierefreiheitssemantik hinzufügen — Rollen, Zustände und Eigenschaften — die natives HTML nicht ausdrücken kann. Aber die wichtigste ARIA-Regel ist: bevorzuge natives HTML zuerst.
Save
Save
Native Elemente kommen kostenlos mit korrekten Rollen, Tastaturverhalten und Fokus. Greife nur dann auf ARIA zurück, wenn kein natives Element die Aufgabe erfüllt.
<!-- 1. Roles — what an element IS (for custom widgets) -->
<div role="tablist"><div role="tab" aria-selected="true">Tab 1</div></div>
<!-- 2. States — current condition (dynamic) -->
<button aria-expanded="false" aria-controls="menu">Menu</button>
<input aria-invalid="true" aria-describedby="err" />
<!-- 3. Properties — relationships / labels -->
<input aria-label="Search" />
<div aria-labelledby="heading-id"></div>
<div aria-live="polite">3 results found</div> <!-- screen reader announces updates -->
<div aria-live="assertive" role="alert">Error saving!</div> <!-- interrupts -->
Das ist wirklich nützliche ARIA: Bildschirmlesegeräte über Inhalte informieren, die sich ohne Seite neuladen ändern (Suchergebnisse, Benachrichtigungen, Validierungsfehler).
Falsche ARIA ist schlimmer als gar keine — sie gibt Bildschirmleser-Benutzern falsche Informationen. Und ARIA ändert nur Semantik, niemals Verhalten: role="button" auf einem <div> macht es nicht fokussierbar oder anklickbar; du musst selbst tabindex und Tastaturhandler hinzufügen.
Verwende semantisches HTML für 95% der Fälle; verwende ARIA, um Lücken bei benutzerdefinierten Widgets (Registerkarten, Comboboxen, Menüs) zu füllen und um dynamische Aktualisierungen über Live-Regionen anzukündigen.
Folge den Regeln — bevorzuge native Elemente, ändere native Semantik nicht unnötig, halte Zustände synchron und wende nie eine Rolle an, die du nicht vollständig implementierst.