Aria-disabled ist ein ARIA-Attribut, das angibt, dass ein UI-Element derzeit nicht für Interaktionen zur Verfügung steht. Es ermöglicht Entwicklern explizit anzugeben, dass ein Element inaktiv ist, ohne die DOM-Struktur zu ändern oder gebundene Ereignisse zu entfernen.
Das HTML-Attribut disabled funktioniert auf die gleiche Weise.
Ein Beispiel mit einer Schaltfläche, die vorübergehend inaktiv gesetzt werden soll, ohne die Ereignisbehandler zu entfernen:
<button aria-disabled="true">Senden</button>
Der Button wird angezeigt. Der Benutzer kann sie jedoch nicht anklicken oder den Fokus darauf setzen.
Fügen Sie dem Tag ein aria-disabled-Attribut mit einem der folgenden Werte hinzu:
aria-disabled kann nur für bestimmte Tags und Rollen gesetzt werden:
Für HTML-Tags ist es besser, das Attribut disabled anstelle von aria-disabled zu verwenden, wenn es unterstützt wird.
Für <a>-Elemente, die kein href-Attribut enthalten, kann aria-disabled="true" verwendet werden, um anzuzeigen, dass der Link in seinem aktuellen Zustand nicht funktionsfähig ist. Diese Art von Trick wird für Breadcrumbs verwendet. Auf diese Weise wissen Tastaturbenutzer, wo sie sich befinden, während sie dem Link zur aktuellen Seite nicht folgen können. Zum Beispiel:
<a href="#dogs">Produkte für Hunde</a>
<a
role="link"
aria-disabled="true"
aria-current="page"
>
Produkte für Katzen
</a>
Im Falle eines inaktiven Links ist es besser, kein href zu verwenden, und um zu verhindern, dass der Link seine Rolle verliert, setzen Sie ihn explizit mit dem Attribut role="link".
In diesem Beispiel wird die Schaltfläche inaktiv, wenn sie angeklickt wird, wodurch sich ihr visueller Stil ändert und keine Interaktion mehr möglich ist. Dies kann in Formularen nützlich sein, wenn es wirklich wichtig ist, zu verhindern, dass der Benutzer sofort auf die Schaltfläche "Submit" klickt, wenn nicht alle Felder ausgefüllt sind.
Die Verwendung von aria-disabled unterscheidet sich vom Attribut disabled. Das ARIA-Attribut unterbricht nicht jede Benutzerinteraktion mit dem Element auf Browserebene. Daher ist es wichtig, CSS und JavaScript zu verwenden, um den Status des Elements zu steuern. Nachfolgend ein einfaches Beispiel für die Gestaltung und Steuerung eines Elements mit aria-disabled:
[aria-disabled="true"] {
opacity: 0.7;
cursor: not-allowed;
}
[aria-disabled="true"]:focus {
outline: none;
}
document.querySelectorAll('[aria-disabled="true"]').forEach((element) => {
element.addEventListener('click', (e) => {
// Klicks verhindern
e.preventDefault()
})
})
In Frameworks wie React oder Angular können Sie aria-disabled direkt in Ihren Komponentenansatz integrieren. In einer React-Komponente könnte das zum Beispiel so aussehen:
function SaveButton({ isSaving }) {
return (
<button aria-disabled={isSaving ? 'true' : 'false'}>
{isSaving ? 'Saving...' : 'Save Changes'}
</button>
)
}
Benutzer können sich nicht auf ein deaktiviertes Aria-Element konzentrieren, sich nicht über seine Rolle und seinen Status informieren und keine Daten von ihm kopieren. Dieses Verhalten kann bei vorübergehend inaktiven Elementen auftreten. Zum Beispiel, wenn nicht alle Felder eines Formulars ausgefüllt sind oder eine Aktion ausgeführt wird.
Mit aria-disabled können Sie flexible und barrierefreie Oberflächen erstellen. Denken Sie daran, dass Sie CSS und JavaScript benötigen, um die volle Funktionalität zu erreichen. Dadurch wird die Website nicht nur zugänglicher, sondern auch insgesamt benutzerfreundlicher. Vergessen Sie nicht, die Website mit Screenreadern zu testen. ARIA Markup sollte die Interaktion mit der Schnittstelle für alle Benutzer erleichtern, nicht verkomplizieren.
In der Praxis in einem Fall, in dem man Schaltflächen vorübergehend deaktivieren möchte, bevor alle Daten geladen sind. Dazu kann aria-disabled in Kombination mit visuellen Änderungen und Ereignisblockierung über JavaScript verwendet werden. Dies verbessert nicht nur die Barrierefreiheit, sondern verhindert auch mögliche Benutzerfehler bei der frühen Interaktion mit Elementen.