ARIA: aria-disabled Attribut

Der aria-disabled Zustand gibt an, dass das Element wahrnehmbar, aber deaktiviert ist, sodass es nicht bearbeitet oder anderweitig bedient werden kann.

Beschreibung

Das aria-disabled Attribut, wenn auf true gesetzt, gibt an, dass das Element, auf dem es gesetzt ist, sowie alle seine fokussierbaren Nachkommen sich im deaktivierten Zustand befinden sollen. Diese Erklärung informiert Personen, die unterstützende Technologien nutzen, wie Bildschirmlesegeräte, darüber, dass solche Elemente nicht bearbeitet oder anderweitig bedienbar sein sollen.

Im Gegensatz zu HTMLs Boolean-Attribut disabled, welches ein Formularsteuerelement semantisch als deaktiviert kennzeichnet, seinen Stil ändert, um seinen Status widerzuspiegeln, und alle Funktionalitäten unterdrückt sowie den Wert des Elements von der Teilnahme an der Formularübermittlung ausschließt, gibt aria-disabled="true" nur an, dass diese Elemente semantisch als deaktiviert wahrgenommen werden. Webentwickler müssen manuell sicherstellen, dass solche Elemente ihre Funktionalität unterdrückt haben, wenn sie als deaktiviert angezeigt werden.

Wenn HTML-Formularsteuerelemente deaktiviert werden müssen, sollten Entwickler das Attribut disabled angeben, da es standardmäßig alle allgemein erwarteten Funktionen des Deaktivierens eines Steuerelements bietet. Es kann jedoch Fälle geben, in denen Elemente als deaktiviert angezeigt werden müssen, aber für Benutzer weiterhin auffindbar sind, wenn sie mit der Tab-Taste navigieren. Dies kann ihre Auffindbarkeit verbessern, da sie nicht aus der Fokusreihenfolge der Webseite entfernt werden, da aria-disabled die Fokussierbarkeit solcher Elemente nicht ändert, noch werden diese Elemente durch die standardmäßige Browser-Styling-Verdunkelung leichter lesbar gemacht. Einige Beispiele, in denen dies nützlich sein kann, umfassen:

Das Header-Button-Element, das mit einem nicht zusammenklappbaren Akkordeon-Panel verbunden ist,
Ein Button, der in der Fokusreihenfolge der Seite wichtig ist, dessen Aktion jedoch derzeit nicht verfügbar ist - wie z. B. das Absenden eines Formulars,
Vorübergehend inaktive Elemente in einem Menü-Widget, die anderweitig über die standardmäßige Tastaturnavigation übersprungen würden.

In jedem dieser Fälle kann man möchten, dass Benutzer diese Elemente durch die standardmäßige Tastaturnavigation finden, obwohl die Funktionalität dieser Steuerung entfernt oder "deaktiviert" ist. Entwickler müssen dennoch JavaScript verwenden, um die Funktionalität des Elements vollständig zu deaktivieren und gleichzeitig das Erscheinungsbild des Elements zu ändern, damit sehende Benutzer wissen, dass es deaktiviert ist.

Hinweis: Der Zustand des Deaktiviertseins gilt für das Element mit aria-disabled="true" und alle seine fokussierbaren Nachkommen. Seien Sie vorsichtig, wenn Sie dieses Attribut auf Container-Elementen verwenden. Besonders in Fällen, in denen ein Container sowohl Formularsteuerelemente als auch Links enthalten kann - wo die Absicht darin bestehen kann, die Formularsteuerelemente als in einem deaktivierten Zustand anzuzeigen, aber nicht, um die Links als "deaktiviert" zu kennzeichnen.

Ein weiterer Grund, das aria-disabled Attribut gegenüber dem HTML-Attribut disabled zu verwenden, ist, wenn Sie benutzerdefinierte Steuerelemente erstellt haben, die als deaktiviert gekennzeichnet werden müssen, aber kein Element verwenden, das das disabled Attribut zulässt. Zum Beispiel, in dem folgenden Code-Snippet wurde ein <div> verwendet, um eine benutzerdefinierte Schaltfläche zu erstellen, die als deaktiviert gekennzeichnet werden muss. Das <div>-Element erwartet oder respektiert jedoch das Attribut disabled nicht - selbst wenn es mit role="button" ausgestattet wird, um seine exponierte ARIA-Rolle zu ändern. Das aria-disabled Attribut ist erforderlich, um solche benutzerdefinierten Steuerelemente zu deaktivieren.

html

<div role="button" aria-disabled="true" tabindex="-1">Edit</div>

Ähnlich wie das, dass man JavaScript verwenden muss, um sicherzustellen, dass ein Element mit aria-disabled="true" nicht funktionell ist, erfordert das Element auch Stiländerungen. Im Gegensatz zum HTML-Attribut disabled, bei dem die Angabe die :disabled Benutzeragentenstile angewendet werden, tut das Hinzufügen von aria-disabled="true" dies nicht. Das Element kann mit dem Attributselektor [aria-disabled="true"] gestylt werden.

css

[aria-disabled="true"] {
  opacity: 0.5;
}

Wenn Sie das aria-disabled Attribut absichtlich verwenden, um einem Formularsteuerelement zu erlauben, in der Tastaturfokus-Reihenfolge der Seite zu bleiben, insbesondere wenn das Element wichtige Inhalte darstellt, die alle Benutzer wahrnehmen können sollten, dann müssen Sie möglicherweise Stile verwenden, die weiterhin die Anforderungen an den Farbkontrast erfüllen. Beispielsweise ist ein deaktiviertes Button/Überschrift, das ein nicht zusammenklappbares Akkordeon-Panel einführt, ein Inhalt, der weiterhin lesbar sein muss.

css

@media (forced-colors: active) {
  [aria-disabled="true"] {
    border-color: GrayText;
    color: GrayText;
  }
}

Die forced-colors Medienabfrage erkennt, ob der Benutzeragent einen erzwungenen Farbenmodus aktiviert hat; wenn ja, werden sowohl die Text- als auch die Rahmenfarben auf die Systemfarbe greyText gesetzt.

Ein weiterer Aspekt, den man beachten sollte, wenn man aria-disabled anstelle des nativen HTML-Attributs verwendet, ist, dass das ARIA-Attribut die manuelle Stilgestaltung erfordert, die notwendig ist, um das Element visuell als deaktiviert im Windows High Contrast Mode zu kommunizieren.

Hinweis: Wenn Sie CSS's pointer-events: none; verwenden, um ein Element nicht anklickbar zu machen, stellen Sie sicher, dass Sie die Interaktivität auch mit JavaScript deaktivieren. pointer-events: none; verhindert Mausklicks, aber es verhindert nicht, dass das Element über die Tastatur aktiviert wird.

function onClick(event) {
  event.preventDefault();
}

function toggleDisabled(element, status, update) {
  if (status) {
    // element.input.disabled = false;
    element.setAttribute("aria-disabled", "false");
    update.textContent = "The element is now enabled.";
    element.addEventListener("click", onClick);
  } else {
    // element.input.disabled = true;
    element.setAttribute("aria-disabled", "true");
    update.textContent = "The element is now disabled.";
    element.removeEventListener("click", onClick);
  }
}

Beim Umschalten von aria-disabled="true" auf "false", verwenden Sie JavaScript, um:

Den Wert auf false umzuschalten (oder das Attribut vollständig zu entfernen),
Das Element zu aktivieren, und
Dem Benutzer mitzuteilen, dass das Steuerelement jetzt aktiviert ist.

Wenn Sie nur CSS verwendet haben, um den deaktivierten Zustand mit einem Attributselektor zu stylen, wird der Selektor nicht mehr übereinstimmen und das Styling für den deaktivierten Zustand wird nicht mehr wirksam sein.

Werte

true: Das Element ist deaktiviert
false: Das Element ist nicht deaktiviert

Zugehörige Schnittstellen

Element.ariaDisabled: Die ariaDisabled Eigenschaft, Teil der Element Schnittstelle, reflektiert den Wert des aria-disabled Attributs, welches angibt, dass das Element wahrnehmbar, aber deaktiviert ist, sodass es nicht bearbeitet oder anderweitig bedient werden kann.
ElementInternals.ariaDisabled: Die ariaDisabled Eigenschaft der ElementInternals Schnittstelle reflektiert den Wert des aria-disabled Attributs.

Zugehörige Rollen

Verwendet in Rollen:

Vererbt in Rollen:

Spezifikationen

Specification
Accessible Rich Internet Applications (WAI-ARIA) # aria-disabled