aria-disabled

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

Beschreibung

Das aria-disabled Attribut zeigt, wenn es auf true gesetzt ist, an, dass das Element, auf das es angewendet wird, und alle seine fokussierbaren Nachkommen im deaktivierten Zustand sein sollen. Diese Deklaration informiert Menschen, die unterstützende Technologien verwenden, wie Bildschirmlesegeräte, dass solche Elemente nicht bearbeitbar oder anderweitig bedienbar sind.

Im Gegensatz zum HTML-Boolean-Attribut disabled, das ein Formularsteuerelement semantisch als deaktiviert kommuniziert, dessen Styling ändert, um seinen Zustand widerzuspiegeln, und alle Funktionalitäten unterbindet, während der Wert des Elements nicht an der Formularübermittlung teilnehmen kann, wird durch aria-disabled="true" nur semantisch angezeigt, dass diese Elemente deaktiviert sind. Webentwickler müssen manuell sicherstellen, dass solche Elemente ihre Funktionalität verlieren, wenn sie als deaktiviert angezeigt werden.

Beim Deaktivieren nativer HTML-Formularsteuerelemente müssen Entwickler das disabled Attribut angeben, da es standardmäßig alle allgemein erwarteten Funktionen zum Deaktivieren eines Steuerelements bietet. Es kann jedoch Fälle geben, in denen Elemente als deaktiviert angezeigt werden müssen, aber dennoch den Nutzern zur Navigation über die Tab-Taste zur Verfügung stehen müssen. Dadurch kann ihre Auffindbarkeit verbessert werden, da sie nicht aus der Fokusreihenfolge der Webseite entfernt werden, da aria-disabled die Fokussierbarkeit solcher Elemente nicht ändert und die Elemente nicht durch das Standardbrowser-Styling abgedimmt werden, was sie leichter lesbar macht. Einige Beispiele, wo dies nützlich sein könnte, sind:

  • Das Kopfzeilenelement eines nicht zusammenklappbaren Akkordeonelements,
  • Eine Schaltfläche, die in der Fokusreihenfolge der Seite bleiben muss, deren Aktion momentan jedoch nicht verfügbar ist - wie z.B. das Absenden eines Formulars,
  • Vorübergehend inaktive Elemente in einem Menü-Widget, die über die standardmäßige Tastaturnavigation übersprungen würden.

In jedem dieser Fälle möchte man möglicherweise, dass Benutzer diese Elemente über die standardmäßige Tastaturnavigation finden, obwohl die Funktionalität dieser Steuerung 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, 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. Achten Sie darauf, dieses Attribut auf Container-Elementen zu verwenden. Besonders in Fällen, in denen ein Container sowohl Formularsteuerelemente als auch Links enthalten kann - wobei die Absicht darin bestehen könnte, die Formularsteuerelemente als deaktiviert anzuzeigen, aber nicht zu kommunizieren, dass die Links "deaktiviert" sind.

Ein weiterer Grund, das aria-disabled Attribut gegenüber dem HTML-disabled Attribut zu verwenden, ist, wenn Sie benutzerdefinierte Steuerelemente erstellt haben, die als deaktiviert markiert werden müssen, aber kein Element verwenden, das das disabled Attribut zulässt. In folgendem Beispiel wurde ein <div> verwendet, um eine benutzerdefinierte Schaltfläche zu erstellen, die als deaktiviert markiert werden muss. Das <div>-Element erwartet jedoch nicht und beachtet das disabled-Attribut nicht - selbst wenn es eine role="button" erhält, 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 beim Verwenden von JavaScript, um sicherzustellen, dass ein Element mit aria-disabled="true" keine Funktionalität besitzt, müssen auch Stylinganpassungen vorgenommen werden. Im Gegensatz zum HTML-disabled Attribut, bei dem dessen Spezifikation :disabled Benutzeragentenstile angewendet werden, fehlt bei aria-disabled="true" dieser Effekt. 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 ein Formularsteuerelement in der Fokustastennavigationsreihenfolge der Seite zu belassen, insbesondere wenn das Element wichtige Inhalte darstellt, die für alle Benutzer wahrnehmbar sein sollten, dann sollten Sie Styling verwenden, das weiterhin die Anforderungen der Farbkonstrastre erfüllt. Beispielsweise ist eine deaktivierte Schaltfläche/Überschrift, die 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 User Agent einen Modus mit erzwungenen Farben aktiviert hat; wenn dies der Fall ist, werden Text- und Rahmenfarben beide auf die Systemfarbe greyText gesetzt.

Neben dem Verwenden von aria-disabled statt des nativen HTML-Attributs müssen Sie bedenken, dass das ARIA-Attribut eine manuelle Gestaltung erfordert, um das Element als deaktiviert im Windows-Hochkontrastmodus visuell 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, unterbindet 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 Umschalten von aria-disabled="true" auf "false", verwenden Sie JavaScript, um:

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

Wenn Sie nur CSS verwenden, um den deaktivierten Zustand mit einem Attributselektor zu stylen, passt der Selektor nicht mehr, und das Styling für den deaktivierten Zustand wird nicht mehr angewendet.

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 angibt, dass das Element wahrnehmbar, aber deaktiviert ist, sodass es nicht bearbeitbar oder anderweitig bedienbar 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