aria-disabled

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

Beschreibung

Das aria-disabled Attribut zeigt, wenn es auf true gesetzt ist, an, dass das Element, auf welches es gesetzt ist, und alle seine fokussierbaren Nachfahren als deaktiviert betrachtet werden sollen. Diese Deklaration informiert Personen, die unterstützende Technologien wie Bildschirmleser verwenden, dass solche Elemente nicht bearbeitet oder anderweitig funktionsfähig sein sollen.

Im Gegensatz zu HTMLs disabled Boolesche Attribut, welches ein Formularelement semantisch als deaktiviert kommuniziert, dessen Stil ändert, um seinen Zustand widerzuspiegeln und alle Funktionen unterdrückt, sowie dem Wert des Elements die Teilnahme an der Formularübermittlung verwehrt, exponiert aria-disabled="true" nur semantisch diese Elemente als deaktiviert. Webentwickler müssen manuell sicherstellen, dass solche Elemente ihre Funktion verlieren, wenn sie in den deaktivierten Zustand versetzt 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 Steuerelements standardmäßig bereitstellt. Es kann jedoch Instanzen geben, in denen Elemente als deaktiviert dargestellt werden müssen, aber trotzdem für Benutzer mit der Tab-Taste auffindbar sein sollen. 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 die Elemente durch den Standard-Browserstil abgedunkelt, was sie leichter lesbar machen kann. Einige Beispiele, wo dies nützlich sein kann, sind:

  • Die Kopfzeilentaste, die mit einem nicht einfahrbaren Akkordeon-Panel verbunden ist,
  • Eine Schaltfläche, die es wichtig, in der Fokusreihenfolge der Seite zu behalten, deren Aktion aber derzeit nicht verfügbar ist - wie zum Beispiel das Absenden eines Formulars,
  • Vorübergehend inaktive Elemente in einem Menü-Widget, die ansonsten bei der Standard-Tastaturnavigation übersprungen würden.

In jedem dieser Fälle könnte man wollen, dass Benutzer diese Elemente durch die Standard-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 das Erscheinungsbild des Elements zu ändern, sodass 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 Nachfahren. Seien Sie vorsichtig, wenn Sie dieses Attribut auf Containerelementen verwenden. Besonders in dem Fall, dass ein Container sowohl Formularelemente als auch Links hat - wo die Absicht möglicherweise darin liegt, die Formularelemente als im deaktivierten Zustand darzustellen, aber nicht, die Links als "deaktiviert" zu kommunizieren.

Ein weiterer Grund, das aria-disabled Attribut anstelle des HTML disabled Attributs zu verwenden ist, wenn Sie benutzerdefinierte Steuerungen erstellt haben, die als deaktiviert markiert werden müssen, aber kein Element verwenden, das das disabled Attribut zulässt. Zum Beispiel wurde im folgenden Snippet ein <div> verwendet, um eine benutzerdefinierte Schaltfläche zu erstellen, die als deaktiviert markiert werden muss. Allerdings erwartet oder respektiert das <div>-Element das disabled Attribut nicht - selbst wenn ihm ein role="button" gegeben 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 die Verwendung von JavaScript erforderlich ist, um sicherzustellen, dass ein Element mit aria-disabled="true" nicht funktional ist, sind auch Stiländerungen des Elements erforderlich. Im Gegensatz zum HTML disabled Attribut, bei dem die Angabe dessen :disabled Benutzeragentenstile zur Anwendung bringt, ändert 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 bewusst verwenden, um ein Formularelement in der Tastaturfokusreihenfolge der Seite zu belassen, besonders wenn das Element wichtigen Inhalt darstellt, den alle Benutzer wahrnehmen sollten, müssen Sie möglicherweise Stile verwenden, die weiterhin Farbkontrastanforderungen erfüllen. Zum Beispiel ist eine deaktivierte Schaltfläche/Überschrift, die ein nicht einfahrbares 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 entdeckt, ob der Benutzeragent einen erzwungenen Farbenmodus aktiviert hat; falls ja, werden die Text- und Rahmenfarben beide auf die Systemfarbe greyText gesetzt.

Ein weiterer Punkt, den Sie beachten sollten, wenn Sie aria-disabled anstelle des nativen HTML Attributs verwenden, ist, dass das ARIA Attribut die manuelle Stilisierung erfordert, die notwendig ist, um das Element in 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 die Interaktivität auch 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 Umschalten von aria-disabled="true" zu "false", verwenden Sie JavaScript, um:

  1. Den Wert auf false zu ändern (oder das Attribut ganz zu entfernen),
  2. Das Element zu aktivieren und
  3. Den Benutzer wissen zu lassen, dass die Steuerung 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 der deaktivierte Stil 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, welches anzeigt, dass das Element wahrnehmbar, aber deaktiviert ist, sodass es nicht bearbeitbar oder anderweitig funktionsfähig ist.

ElementInternals.ariaDisabled

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

Zugehörige Rollen

Verwendet in Rollen:

Weitervererbt in Rollen:

Spezifikationen

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

Siehe auch