ARIA: Accessible Rich Internet Applications, Roles, States
ARIA fügt Accessibility-Info zu dynamic UIs hinzu via Roles, States, Properties — für Screen-Reader, wenn HTML allein nicht ausreicht.
Was ist ARIA?
ARIA (Accessible Rich Internet Applications) ist eine W3C-Spec, die Accessibility-Info zu Web-Pages und Applications via HTML-Attributes hinzufügt. Sie sagt Assistive-Technologies (Screen-Reader, Voice-Control, Switch-Devices), was dynamic UI-Elements sind, ihren State und wie sie behaven — wenn HTML allein die Bedeutung nicht trägt.
ARIA wurde geschaffen, weil HTML-Elements wie <button> by default accessible sind, aber Custom-Widgets, gebaut mit <div>, für Assistive-Tech invisible sind ohne Hilfe.
Die drei Kategorien von ARIA-Attributes
| Typ | Zweck | Beispiel |
|---|---|---|
| Roles | Was das Element IST | role="button" |
| Properties | Attributes, die Element beschreiben | aria-label="Close" |
| States | Aktueller dynamischer State | aria-expanded="true" |
Die First-Rule von ARIA: nutze ARIA nicht
<!-- SCHLECHT -->
<div role="button" tabindex="0">Submit</div>
<!-- GUT -->
<button>Submit</button>Häufige ARIA-Roles
| Role | Für |
|---|---|
role="button" | Custom-Buttons |
role="dialog" | Modal-Dialogs |
role="tablist" + tab + tabpanel | Tab-UI |
role="menu" + menuitem | Application-Menüs |
role="combobox" | Autocomplete-Inputs |
role="tree" | Tree-Views |
role="alert" | Error-Messages |
role="status" | Non-critical Status-Updates |
role="navigation" | Navigation-Regions |
role="main" | Main-Content |
Häufige ARIA-Properties
| Property | Use |
|---|---|
aria-label | Accessible Name |
aria-labelledby | Reference Element, das das names |
aria-describedby | Reference längere Description |
aria-hidden="true" | Vor Assistive-Tech verstecken |
aria-haspopup | Element triggert Popup |
aria-controls | Element controlled anderes |
aria-current | Current Item in einem Set |
Häufige ARIA-States
| State | Use |
|---|---|
aria-expanded | Disclosure open? |
aria-selected | Tab/Option selected? |
aria-checked | Checkbox/Radio-State |
aria-disabled | Element disabled? |
aria-pressed | Toggle-Button-State |
aria-busy | Element wird updated |
aria-invalid | Form-Field invalid |
Live-Regions: Dynamic-Updates announcen
<div aria-live="polite" aria-atomic="true">
{{ savedMessage }}
</div>
<div role="alert">Error: connection lost</div>Real-world Beispiel: Accessible Tabs
<div role="tablist" aria-label="Account sections">
<button role="tab" aria-selected="true" aria-controls="profile-panel" id="profile-tab">
Profile
</button>
</div>
<div role="tabpanel" id="profile-panel" aria-labelledby="profile-tab">
Profile content
</div>ARIA Best Practices
- Native HTML first nutzen.
- Native Semantics nicht ändern.
- Alle interactive ARIA müssen keyboard-accessible sein.
- Focusable Elements nicht hiden.
- Visible Labels providen.
- Mit Screen-Reader testen.
- APG-Patterns folgen.
- States updaten when UI changed.
Häufige ARIA-Fallstricke
- Wrong ARIA over right HTML.
- aria-hidden on focusable Elements.
- Stale States.
- Overuse von role="application".
- Live-Regions firen zu oft.
- Missing Keyboard-Support.
- aria-label konflikt mit visible Text.
FAQ: ARIA
Sollte ich ARIA auf jedem Element nutzen?
Nein — nur wenn native HTML die Semantics nicht expressed.
Was ist die "First Rule of ARIA"?
"Nutze ARIA nicht" — wenn native HTML reicht, nutze das.
Hilft ARIA SEO?
Indirekt.
Was ist WAI-ARIA APG?
Authoring Practices Guide.
Kann ich ARIA auf SVG nutzen?
Ja.
Was ist aria-current?
Markiert das Current-Item in einem Set.
Wie teste ich ARIA?
Automated Tools + Manual Screen-Reader-Testing.
ARIA + Accessibility mit LoadFocus testen
LoadFocus läuft Lighthouse-Audits aus 25+ Regionen. Registrieren bei loadfocus.com/signup.
Verwandte LoadFocus-Tools
Setze dieses Konzept mit LoadFocus in die Praxis um — derselben Plattform, die alles antreibt, was du gerade gelesen hast.