ARIA: aria-disabled Attribut - ARIA

Beschreibung

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

Im Gegensatz zum HTML disabled Boolean-Attribut, das ein Formularsteuerelement semantisch als deaktiviert kennzeichnet, dessen Styling ändert, um seinen Zustand widerzuspiegeln, und alle Funktionen unterdrückt sowie den Wert des Elements daran hindert, an der Formularübermittlung teilzunehmen, macht aria-disabled="true" nur diese Elemente semantisch als deaktiviert erkennbar. Webentwickler müssen manuell sicherstellen, dass diese Elemente ihre Funktionalität unterdrücken, wenn sie im deaktivierten Zustand angezeigt werden.

Wenn native HTML-Formularsteuerelemente deaktiviert werden müssen, müssen Entwickler das disabled Attribut angeben, da es standardmäßig alle allgemein erwarteten Funktionen eines deaktivierten Steuerelements bietet. Es kann jedoch Fälle geben, in denen Elemente als deaktiviert angezeigt werden müssen, aber dennoch für Benutzer auffindbar sein sollen, wenn sie über die Tab-Taste navigieren. 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 Standardseitenstile abgedunkelt werden, sodass sie leichter lesbar sind. Einige Beispiele, in denen dies nützlich sein kann, sind:

Das Header-Button-Element, das einem nicht kollabierbaren Akkordeon-Panel zugeordnet ist,
Ein Button, der wichtig ist, in der Fokusreihenfolge der Seite zu bleiben, dessen Aktion derzeit jedoch nicht verfügbar ist - wie das Absenden eines Formulars,
Vorübergehend inaktive Elemente in einem Menü-Widget, die sonst bei der Standardtastaturnavigation übersprungen würden.

In jedem dieser Fälle möchte man, dass Benutzer diese Elemente über die Standardtastaturnavigation finden können, obwohl die Funktionalität dieses Steuerelements entfernt oder "deaktiviert" ist. Entwickler müssen dennoch JavaScript verwenden, um die Funktionalität des Elements vollständig zu deaktivieren, und auch das Erscheinungsbild des Elements ä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 Containerelementen verwenden. Insbesondere in Fällen, in denen ein Container sowohl Formularsteuerelemente als auch Links enthält - wo die Absicht darin bestehen könnte, die Formularsteuerelemente als deaktiviert anzuzeigen, aber nicht die Links als "deaktiviert" zu kommunizieren.

Ein weiterer Grund, das aria-disabled Attribut statt des HTML disabled Attributs 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. Zum Beispiel wurde im folgenden Snippet ein <div> verwendet, um einen benutzerdefinierten Button zu erstellen, der als deaktiviert markiert werden muss. Das <div>-Element erwartet oder respektiert das disabled-Attribut jedoch nicht - selbst wenn ihm ein role="button" gegeben wird, um seine 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 Verwenden von JavaScript, um sicherzustellen, dass ein Element mit aria-disabled="true" nicht funktional ist, sind auch Stiländerungen erforderlich. Im Gegensatz zum HTML disabled Attribut, bei dem die Angabe des Attributs :disabled-Stile von User Agents bereitstellt, ist dies bei aria-disabled="true" nicht der Fall. Das Element kann mit dem Attribut-Selektor [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 Tastaturfokusreihenfolge der Seite zu belassen, insbesondere wenn das Element wichtigen Inhalt darstellt, den alle Benutzer wahrnehmen können sollten, müssen Sie möglicherweise Stile verwenden, die weiterhin die Anforderungen an den Farbkontrast erfüllen. Zum Beispiel ist ein deaktivierter Button/Überschrift, der ein nicht kollabierbares 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 Media Query erkennt, ob der User Agent einen erzwungenen Farbmodus aktiviert hat; wenn ja, werden sowohl die Text- als auch die Randfarben auf die Systemfarbe greyText gesetzt.

Ein weiterer zu berücksichtigender Punkt beim Verwenden von aria-disabled anstelle des nativen HTML-Attributs 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' 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.

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);
  }
}

Wenn Sie von aria-disabled="true" zu "false" wechseln, verwenden Sie JavaScript, um:

Den Wert auf false umzuschalten (oder das Attribut ganz zu entfernen),
Das Element zu aktivieren, und
Dem Benutzer mitzuteilen, dass die Steuerung jetzt aktiviert ist.

Wenn Sie nur CSS verwenden, um den deaktivierten Zustand mithilfe eines Attributselektors 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, spiegelt den Wert des aria-disabled Attributs wider, der anzeigt, 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:

Vererbt in Rollen:

Spezifikationen

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

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden