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.