Elemente verstecken in HTML: hidden, inert, aria-hidden, disabled

„Verstecken“ auf einer Website ist kein einzelnes, eindeutiges Verhalten. Es beschreibt mehrere verschiedene Zustände: ein Element kann optisch ausgeblendet sein, von der Tastatur-/Fokus-Interaktion ausgeschlossen werden, aus dem Accessibility-Tree für Screenreader entfernt oder bei Formularen so deaktiviert sein, dass sein Wert nicht gesendet wird. HTML-Attribute wie hidden, aria-hidden, inert und disabled adressieren jeweils eine dieser Ebenen (visuelle Darstellung, Assistive Technology, Interaktion, Formularverhalten) und sollten gezielt eingesetzt werden - je nachdem, ob du rein optisch ausblenden willst, Interaktion verhindern oder die Zugänglichkeit beeinflussen musst. In diesem Artikel schauen wir uns an, was jedes Attribut konkret bewirkt, wann es die richtige Wahl ist und worauf du achten solltest, damit Nutzer und Suchmaschinen nicht unbeabsichtigt ausgeschlossen werden.

hidden blendet ein Element vollständig aus und sorgt dafür, dass es im Layout keinen Platz einnimmt. Das Element bleibt im DOM vorhanden, wird aber weder im Browser angezeigt oder ist per Tastatur fokussierbar.

Der hidden-Status zeigt an, dass das Element derzeit für die Seite nicht relevant ist. Oder um Vorlagen für die Wiederverwendung durch andere Teile der Seite zu definieren, und daher nicht direkt dem Benutzer angezeigt werden sollte. Der Browser rendert keine Elemente, die mit hidden gekennzeichnet sind.

Typische Beispiele für hidden-Elemente sind Komponenten, die erst nach der Interaktion durch den Nutzer oder die Nutzerin sichtbar sind, z.B. Hinweise wie Alerts oder Toasts, Komponenten, die erst zu einem späteren Zeitpunkt gebraucht werden, z.B. nach einem Login, oder die als Template dienen und erst später mit Inhalten gefüllt werden. Elemente mit hidden-Status sollten nicht verlinkt werden.

<div class="toast" role="alert" hidden>
  <strong>{{title}}</strong>
  <p>{{message}}</p>
</div>

Das Beispiel zeigt eine Komponente, die Statusmeldungen an den User anzeigt. Die beiden Platzhalter {{title}} und {{message}} werden zur Laufzeit mit Texten ersetzt. Durch das Entfernen des hidden-Attributs wird die Mitteilung schließlich eingeblendet und ist für den Nutzer erreichbar.

Du kannst ein per hidden ausgeblendetes Element über JavaScript wieder einblenden, indem du das Attribut entfernst. Ein reines Überschreiben per CSS reicht nicht aus, wenn das Attribut selbst noch da ist.

Eine häufige Falle entsteht, wenn Entwickler hidden nutzen, obwohl nur ein rein visueller Wechsel über CSS gewünscht ist, was das Debugging erschwert und zu unerwartetem Verhalten führt. Ebenfalls problematisch ist der Einsatz von hidden für Inhalte, die Screenreader erreichen sollen, da das Attribut das Element vollständig aus dem Accessibility-Kontext entfernt.

aria-hidden="true" entfernt ein Element und seine Nachkommen aus dem Accessibility-Tree, sodass Screenreader das Element nicht mehr verarbeiten. Das Attribut ändert bleibt optisch jedoch sichtbar und verändert die visuelle Darstellung nicht.

Wichtig: aria-hidden schließt ein Element nicht von der Tastaturnavigation aus, d.h., wenn ein Element fokussierbar ist (z. B. durch tabindex oder bei Formularelementen), kann es weiterhin per Tastatur erreicht werden. Daher sollte aria-hidden nicht auf interaktive Elemente angewendet werden.

Übliche Einsatzzwecke sind

• Dekorative Icons
• Doppelte Inhalte oder
• Das temporäre Ausblenden von Nebenelementen

Bei Dialogen wird häufig der Hintergrund für Screenreader mit aria-hidden="true" versehen, zusätzlich muss jedoch Fokusmanagement (und idealerweise inert bzw. Entfernen der Fokusierbarkeit) sichergestellt werden, damit User nicht versehentlich in nicht-relevante Bereiche gelangen.

Syntax:

<!-- Font Awesome -->
<i class="fa-solid fa-bars-staggered" aria-hidden="true"></i>

Häufige Fallen: aria-hidden auf einem Eltern-Element, das interaktive Kinder enthält, macht diese für assistive Technologien unerreichbar und führt zu verlorenen Bedienelementen oder Inkonsistenzen zwischen dem, was sichtbar ist, und dem, was assistive Tools wahrnehmen.

inert macht ein Element und seine Nachkommen nicht interaktiv: Elemente können nicht per Tastatur, Mouse oder andere Eingabemedien erreicht oder aktiviert werden; assistive Technologien ignorieren typischerweise den Inhalt.

Praktisch angewendet wird inert oft für Modals, ausgeblendete Untermenüs oder ganze Offcanvas-Navigationen. Sobald ein solches Element angezeigt und erreichbar ist, setzt man den Seiteninhalt außerhalb dessen auf inert, damit die Nutzer nicht versehentlich in den Hintergrund tabben oder mit Elementen interagieren können.

Syntax:

<nav class="offcanvas-menu" inert>
  <ul>
    <li><a href="/">Home page</a></li>
    <li><a href="/products">Products</a></li>
    ...
  </ul>
</nav>

Wichtig: inert versteckt das Element nicht - das Element bleibt im Layout sichtbar, wird aber inaktiv; das unterscheidet es grundlegend von hidden, das ein Element optisch entfernt und aus dem Layout nimmt.

Unterschied zu hidden in Kürze: hidden verbirgt ein Element visuell, entfernt es aus dem Layout und aus dem Accessibility-Tree, während inert die Interaktion weiter zulässt, ohne die Sichtbarkeit zu beeinflussen.

inert ist das richtige Werkzeug, wenn die Sichtbarkeit bleiben, aber die Interaktion abgeschaltet werden soll; hidden ist hingegen die richtige Wahl, wenn ein Element komplett sowohl aus der Darstellung als auch der Bedienung verschwinden soll.

Das HTML-Attribut disabled wird verwendet, um Formularfelder vorübergehend zu deaktivieren. Elemente mit disabled sind weder fokussierbar noch interaktiv und werden beim Absenden des Formulars nicht als Werte übermittelt.

Typische Anwendungsfälle sind Buttons, die erst nach bestimmten Aktionen aktiviert werden sollen, oder Eingabefelder, die nur unter bestimmten Bedingungen bearbeitbar sind.

<input type="text" disabled value="Kann nicht bearbeitet werden">
<button type="submit" disabled>Absenden</button>

User können die Inhalte nicht ändern und assistive Technologien erkennen das Feld als deaktiviert. disabled wirkt ausschließlich auf interaktive Formularelemente wie <input>, <select>, <textarea> oder <button>.

Hinweise & Best-Practices

• Deaktiviere Buttons oder Felder nicht allein visuell über CSS; das Attribut disabled sorgt für die korrekte semantische Bedeutung und Interaktion.
• Verwende alternative Hinweise, wenn ein Feld deaktiviert ist, damit Nutzer und Nutzerinnen verstehen, warum sie es nicht bearbeiten können.
• Denke daran, dass deaktivierte Felder nicht gesendet werden, also müssen serverseitig ggf. Standardwerte berücksichtigt werden.

Zum Abschluss gibt es noch einen kurzen Vergleich aller Möglichkeiten. Für eine bessere Übersicht wurde die CSS-Eigenschaft display: none mit übernommen.

Es gibt verschiedene Methoden, um Elemente auf einer Website zu verstecken oder deren Interaktion gezielt zu steuern; jede Methode wirkt dabei auf unterschiedliche Ebenen wie Layout, Sichtbarkeit, Fokussteuerung oder Barrierefreiheit.

• hidden: Blendet ein Element komplett aus und entfernt es aus dem Layout. Es ist weder sichtbar noch fokussierbar, Screenreader ignorieren es.
• aria-hidden="true": Entfernt ein Element aus dem Accessibility-Tree, ohne es visuell zu verbergen. Es bleibt im Layout sichtbar und kann weiterhin per Maus oder Tastatur fokussierbar sein.
• inert: Deaktiviert Interaktion und Fokus für ein Element und seine Nachkommen, ohne die Sichtbarkeit zu verändern. Wird oft für Menüs genutzt.
• CSS display: none: Verhält sich analog zum hidden-Attribut. Blendet ein Element vollständig aus, nimmt es aus dem Layout und dem Accessibility-Tree. In Kombination mit aria-hidden lässt sich die Barrierefreiheit steuern.

Kurz gesagt: hidden und display:none wirken auf Layout und Sichtbarkeit, aria-hidden und inert auf Interaktion und Accessibility.