Zustand Globaler Zustand

`aria-disabled`

Zeigt an, dass ein Steuerelement wahrnehmbar und fokussierbar ist, aber nicht auf Benutzereingaben reagiert. Das native HTML-Attribut disabled sollte bevorzugt werden; aria-disabled empfiehlt sich, wenn das Element fokussierbar bleiben oder ein Tooltip anzeigen soll.

Verwendung

Wenn ein Button, Link, Eingabefeld oder zusammengesetztes Widget aktuell nicht bedienbar ist, aber dennoch in der Tab-Reihenfolge erscheinen soll, damit Nutzende es entdecken und den Grund für die Deaktivierung erfahren können. Dazu wird aria-disabled="true" gesetzt und das Element visuell so gestaltet, dass der deaktivierte Zustand eindeutig erkennbar ist.

Im Vergleich zu verwandten Attributen:

HTML disabled (auf <button>, <input>, <select>, <textarea>, <fieldset>) — entfernt das Steuerelement vollständig aus der Tab-Reihenfolge, ignoriert Klicks und verhindert die Übermittlung des Werts. Dieses Attribut sollte verwendet werden, wenn keine Interaktion mit dem Steuerelement sinnvoll ist.
aria-disabled="true" — der Screenreader kündigt „deaktiviert“ / „nicht verfügbar“ an, das Element bleibt jedoch fokussierbar. Der Klick-Handler muss zusätzlich manuell blockiert werden. Dieses Attribut eignet sich für Custom-Widgets, für <a>-Tags (die kein disabled akzeptieren) oder wenn der deaktivierte Zustand einen erklärenden Tooltip benötigt.
aria-readonly — der Wert kann nicht geändert werden, das Steuerelement ist jedoch weiterhin bedienbar und fokussierbar. Die Nutzenden können ihn kopieren, und das Formular übermittelt ihn weiterhin.
aria-hidden — entfernt das Element vollständig aus dem Accessibility-Tree. Anderes Ziel: verborgen, nicht deaktiviert.

Synchronisation

Gültige Werte sind "true" und "false". Bei aktiviertem Steuerelement empfiehlt sich "false" oder das Weglassen des Attributs — es ist nicht notwendig, aria-disabled="false" auf jedem aktiven Steuerelement zu rendern.

Bei aria-disabled="true":

Den Klick-Handler blockieren. Das Attribut blockiert Ereignisse nicht selbst.
Die Standard-Tastaturaktivierung (Enter, Space) verhindern.
Den deaktivierten Zustand visuell klar kennzeichnen; dabei prüfen, ob er noch WCAG 1.4.11 (Nicht-Text-Kontrast) erfüllt — die deaktivierte Darstellung ist ausdrücklich ausgenommen, ein klarer visueller Hinweis ist jedoch weiterhin empfehlenswert.

Häufige Fehler

aria-disabled="true" verwenden, ohne den Klick-Handler zu blockieren — das Element wirkt deaktiviert, löst aber seine Aktion weiterhin aus.
disabled und aria-disabled auf demselben Element kombinieren: Das native Attribut gibt den Zustand bereits bekannt; die Dopplung ist redundant.
aria-disabled auf <a> verwenden, ohne href zu entfernen oder das Standardverhalten zu verhindern — der Link navigiert weiterhin.
Steuerelemente deaktivieren, ohne den Grund zu erklären: WCAG 3.3.1 erwartet eine Fehlermeldung oder Anweisung.
aria-disabled mit aria-hidden verwechseln: Deaktivierte Elemente bleiben im Accessibility-Tree; verborgene Elemente verschwinden daraus.

Beispiel

<button type="submit" aria-disabled="true" aria-describedby="submit-help">
  Submit order
</button>
<p id="submit-help">Add at least one item to your cart to enable submit.</p>