--- title: "ARIA" url: "https://www.insideuxdesign.com/de/glossar/aria" language: "de" description: "Was ist ARIA? Einfach erklärt mit Rollen, Zuständen, der ersten Regel von ARIA und einem Beispiel. Erfahre, wann du ARIA brauchst und wann nicht." published: "2026-10-14T15:20:35+02:00" updated: "2026-10-14T15:20:35+02:00" --- # ARIA ARIA ist ein W3C-Standard, der HTML um Rollen, Zustände und Eigenschaften ergänzt. So erfahren Screenreader, was ein Element ist und wie es sich gerade verhält. - **Buchstabe:** A - **Englischer Begriff:** ARIA UX-Glossar · engl. ARIA # ARIA ARIA ist ein W3C-Standard, der HTML um Rollen, Zustände und Eigenschaften ergänzt. So erfahren Screenreader, was ein Element ist und wie es sich gerade verhält. Stell dir vor, ein Team baut für eine Website ein eigenes Ausklappmenü aus einfachen `div`-Elementen. Mit der Maus funktioniert alles. Ein Screenreader liest aber nur „Produkte“ vor, ohne zu sagen, dass es sich um einen Button handelt oder ob das Menü offen ist. Mit der Tastatur lässt es sich gar nicht öffnen. Um solche Lücken zu schließen, gibt es ARIA. Und genau hier passieren auch viele Fehler. ## Einfach erklärt ARIA steht für „Accessible Rich Internet Applications“, offiziell WAI-ARIA. Es ist ein Standard des W3C, also des Gremiums, das Webstandards festlegt. ARIA ergänzt HTML um zusätzliche Attribute, die assistiven Technologien wie einem [Screenreader](https://www.insideuxdesign.com/de/glossar/screenreader) erklären, was ein Element ist und in welchem Zustand es sich befindet. Die aktuelle Empfehlung ist WAI-ARIA 1.2 aus dem Jahr 2023. Ein Vergleich aus dem Alltag: ARIA funktioniert wie ein Etikett auf einer Schachtel. Das Etikett sagt „Werkzeug“, aber es legt kein Werkzeug hinein. Steht auf der Schachtel etwas, das nicht drin ist, wird es für alle, die sich auf das Etikett verlassen, ärgerlich. ## Rollen, Zustände und Eigenschaften ARIA arbeitet mit drei Bausteinen: - **Rollen** sagen, was ein Element ist, etwa `role="dialog"` oder `role="tab"`. - **Zustände** beschreiben, was sich ändern kann, etwa `aria-expanded="true"` für ein geöffnetes Menü. - **Eigenschaften** liefern zusätzliche Informationen, etwa `aria-label` für einen Namen, wenn kein sichtbarer Text vorhanden ist. Wichtig: ARIA verändert nur, was assistive Technik ankündigt. Verhalten oder Tastaturbedienung bringt es nicht mit. Wer einem `div` die Rolle „button“ gibt, muss Fokus und Tastatursteuerung selbst nachbauen. ## Die erste Regel von ARIA Daraus folgt die oft zitierte erste Regel: Wenn es ein natives HTML-Element mit der benötigten Bedeutung und Funktion gibt, nutze es, statt ein anderes Element mit ARIA umzudeuten. Der ARIA Authoring Practices Guide des W3C fasst das sinngemäß so zusammen: Lieber gar kein ARIA als falsches ARIA. Die Auswertung „WebAIM Million“ fand 2026 auf Startseiten mit ARIA im Schnitt mehr erkannte Fehler als auf Seiten ohne, wobei das keinen ursächlichen Zusammenhang beweist. ## Ein Beispiel Ein Beispiel: Das Ausklappmenü aus dem Einstieg bekommt zuerst nur `role="button"`. Der Screenreader sagt jetzt „Button“, aber Enter und Leertaste tun nichts. Die bessere Lösung: Das Team ersetzt das `div` durch ein echtes `button`-Element und ergänzt nur `aria-expanded`, das beim Öffnen auf „true“ wechselt. Fokus und Tastatur funktionieren automatisch, und der Zustand wird korrekt angesagt. ## In der Praxis - **Starte mit nativem HTML.** Buttons, Links, Formularfelder und Überschriften bringen Bedeutung und [Tastaturbedienung](https://www.insideuxdesign.com/de/glossar/tastaturbedienung) schon mit. - **Halte Versprechen ein.** Jede Rolle, die du vergibst, verlangt das passende Verhalten. Ohne Tastatursteuerung ist sie eine falsche Ankündigung. - **Teste mit echter Technik.** Tools wie [axe DevTools](https://www.insideuxdesign.com/de/ressourcen/axe-devtools) finden ungültige Attribute, ein kurzer Test mit einem Screenreader zeigt, wie es sich anhört. Mehr Methoden im Artikel [Accessibility-Prüfung: Werkzeuge und Methoden für UX-Designer](https://www.insideuxdesign.com/de/blog/accessibility-pruefung-werkzeuge-und-methoden-fuer-ux-designer). ## Verwandte Begriffe [Screenreader](https://www.insideuxdesign.com/de/glossar/screenreader), [Barrierefreiheit](https://www.insideuxdesign.com/de/glossar/barrierefreiheit), [WCAG](https://www.insideuxdesign.com/de/glossar/wcag), [Alternativtext](https://www.insideuxdesign.com/de/glossar/alternativtext) ## Quellen - [W3C WAI: WAI-ARIA Overview. W3C, 2025](https://www.w3.org/WAI/standards-guidelines/aria/) - [W3C WAI: ARIA Authoring Practices Guide: Read Me First. W3C, 2026](https://www.w3.org/WAI/ARIA/apg/practices/read-me-first/) - [W3C: Using ARIA (nicht mehr gepflegter Entwurf). W3C, 2026](https://www.w3.org/TR/using-aria/) - [WebAIM: The WebAIM Million: The 2026 report on the accessibility of the top 1,000,000 home pages. WebAIM, 2026](https://webaim.org/projects/million/) ## Weitere Begriffe [ ### A/B-Test Ein A/B-Test ist ein Experiment, bei dem zwei Varianten einer Seite oder eines Elements gleichzeitig an zufällig aufgeteilte Besuchende ausgespielt werden. So entscheidest du anhand echter Daten, welche Variante besser funktioniert. ](https://www.insideuxdesign.com/de/glossar/a-b-test) [ ### Affordance Eine Affordance beschreibt, welche Handlung ein Objekt möglich macht und ob Menschen das erkennen: Ein Button lädt zum Drücken ein, ein Griff zum Ziehen. ](https://www.insideuxdesign.com/de/glossar/affordance) [ ### Alternativtext Ein Alternativtext ist eine kurze Textfassung eines Bildes im HTML-Attribut alt. Screenreader lesen ihn vor, damit Menschen, die das Bild nicht sehen, dieselbe Information bekommen. ](https://www.insideuxdesign.com/de/glossar/alternativtext) [ ### Arbeitsgedächtnis Das Arbeitsgedächtnis hält Informationen für kurze Zeit fest, damit du mit ihnen arbeiten kannst. Es fasst nur wenig, deshalb sollten Interfaces möglichst wenig Merkarbeit verlangen. ](https://www.insideuxdesign.com/de/glossar/arbeitsgedaechtnis) [ ### Atomic Design Atomic Design ist eine Methode, Benutzeroberflächen aus kleinen, wiederverwendbaren Bausteinen aufzubauen: von einzelnen Elementen wie Buttons bis zu ganzen Seiten. ](https://www.insideuxdesign.com/de/glossar/atomic-design) [ ### BFSG Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet seit dem 28. Juni 2025 viele Unternehmen, bestimmte Produkte und digitale Dienstleistungen wie Onlineshops barrierefrei zu gestalten. ](https://www.insideuxdesign.com/de/glossar/bfsg) [ ### Barrierefreiheit Barrierefreiheit bedeutet, dass Websites, Apps und digitale Dokumente so gestaltet sind, dass alle Menschen sie nutzen können, auch mit einer Seh-, Hör-, motorischen oder kognitiven Behinderung. ](https://www.insideuxdesign.com/de/glossar/barrierefreiheit) [ ### Card Sorting Card Sorting ist eine Research-Methode, bei der Menschen Begriffe auf Karten in Gruppen sortieren. So siehst du, wie sie Inhalte gedanklich ordnen, und kannst eine verständliche Navigation planen. ](https://www.insideuxdesign.com/de/glossar/card-sorting) [ ### Cognitive Load Cognitive Load ist die geistige Anstrengung, die nötig ist, um eine Oberfläche zu verstehen und zu bedienen. Je weniger unnötige Denkarbeit ein Design verlangt, desto leichter fällt die eigentliche Aufgabe. ](https://www.insideuxdesign.com/de/glossar/cognitive-load) [ ### Contextual Inquiry Contextual Inquiry ist eine Research-Methode, bei der du Menschen in ihrem echten Arbeitsumfeld beobachtest und befragst. So siehst du, wie sie Aufgaben tatsächlich erledigen, nicht nur, wie sie davon erzählen. ](https://www.insideuxdesign.com/de/glossar/contextual-inquiry) [ ### Conversion Eine Conversion ist eine gewünschte Aktion auf einer Website oder in einer App, etwa ein Kauf oder eine Anmeldung. Die Conversion Rate zeigt, welcher Anteil der Besuche dazu führt. ](https://www.insideuxdesign.com/de/glossar/conversion) [ ### Dark Patterns Dark Patterns sind Gestaltungstricks, die Menschen zu Entscheidungen drängen, die sie eigentlich nicht treffen wollen, etwa versteckte Kündigungen oder vorausgewählte Zusatzoptionen. ](https://www.insideuxdesign.com/de/glossar/dark-patterns)