inert – inaktiver Seitenbereich (Attribut)
<element inert>
Ein ganzer Teil der Seite reagiert nicht mehr: Er lässt sich nicht anklicken, bekommt keinen Fokus, lässt sich nicht markieren und Screenreader überspringen ihn. Die Elemente bleiben aber sichtbar. Praktisch für den Inhalt unter einem ausklappbaren Menü, den Rest der Seite während des Ladens oder einen inaktiven Schritt eines Formulars.
Werte
- Ohne Wert – der Teil ist inaktiv. Es gilt für das Element und alle seine Nachfahren.
- Gilt für: alle Elemente
- In JavaScript:
element.inert
Beispiele
Der Inhalt der Seite ist inaktiv, solange das ausklappbare Menü offen ist:
<nav id="menu" aria-label="Hauptmenü">…</nav>
<main id="content">…</main>
<script>
function openMenu() {
document.getElementById('content').inert = true;
}
function closeMenu() {
document.getElementById('content').inert = false;
}
</script>
Barrierefreiheit
Ein inaktiver Teil sieht genauso aus wie ein aktiver – Benutzer wüssten nicht, warum er nicht reagiert. Geben Sie ihm ein anderes Aussehen ([inert] { opacity: 0.5; }). Ein modales dialog, geöffnet mit showModal(), macht den Rest der Seite von selbst inaktiv; inert ist dafür nicht nötig.
Worauf Sie achten sollten
- Innerhalb von
inertlässt sich nichts wieder aktiv machen – der ganze Teilbaum ist inaktiv. - Inhalt auszublenden ist eine Aufgabe für
hidden;inertlässt den Inhalt sichtbar.
Browserunterstützung
Baseline – weithin verfügbar: in allen gängigen Browsern seit April 2023, gilt als weithin verfügbar seit Oktober 2025. Ab Version: Chrome 102, Firefox 112, Safari 15.5. Stand: Oktober 2026 (MDN browser-compat-data).
Siehe auch:
dialog – Dialogfenster
hidden – verborgenes Element (Attribut)
tabindex – Fokusreihenfolge (Attribut)
aria-* – Barrierefreiheitsattribute