Zum Inhalt springen

ARIA

ARIA ergänzt Informationen über Rollen, Zustände und Eigenschaften einer Oberfläche für assistive Technologien. Verhalten muss tatsächlich umgesetzt sein.

Auch bekannt alsAccessible Rich Internet ApplicationsWAI-ARIA
Design & UX

Bedeutung für assistive Technologien ergänzen

ARIA steht für Accessible Rich Internet Applications. Die zugehörigen Rollen und Attribute können Informationen über Bedienelemente an assistive Technologien vermitteln. Zum Beispiel beschreibt aria-expanded="false", dass der zugeordnete aufklappbare Bereich geschlossen ist.

In einem beispielhaften Portal trägt der Button „Weitere Rechnungsdetails“ dieses Attribut. Beim Öffnen wird es auf true geändert und der zugehörige Inhalt sichtbar. Bleibt der Wert unverändert, kann der Screenreader einen anderen Zustand vermitteln als die Oberfläche zeigt.

ARIA fügt selbst weder Klickverhalten noch Tastaturbedienung hinzu. Ein div mit role="button" wird dadurch nicht automatisch zu einem funktionierenden Button. Verwenden Sie passende native HTML-Elemente und ergänzen Sie ARIA dort, wo Informationen fehlen. Falsche Angaben können die Bedienung erschweren.

Quellen

Verwandte Begriffe

Beiträge zum Thema

Insights · Design & UX2 Min.Gleiche Gestaltung braucht nicht überall denselben SeitenaufbauEine Liste hilft beim Vergleichen; eine Freigabe braucht die entscheidenden Einzelheiten. Vertraute Bedienelemente können trotzdem gemeinsam bleiben.Julia Hoffmann13.11.2026
Insights · Design & UX2 Min.Übersetzungsabdeckung misst noch keine erledigte AufgabeVollständige Sprachdateien helfen bei der Bestandskontrolle. Für die Freigabe einer mehrsprachigen Oberfläche braucht es zusätzlich einen funktionierenden Ablauf.Anna Neumann13.11.2026
Insights · Design & UX2 Min.Nutzerwünsche nach Aufgabe und Wirkung einordnenEin hypothetisches Lagerbeispiel zeigt, warum Wunschhäufigkeit, Arbeitsfolgen und Nutzungssituation gemeinsam in die Priorisierung gehören.Julia Hoffmann13.11.2026
Insights · Design & UX2 Min.Formulare anhand einer vollständigen Aufgabe bewertenEin fiktiver Formularvergleich zeigt, welche Fragen nach einer Gestaltungsfreigabe offenbleiben: Korrektur, Datenerhalt und bestätigter Eingang.Julia Hoffmann13.11.2026
Ratgeber · Design & UX2 Min.Das Website-Menü an konkreten Aufgaben ausrichtenOrdnen Sie vorhandene Seiten den Aufgaben Ihrer Besucher zu. Eine ausgefüllte Zuordnung macht Menübegriffe, Ziele und die anschließende Prüfung nachvollziehbar.Julia Hoffmann13.11.2026
Ratgeber · Design & UX2 Min.Mehrsprachige Oberflächen mit einem konkreten Vorgang planenEin Portalbeispiel zeigt, wie Sie lange Texte, lokale Zahl- und Datumsformate sowie fehlende Übersetzungen für einen Sprachwechsel planen.Julia Hoffmann13.11.2026
Ratgeber · Design & UX2 Min.Lieferadressdialog mit der Tastatur prüfenEin ausgearbeitetes Beispiel zeigt Fokusfolge, Abbrechen und Speichern im Adressdialog. So werden Tastaturfehler konkret nachvollziehbar.Julia Hoffmann13.11.2026
Ratgeber · Design & UX2 Min.Projektformulare mit klaren Feldern und Fehlermeldungen planenEin Formularentwurf zeigt Pflichtangaben, verständliche Feldtexte und konkrete Fehlerhinweise. Eingaben bleiben beim Korrigieren erhalten.Julia Hoffmann13.11.2026

Design & UX mit ASES

Nutzererlebnis, Oberflächen und Markenauftritt

Angebot anfragenMehr zu Design & UX