aria-disabled

Der aria-disabled Zustand zeigt an, dass das Element wahrnehmbar, aber deaktiviert ist, sodass es nicht bearbeitet oder anderweitig operabel ist.

Beschreibung

Das aria-disabled Attribut, wenn auf true gesetzt, zeigt an, dass das Element, auf dem es gesetzt ist, und alle seine fokussierbaren Nachkommen im deaktivierten Zustand sein sollen. Diese Deklaration informiert Personen, die unterstützende Technologien nutzen, wie Bildschirmleser, dass solche Elemente nicht bearbeitet oder anderweitig operabel sein sollen.

Im Gegensatz zu HTMLs disabled Boolean-Attribut, das ein Formularelement als semantisch deaktiviert kommuniziert, sein Styling ändert, um seinen Zustand widerzuspiegeln und alle Funktionalität unterdrückt sowie den Wert des Elements von der Formularübermittlung ausschließt, gibt aria-disabled="true" nur diese Elemente semantisch als deaktiviert wieder. Webentwickler müssen manuell sicherstellen, dass solche Elemente ihre Funktionalität unterdrückt haben, wenn sie im deaktivierten Zustand angezeigt werden.

Wenn native HTML-Formularelemente deaktiviert werden müssen, müssen Entwickler das disabled Attribut angeben, da es alle allgemein erwarteten Funktionen des Deaktivierens eines Steuerungselements standardmäßig bereitstellt. Es kann jedoch Fälle geben, in denen Elemente als deaktiviert angezeigt werden sollen, aber immer noch für Benutzer auffindbar sind, wenn sie über die Tab-Taste navigieren. Dies kann ihre Auffindbarkeit verbessern, da sie nicht aus der Fokusreihenfolge der Webseite entfernt werden, da aria-disabled die Fokusfähigkeit solcher Elemente nicht ändert, noch werden die Elemente im Standard-Browserstyling gedimmt, was sie leichter lesbar macht. Einige Beispiele, wo dies nützlich sein könnte, umfassen:

  • Das Header-Button-Element, das mit einem nicht zusammenklappbaren Akkordeon-Panel verknüpft ist,
  • Ein Button, der wichtig ist, in der Fokusreihenfolge der Seite zu bleiben, dessen Aktion aber derzeit nicht verfügbar ist - wie das Einreichen eines Formulars,
  • Temporär inaktive Elemente in einem Menü-Widget, das ansonsten nicht durch Standardtastaturnavigation übersprungen würde.

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

Hinweis: Der deaktivierte Zustand 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, insbesondere, wenn ein Container sowohl Formularelemente als auch Links enthält - wo die Absicht darin besteht, die Formularelemente als im deaktivierten Zustand zu exponieren, aber nicht, um die Links als "deaktiviert" zu kommunizieren.

Ein weiterer Grund, das aria-disabled Attribut über das HTML disabled Attribut zu verwenden, ist, wenn Sie benutzerdefinierte Steuerungen erstellt haben, die als deaktiviert markiert werden müssen, aber kein Element verwenden, das das disabled Attribut erlaubt. Zum Beispiel wurde im folgenden Snippet ein <div> verwendet, um einen benutzerdefinierten Button zu erstellen, der als deaktiviert markiert werden muss. Allerdings erwartet oder respektiert das <div>-Element das disabled Attribut nicht - selbst wenn es mit einem role="button" versehen wird, um seine exponierte ARIA-Rolle zu ändern. Das aria-disabled Attribut ist erforderlich, um solche benutzerdefinierten Steuerungen zu deaktivieren.

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

Ähnlich wie JavaScript benötigt wird, um sicherzustellen, dass ein Element mit aria-disabled="true" nicht funktional ist, benötigen die Elemente auch Stiländerungen. Im Gegensatz zum HTML disabled Attribut, bei dem durch das Angeben Benutzeragent-Stile :disabled angewendet werden, tut dies aria-disabled="true" nicht. Das Element kann mit dem Attributselektor [aria-disabled="true"] formatiert werden.

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

Wenn Sie das aria-disabled Attribut bewusst verwenden, um ein Formularelement in der Tastaturfokusreihenfolge der Seite zu belassen, insbesondere wenn das Element wichtige Inhalte darstellt, die alle Benutzer wahrnehmen können sollten, müssen Sie möglicherweise Stile verwenden, die immer noch den Farbkontrastanforderungen entsprechen. Zum Beispiel ist ein deaktivierter Button/Überschrift, der ein nicht zusammenklappbares Akkordeon-Panel einführt, Inhalt, der lesbar bleiben muss.

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

Die forced-colors Media Query erkennt, ob der Benutzeragent einen erzwungenen Farbmodus aktiviert hat; in diesem Fall werden sowohl die Text- als auch die Rahmenfarben auf die Systemfarbe greyText gesetzt.

Ein weiterer Punkt, den Sie beachten sollten, wenn Sie aria-disabled gegenüber dem nativen HTML-Attribut verwenden, ist, dass das ARIA-Attribut das manuelle Styling erfordert, das notwendig ist, um das Element im Windows High Contrast Mode visuell als deaktiviert zu kommunizieren.

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

js
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 Wechsel von aria-disabled="true" zu "false", verwenden Sie JavaScript, um:

  1. Den Wert auf false umzuschalten (oder das Attribut vollständig zu entfernen),
  2. Das Element zu aktivieren und
  3. Den Benutzer darüber zu informieren, dass die Steuerung jetzt aktiv ist.

Wenn Sie nur CSS verwendeten, um den deaktivierten Zustand mit einem Attributselektor zu gestalten, wird der Selektor nicht mehr übereinstimmen und das deaktivierte Styling 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, spiegelt den Wert des aria-disabled Attributs wider, das anzeigt, dass das Element wahrnehmbar, aber deaktiviert ist, sodass es nicht bearbeitet oder anderweitig operabel ist.

ElementInternals.ariaDisabled

Die ariaDisabled Eigenschaft der ElementInternals Schnittstelle spiegelt den Wert des aria-disabled Attributs wider.

Zugehörige Rollen

Verwendet in Rollen:

Erbt in Rollen:

Spezifikationen

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

Siehe auch