Elemente ausblenden in CSS: `display: none` vs. `visibility: hidden` vs. `opacity: 0`

In CSS gibt es verschiedene Möglichkeiten, ein Element für den Benutzer unsichtbar zu machen. Die drei am häufigsten verwendeten Eigenschaften sind display: none, visibility: hidden und opacity: 0. Obwohl sie optisch ein ähnliches Ergebnis erzielen, unterscheiden sie sich grundlegend in Bezug auf den Dokumentenfluss, die Interaktivität und die Barrierefreiheit (Accessibility).

Diese Anleitung vergleicht die drei Methoden, um Ihnen die Entscheidung für das richtige Werkzeug im jeweiligen Anwendungsfall zu erleichtern.

Die drei Methoden im direkten Vergleich

1. display: none

Diese Eigenschaft entfernt das Element vollständig aus dem visuellen Layout. Es nimmt keinen Platz mehr ein, und nachfolgende Elemente rücken nach, um den freien Platz auszufüllen.

• Interaktivität: Da das Element nicht mehr im Layout existiert, kann der Benutzer nicht darauf klicken, es fokussieren (z.B. per Tab-Taste) oder anderweitig damit interagieren.
• Barrierefreiheit: Elemente mit display: none werden vom Browser komplett aus dem Accessibility Tree (Barrierefreiheits-Baum) entfernt. Screenreader ignorieren diese Elemente und lesen sie nicht vor.
• Animationen: display ist nicht animierbar. Ein Übergang von display: none zu display: block geschieht abrupt.

Anwendungsfall: Tabs oder Akkordeons, bei denen nicht aktive Inhalte komplett ausgeblendet und vor Screenreadern verborgen werden sollen.

2. visibility: hidden

Diese Eigenschaft macht das Element unsichtbar, behält jedoch seinen Platz im Layout bei. Die Box des Elements bleibt als leerer Raum auf der Seite erhalten.

• Interaktivität: Obwohl die Box physisch vorhanden ist, sind alle Interaktionen (Klicks, Hover-Effekte) blockiert. Der Benutzer kann auch nicht mit der Tab-Taste auf darin enthaltene interaktive Elemente (wie Links oder Buttons) springen.
• Barrierefreiheit: Die meisten modernen Screenreader ignorieren Elemente mit visibility: hidden ebenfalls, da sie als unsichtbar markiert sind.
• Animationen: Eingeschränkt animierbar. Sie können eine Transition auf visibility anwenden, diese verhält sich jedoch wie eine diskrete Animation (wechselt am Ende der Transition schlagartig zwischen sichtbar und unsichtbar).

Anwendungsfall: Platzhalter-Layouts, bei denen das Ausblenden eines Elements den Fluss der umgebenden Elemente nicht stören soll.

3. opacity: 0

Diese Eigenschaft macht das Element lediglich vollständig transparent (durchsichtig). Das Element bleibt voll funktionsfähig im Layout erhalten.

• Interaktivität: Dies ist der kritischste Unterschied zu visibility: hidden: Das Element ist weiterhin vollständig interaktiv. Ein Benutzer kann (oft unbeabsichtigt) auf den unsichtbaren Button klicken oder mit der Tab-Taste darauf springen.
• Barrierefreiheit: Da das Element im Layout verbleibt, wird es von Screenreadern vollständig vorgelesen. Dies kann zu Verwirrung führen, wenn ein unsichtbares Element plötzlich vorgelesen wird.
• Animationen: Hervorragend animierbar. Da es sich um einen numerischen Wert handelt, kann die Deckkraft fließend mit CSS-Transitions (z.B. für Fade-In/Fade-Out-Effekte) animiert werden.

Anwendungsfall: Tooltips, Dropdown-Menüs oder Fade-In-Animationen.

Praxis-Tipp: Sicheres Ausblenden für Tastatur-Navigation (A11y)

Wenn Sie eine Animation (z.B. ein weiches Einblenden eines Dropdown-Menüs mit opacity) erstellen möchten, müssen Sie verhindern, dass Benutzer per Tastatur (Tab-Taste) auf das unsichtbare Menü zugreifen können, solange es geschlossen ist.

Die Lösung ist die Kombination von opacity und visibility:

.dropdown-menu {
  /* Im geschlossenen Zustand unsichtbar und nicht fokussierbar */
  opacity: 0;
  visibility: hidden;
  
  /* Weicher Übergang für die Deckkraft */
  transition: 
    opacity 0.3s ease,
    visibility 0.3s; /* Verhindert Fokussierbarkeit erst nach dem Ausblenden */
}

.dropdown-container:hover .dropdown-menu {
  /* Im geöffneten Zustand sichtbar und fokussierbar */
  opacity: 1;
  visibility: visible;
}

Fazit

Wählen Sie die Methode zum Ausblenden basierend auf den Anforderungen Ihres Layouts und der Barrierefreiheit:

• Verwenden Sie display: none, wenn das Element komplett verschwinden soll und für niemanden (auch nicht für Screenreader) zugänglich sein darf.
• Verwenden Sie visibility: hidden, wenn der Platz des Elements erhalten bleiben soll, es aber inaktiv sein muss.
• Verwenden Sie opacity: 0 ausschließlich für visuelle Animationen und kombinieren Sie es für eine korrekte Barrierefreiheit immer mit visibility: hidden im verborgenen Zustand.