Ansicht von oben: linke Hand auf der Tastatur, rechte Hand auf dem Touchpad des MacBook

Aria - disabled

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.

Inhaltsverzeichnis:

  1. Beispiel
  2. Wie wird es geschrieben?
  3. Fallstricke und Besonderheiten
  4. Besonderheiten für Links
  5. Demonstration der Arbeit
  6. Verwendung von CSS und JavaScript
  7. Integration mit Frameworks
  8. Was ist darunter zu verstehen?
  9. In der Praxis

Beispiel

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.

Wie wird es geschrieben?

Fügen Sie dem Tag ein aria-disabled-Attribut mit einem der folgenden Werte hinzu:

  • true - das Element ist inaktiv;
  • false (Standardwert) - das Element ist aktiv und es kann mit ihm interagiert werden.

aria-disabled kann nur für bestimmte Tags und Rollen gesetzt werden:

  • <button>, <summary>, <input> mit den Typen Button, Image, Reset, Submit oder für die Button-Rolle;
  • <a> oder link
  • <details>, <fieldset>, <optgroup> oder group;
  • <hr> oder separator;
  • <div>, <span> oder generic;
  • tab;
  • scrollbar;
  • application;
  • gridcell;
  • menuitem

Für HTML-Tags ist es besser, das Attribut disabled anstelle von aria-disabled zu verwenden, wenn es unterstützt wird.

Fallstricke und Besonderheiten

  • inaktive Elternelemente: Wenn ein übergeordnetes Element aria-disabled="true" erhält, werden auch seine untergeordneten Elemente als inaktiv betrachtet;
  • CSS und JavaScript: Um das inaktive Verhalten vollständig zu implementieren, müssen Sie CSS für das Styling und JavaScript für die Zustandsverwaltung verwenden, da aria-disabled die Interaktion mit dem Element nicht von selbst beendet.

Besonderheiten für Links

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".

Demonstration der Arbeit

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.

Verwendung von CSS und JavaScript

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()
  })
})

Integration mit Frameworks

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>
  )
}

Was ist darunter zu verstehen?

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 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.