# ARIA-Attribute

Kategorie: [Agenten & Protokolle](https://seo-geo-glossary.com/de/glossar/kategorie/agenten-protokolle/) › [Agent Readiness & Browser-Agenten](https://seo-geo-glossary.com/de/glossar/kategorie/agenten-protokolle/agent-readiness-browser-agenten/)

**ARIA** (Accessible Rich Internet Applications, genauer WAI-ARIA) ist eine W3C-Spezifikation, die HTML-Elementen zusätzliche Angaben für Hilfstechnologien wie Screenreader mitgibt. Sie definiert dafür Rollen, Zustände und Eigenschaften. Für das Verhalten eines Elements, etwa die Bedienung per Tastatur, bleibt die Entwicklerin selbst zuständig.

## Was umfasst ARIA?

Eine **Rolle** beschreibt, was ein Element ist, zum Beispiel `role="progressbar"`. **Zustände** geben den aktuellen Status an, etwa `aria-checked`, `aria-expanded` oder `aria-pressed`. **Eigenschaften** beschreiben Merkmale eines Elements, darunter `aria-label`, `aria-describedby` und `aria-valuenow`.

MDN nennt als erste Regel von ARIA, ein natives HTML-Element mit der benötigten Semantik zu verwenden, wenn es eines gibt. Ein `<progress>`-Element ist demnach einem `<div>` mit ARIA-Rollen vorzuziehen. ARIA eignet sich vor allem für komplexe JavaScript-Bausteine wie Tabs, Menüs und modale Dialoge.

## Wofür dient aria-label?

Das Attribut `aria-label` gibt einem Element einen zugänglichen Namen, wenn es keinen sichtbaren Text gibt oder der vorhandene Name nicht passt. Typisch sind Schaltflächen, die nur ein Icon zeigen. Gibt es sichtbaren Text, empfiehlt MDN stattdessen `aria-labelledby`, das bei gleichzeitiger Angabe Vorrang hat. Nicht unterstützt wird `aria-label` bei einigen Rollen wie `generic`, `paragraph` oder `presentation`. Der Inhalt ist nur für Hilfstechnologien verfügbar. Wichtige Informationen sollten deshalb auch sichtbar sein.

## Beispiel

```html
<button aria-label="Schließen">
  <svg aria-hidden="true" focusable="false" width="17" height="17">
    <path d="..." />
  </svg>
</button>
```

Das Icon ist per `aria-hidden` ausgeblendet. Als Name der Schaltfläche erscheint „Schließen“.

## Bedeutung für KI-Agenten

Die ARIA-Angaben fließen in den Accessibility Tree des Browsers ein. Dieser Baum dient nicht nur Screenreadern. Playwright MCP von Microsoft liest Seiten laut Projektbeschreibung über den Accessibility Tree statt über Screenshots. Beschriftete, korrekt ausgezeichnete Bedienelemente sind damit auch für solche Werkzeuge leichter zu verstehen (Einschätzung).

## Häufige Fehler

- **ARIA statt eines nativen Elements einsetzen.** Die Spezifikation versteht ARIA als Ergänzung der nativen Semantik. Bietet HTML die gleiche Funktion, soll das HTML-Element verwendet werden.
- **`aria-hidden="true"` auf fokussierbaren Elementen.** MDN warnt davor, auch bei Vorfahren fokussierbarer Elemente, weil das Attribut an Kindelemente vererbt wird.
- **`aria-hidden` zusätzlich zu `display: none` oder `hidden`.** Solche Elemente sind bereits aus dem Accessibility Tree entfernt, das Attribut ist überflüssig.
- **Sichtbare Inhalte per `aria-hidden` ausblenden.** MDN rät dazu nur, wenn gleichwertige Inhalte für Hilfstechnologien erhalten bleiben.

## Häufige Fragen

**Was sind ARIA-Labels?**
Gemeint ist meist das Attribut `aria-label`, das einem Element einen Namen für Hilfstechnologien gibt.

**Wann sollte ich auf ARIA verzichten?**
Wenn ein natives HTML-Element die gewünschte Semantik und das Verhalten schon mitbringt.

## Auf einen Blick

- **Herausgeber:** W3C (Web Accessibility Initiative)
- **Verbindet:** HTML-Elemente mit Hilfstechnologien über Rollen, Zustände und Eigenschaften
- **Version:** WAI-ARIA 1.2
- **Status:** W3C Recommendation vom 06.06.2023
- **Spezifikation:** [WAI-ARIA 1.2](https://www.w3.org/TR/wai-aria-1.2/)

Stand: 8. Oktober 2026

## Verwandte Begriffe

- [Accessibility Tree](https://seo-geo-glossary.com/de/glossar/accessibility-tree/index.md)
- [Barrierefreiheit](https://seo-geo-glossary.com/de/glossar/barrierefreiheit/index.md)
- [Semantisches HTML](https://seo-geo-glossary.com/de/glossar/semantisches-html/index.md)
- [HTML](https://seo-geo-glossary.com/de/glossar/html/index.md)
- [Agentischer Browser](https://seo-geo-glossary.com/de/glossar/agentischer-browser/index.md)

## Quellen

- [ARIA: aria-label-Attribut – MDN Web Docs](https://developer.mozilla.org/de/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label)
- [ARIA – MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)
- [Accessible Rich Internet Applications (WAI-ARIA) 1.2 – W3C](https://www.w3.org/TR/wai-aria-1.2/)
- [Playwright MCP – GitHub (Microsoft)](https://github.com/microsoft/playwright-mcp)
- [aria-hidden – MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-hidden)

---

Stand: 8. Oktober 2026
URL: https://seo-geo-glossary.com/de/glossar/aria-attribute/