ARIA

ARIA (Accessible Rich Internet Applications) ist eine W3C-Spezifikation, die HTML um Attribute erweitert, um dynamische Web-Inhalte für Screenreader zugänglich zu machen. Mit roles, states und properties können Entwickler die Bedeutung und den Zustand von UI-Komponenten beschreiben. ARIA ist primär für Websites relevant, beeinflusst aber auch das Verständnis von PDF-Barrierefreiheit.

Was ist ARIA?

ARIA (vollständig: WAI-ARIA = Web Accessibility Initiative – Accessible Rich Internet Applications) wurde entwickelt, um die Lücke zwischen modernen, interaktiven Webanwendungen und assistiven Technologien zu schließen.

Das Problem, das ARIA löst:

HTML wurde für statische Dokumente entwickelt. Moderne Webanwendungen haben:

• Dropdown-Menüs
• Modale Dialoge
• Live-Updates
• Benutzerdefinierte Widgets

Diese Elemente sind für Screenreader ohne zusätzliche Informationen nicht verständlich.

ARIA-Attribute in drei Kategorien:

1. Roles (Rollen):
Definieren, WAS ein Element ist.

„`html

„`

2. States (Zustände):
Beschreiben den aktuellen Zustand (ändern sich dynamisch).

„`html
An

„`

3. Properties (Eigenschaften):
Beschreiben Merkmale (ändern sich selten).

„`html
X

„`

Wichtige ARIA-Attribute:

Attribut	Funktion	Beispiel
`role`	Definiert Element-Typ	`role=“button“`
`aria-label`	Zugänglicher Name	`aria-label=“Suche“`
`aria-labelledby`	Referenz auf Label	`aria-labelledby=“title“`
`aria-describedby`	Referenz auf Beschreibung	`aria-describedby=“hint“`
`aria-hidden`	Versteckt für Screenreader	`aria-hidden=“true“`
`aria-live`	Ankündigt Updates	`aria-live=“polite“`
`aria-expanded`	Auf/zugeklappt	`aria-expanded=“false“`
`aria-required`	Pflichtfeld	`aria-required=“true“`

## Warum ist ARIA wichtig für Barrierefreiheit?

ARIA ermöglicht Barrierefreiheit für komplexe Webanwendungen:

Die erste Regel von ARIA:
> „Wenn Sie ein natives HTML-Element verwenden können, tun Sie das.“

ARIA ist ein Fallback, wenn HTML nicht ausreicht.

Korrekte Anwendung:
„`html

Absenden
„`

ARIA für PDFs?

• PDFs nutzen kein ARIA direkt
• Aber die Konzepte sind ähnlich: PDF-Tags (H1, Table, Figure) erfüllen die gleiche Funktion wie ARIA-Rollen
• Verständnis von ARIA hilft beim Verständnis von PDF/UA

ARIA in der Praxis

Beispiel 1: Dropdown-Menü

„`html

Menü

• Option 1
• Option 2

„`

Screenreader sagt: „Menü, Schaltfläche, zugeklappt, hat Pop-up“

Beispiel 2: Modal-Dialog

„`html

„`

Screenreader sagt: „Dialog, Bestätigung“

Beispiel 3: Live-Region (Benachrichtigungen)

„`html

„`

ARIA-Fehler vermeiden:

Fehler	Problem	Lösung
`role=“button“` ohne Tastatur	Nicht bedienbar	`tabindex=“0″` + Keyhandler
`aria-hidden=“true“` auf fokussierbarem Element	Fokus-Falle	Fokus entfernen oder nicht verstecken
Falsche Role	Verwirrend	Korrekte Role verwenden
Fehlende States	Zustand unklar	States aktualisieren
Zu viel ARIA	Überladen	Nur wo nötig

### ARIA vs. PDF-Tags (Konzeptvergleich):

ARIA (Web)	PDF-Tag	Funktion
`role=“heading“`	` ` – ` `	Überschrift
`role=“img“` + `aria-label`	` ` + Alt	Bild mit Beschreibung
`role=“list“`	„	Liste
`role=“table“`	`` Tabelle `role=“link“` „ Hyperlink `aria-hidden=“true“` Artifact Für AT versteckt ## Verwandte Begriffe WCAG – ARIA hilft, WCAG zu erfüllen Screen Reader – Liest ARIA-Informationen Tagged PDF – PDF-Äquivalent zu ARIA Accessibility – ARIA ist Teil davon PDF-Tag – Konzeptionell ähnlich wie ARIA-Roles Assistive Technologie – Nutzt ARIA Häufige Fragen zu ARIA 1. Brauche ich ARIA für PDFs? Nein, PDFs nutzen kein ARIA. PDFs haben ihr eigenes System: PDF-Tags (H1, P, Table, Figure) und Attribute (Alt-Text). Das Konzept ist aber ähnlich: Beide geben Elementen semantische Bedeutung für Screenreader. Wenn Sie ARIA verstehen, verstehen Sie auch PDF-Tags besser. 2. Was ist die „erste Regel von ARIA“? „Wenn Sie ein natives HTML-Element verwenden können, verwenden Sie kein ARIA.“ Native Elemente (``, `