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

Beschreibung

Dasaria-disabled-Attribut, wenn auftrue gesetzt, zeigt an, dass das Element, auf dem es gesetzt ist, und all seine fokussierbaren Nachkommen in einem deaktivierten Zustand sein sollen. Diese Deklaration informiert Menschen, die unterstützende Technologien wie Bildschirmlesegeräte verwenden, dass solche Elemente nicht bearbeitbar oder anderweitig bedienbar sind.

Anders als das HTML-Boolean-Attributdisabled, das ein Formularelement als semantisch deaktiviert kommuniziert, seine Gestaltung so ändert, dass sein Zustand erkennbar ist, und alle Funktionen unterdrückt, inklusive der Teilnahme des Elementwerts an der Formularübermittlung, wird mitaria-disabled="true"ausschließlich semantisch dargestellt, dass diese Elemente deaktiviert sind. Webentwickler müssen manuell sicherstellen, dass solche Elemente ihre Funktionalität unterdrückt haben, wenn sie als deaktiviert angezeigt werden.

Wenn native HTML-Formularelemente deaktiviert werden müssen, sollten Entwickler dasdisabled-Attribut angeben, da es alle allgemein erwarteten Funktionen zur Deaktivierung eines Steuerelements standardmäßig bietet. Es kann jedoch Fälle geben, in denen Elemente als deaktiviert angezeigt werden müssen, aber für Benutzer, die mit derTab-Taste navigieren, weiterhin zugänglich sein sollen. Dies kann ihre Auffindbarkeit verbessern, da sie nicht aus der Fokusrichtung der Webseite entfernt werden, daaria-disabled nicht die Fokussierbarkeit solcher Elemente ändert, noch werden die Elemente durch die Standardeinstellungen des Browsers optisch abgeschwächt, was sie leichter lesbar macht. Einige Beispiele, bei denen dies nützlich sein kann, sind:

• Das Header-Button-Element, das mit einem nicht zusammenklappbaren Akkordeon-Panel verknüpft ist,
• Ein Button, der in der Fokusrichtung der Seite wichtig bleibt, dessen Aktion derzeit jedoch nicht verfügbar ist - wie das Abschicken eines Formulars,
• Vorübergehend inaktive Elemente in einem Menü-Widget, die andernfalls mit der normalen Tastaturnavigation übersprungen würden.

In jedem dieser Fälle möchte man, dass Benutzer diese Elemente durch die normale Tastatur-Navigation 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 Aussehen des Elements ändern, damit sehende Benutzer wissen, dass es deaktiviert ist.

Ein weiterer Grund, dasaria-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 dasdisabled-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 das<div>-Element nicht dasdisabled-Attribut, noch respektiert es dieses - selbst wenn ihm einrole="button" zugewiesen würde, um seine sichtbare ARIA-Rolle zu ändern. Dasaria-disabled-Attribut ist erforderlich, um solche benutzerdefinierten Steuerungen zu deaktivieren.

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

Ähnlich wie erforderlich ist, JavaScript zu verwenden, um sicherzustellen, dass ein Element mitaria-disabled="true" nicht funktionsfähig ist, wird das Element auch stilmäßige Anpassungen benötigen. Im Gegensatz zum HTML-disabled-Attribut, bei dem das Angeben dieses Attributs:disabled-Benutzeragent-Stile anwendet, tut das Hinzufügen vonaria-disabled="true" dies nicht. Das Element kann mit demAttributselektor[aria-disabled="true"] gestaltet werden.

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

Wenn Sie dasaria-disabled-Attribut gezielt verwenden, um ein Formularelement in der Tastaturfokusrichtung der Seite zu belassen, insbesondere wenn das Element wichtigen Inhalt darstellt, den alle Benutzer wahrnehmen können sollten, dann müssen Sie eventuell Stile verwenden, die dennoch die Anforderungen an den Farbkontrast erfüllen. Zum Beispiel ist eine deaktivierte Schaltfläche/Überschrift, die ein nicht zusammenklappbares Akkordeon-Panel einführt, ein Inhalt, der weiterhin lesbar sein muss.

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

Dieforced-colors-Media-Query erkennt, ob derBenutzeragent einen erzwungenen Farbmodus aktiviert hat; falls ja, werden sowohl die Text- als auch die Randfarben auf dieSystemfarbegreyText gesetzt.

Ein weiterer Punkt, den Sie beachten sollten, wenn Siearia-disabled anstelle des nativen HTML-Attributs verwenden, ist, dass das ARIA-Attribut die notwendige manuelle Gestaltung erfordert, um das Element in Windows High Contrast Mode als deaktiviert visuell zu kommunizieren.

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 vonaria-disabled="true" auf"false", verwenden Sie JavaScript, um:

1. Den Wert auffalse zu schalten (oder das Attribut ganz 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 zur Gestaltung des deaktivierten Zustands mit einem Attributselektor verwendet haben, trifft der Selektor nicht mehr zu und die deaktivierte Gestaltung tritt nicht mehr in Kraft.

Werte

true

Das Element ist deaktiviert

false

Das Element ist nicht deaktiviert

Zugehörige Schnittstellen

Element.ariaDisabled

DieariaDisabled Eigenschaft, Teil derElement Schnittstelle, spiegelt den Wert desaria-disabled-Attributs wider, welches anzeigt, dass das Element wahrnehmbar, aber deaktiviert ist, sodass es nicht bearbeitbar oder anderweitig bedienbar ist.

ElementInternals.ariaDisabled

DieariaDisabled Eigenschaft derElementInternals Schnittstelle spiegelt den Wert desaria-disabled-Attributs wider.

Zugehörige Rollen

Verwendet in Rollen:

• application
• button
• composite
• gridcell
• group
• input
• link
• menuitem
• scrollbar
• separator
• tab

Vererbt in Rollen:

• checkbox
• columnheader
• combobox
• grid
• listbox
• menu
• menubar
• menuitemcheckbox
• menuitemradio
• option
• radio
• radiogroup
• row
• rowheader
• searchbox
• select
• slider
• spinbutton
• switch
• tablist
• textbox
• toolbar
• tree
• treegrid
• treeitem

Spezifikationen

Siehe auch

• Making disabled buttons more inclusive von Sandrina Pereira
• Styling for Windows high contrast with new standards for forced colors
• disabled
• Element.ariaDisabled
• ElementInternals.ariaDisabled
• aria-hidden
• aria-readonly