HTML Attribut disabled (nicht verfügbar)

Definition und Verwendung

Spezifikation

„Das disabled Attributbewirkt, dass ein Element und allfällige Kindelemente weder fokussiert noch editiert oder anders im Zustand geändert werden können.

(Übersetzung durch Zweiter Blick )

WHATWG | Enabling and disabling form controls: the disabled attribute (abgerufen 06.03.2025)

Verwendungshorizont

Das Attribut kann auf einen Schalter (button), eine Eingabekomponente (input), eine Auswahl (select), ein Textfeld (textarea) oder ein formularbezogenes benutzerdefiniertes Element angewendet werden. Unter bestimmten Umständen kann das Attribut auch auf Kindelemente eines fieldset angewendet werden.

Das Attribut disabled kann hingegen nicht auf Links angewendet werden.

Einsatzszenarien sind beispielsweise:

• In einem Anmeldeformular bleibt der Schalter zum Absenden der Daten so lange nicht verfügbar, bis zu den Datenschutzbestimmungen eine Zustimmung erfolgt ist.
• In einem Dialog für Cookie-Einstellungen können essenzielle Cookies zur Darstellung nicht abgewählt werden.
  

Verwandte Attribute

readonly

Mit dem HTML-Attribut readonly wird ein Element für die Bearbeitung gesperrt. Das Element bleibt dabei grundsätzlich wahrnehmbar.

Im Gegensatz zu Elementen mit dem Attribut disabled bleiben Elemente mit dem Attribut readonly jedoch in der Fokusreihenfolge.

hidden

Mit dem HTML-Attribut hidden wird ein Element gänzlich verborgen. Das Element ist weder am Bildschirm noch durch assistierende Technologien wahrnehmbar.

Im Gegensatz zu Elementen mit dem Attribut hidden sind nicht verfügbare Komponenten am Bildschirm sichtbar und mit Pfeiltasten auch für einen Screen Reader erreichbar.

aria-disabled

Das Attribut aria-disabled informiert über die Unverfügbarkeit eines Steuerelements. Die Wahrnehmbarkeit und Bedienbarkeit des Links wird durch dieses ARIA-Attribut jedoch nicht verändert. Ein Screen Reader fügt der Information über die vorhandene Linkrolle lediglich die Information „nicht verfügbar“ hinzu.

Das Attribut aria-disabled kann im Gegensatz zu HTML disabled auch auf Elemente mit einer expliziten Linkrolle angewendet werden.

W3C | ARIA in HTML #Example 2

aria-hidden

Mit dem ARIA-Attribut aria-hidden wird ein Element lediglich für assistierende Technologien verborgen. Das Element bleibt am Bildschirm wahrnehmbar und bedienbar.

Im Gegensatz zu Elementen mit dem Attribut aria-hidden sind nicht verfügbare Komponenten mit Pfeiltasten auch für einen Screen Reader erreichbar.

Technische Realisierung

HTML Code

Das disabled-Attribut wird einfach in das Steuerelement eingefügt, das als unverfügbar erscheinen soll. Um einen Formularschalter in einem abgestuften Prozess derart zu deaktivieren, kann etwa folgender Code verwendet werden:

<button
   disabled>
   Nächster Schritt
</button>

Visuelle Anforderungen

Im Browser werden nicht verfügbare Komponenten typischerweise ausgegraut dargestellt:

Inaktive Komponenten sind von den Kontrastanforderungen im Erfolgskriterium 1.4.11 Nicht-textueller Kontrast ausgenommen. Damit nicht verfügbare Komponenten visuell minimal lesbar sind, sollten sie jedoch Kontrastanforderungen erfüllen.

Aspekte der Barrierefreiheit

Der aktive und deaktivierte Schalter weisen in folgenden Merkmalen Mindestkontrastanforderungen an Kontraste auf:
(Die folgenden Links führen jeweils zur entsprechenden Kontrastanalyse auf siegemedia.com)

• Schrift und Hintergrund im aktiven Schalter
• Schrift und Hintergrund im nicht verfügbaren Schalter
• Aktive Schrift zu inaktiver Schrift
• Inaktiver Rahmen zum umgebenden Hintergrund

Für die technische Realisierung dieser Darstellung sind folgende CSS-Anweisungen relevant:

button {
  background-color: #19A870;
  color: black;
}
button [disabled] {
  background-color: #D0D0D0;
  color: #59595A;
  border-color: #59595A;
}

Nutzungsfreundlichkeit

Aus der Perspektive der Usability scheinen folgende Überlegungen angemessen:

Wer mit einem Screen Reader arbeitet, erkundet ein Formular vielfach über fokussierbare Elemente, etwa durch Drücken von Tabulator. Es sollte daher nach Möglichkeit das Attribut readonly bevorzugt werden, welches das Element in der Fokusreihenfolge behält.