HTMLElement.inert — Eigenschaft · JavaScript-Referenz

Signatur

HTMLElement.inert

Beschreibung

Die Eigenschaft inert liest und setzt das gleichnamige boolesche HTML-Attribut. Ist sie true, wird das Element mit seinem gesamten Teilbaum inaktiv (inert): Es löst keine Klick- oder Zeiger-Ereignisse aus, kann den Fokus nicht erhalten (auch nicht per Tabulator), sein Text lässt sich nicht markieren, die Suche im Browser (Strg+F) findet ihn nicht, und er wird aus dem Barrierefreiheitsbaum entfernt.

Typische Einsatzfälle sind eigene Modal-Dialoge, Seitenleisten und Off-Canvas-Menüs: Solange ein Overlay offen ist, setzt man den restlichen Seiteninhalt auf inert und hält so Fokus und Screenreader im Overlay fest, ohne selbst eine Fokusfalle programmieren zu müssen. Außerdem eignet sich die Eigenschaft für Inhalte, die noch geladen werden, oder für Folien eines Karussells, die gerade nicht sichtbar sind.

Wenn man die Eigenschaft setzt, wird das Attribut hinzugefügt (inert="") bzw. entfernt. Umgekehrt ändert sich die Eigenschaft, sobald das Attribut per setAttribute() oder removeAttribute() geändert wird. Die Wirkung gilt für alle Nachfahren. Ein Kindelement lässt sich nicht wieder aktivieren, indem man bei ihm inert = false setzt.

Parameter

Name	Typ	Default	Beschreibung
$value	boolean	false	Nur beim Setzen: `true` fügt das Attribut `inert` hinzu, `false` entfernt es. Andere Werte werden in einen booleschen Wert umgewandelt.

Beispiele

Inaktiv-Zustand lesen und umschalten

const panel = document.createElement('section');
document.body.append(panel);

console.log(panel.inert);               // false
panel.inert = true;
console.log(panel.hasAttribute('inert')); // true
console.log(panel.outerHTML);

panel.inert = false;
console.log(panel.hasAttribute('inert')); // false

false true <section inert=""></section> false

Seiteninhalt hinter einem eigenen Modal sperren

// HTML: <main id="app">…</main> <div id="modal" hidden>…<button id="close">Schließen</button></div>
const app = document.querySelector('#app');
const modal = document.querySelector('#modal');
let lastFocus = null;

const openModal = () => {
  lastFocus = document.activeElement;
  app.inert = true;          // Hintergrund: kein Fokus, keine Klicks, für Screenreader verborgen
  modal.hidden = false;
  modal.querySelector('#close').focus();
};

const closeModal = () => {
  modal.hidden = true;
  app.inert = false;
  lastFocus?.focus();        // Fokus zurückgeben
};

document.querySelector('#close').addEventListener('click', closeModal);

Nicht sichtbare Karussell-Folien deaktivieren

const slides = [...document.querySelectorAll('.carousel .slide')];

const showSlide = (index) => {
  slides.forEach((slide, i) => {
    const active = i === index;
    slide.inert = !active;   // Links/Buttons in ausgeblendeten Folien sind nicht per Tab erreichbar
    slide.classList.toggle('is-active', active);
  });
};

showSlide(0);

Formular während des Absendens sperren

const form = document.querySelector('#order');

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  form.inert = true;
  try {
    await fetch('/api/order', { method: 'POST', body: new FormData(form) });
  } finally {
    form.inert = false;
  }
});

// Wichtig · Fallstricke

Keine optische Änderung: Inaktive Elemente sehen unverändert aus. Man sollte sie selbst kenntlich machen, z. B. mit [inert] { opacity: .5; }. Sonst wirken sie für Nutzer einfach „kaputt“.
Kein Aufheben im Teilbaum: Ein Nachfahre eines inaktiven Elements bleibt auch mit inert = false inaktiv. Den Hintergrund also gezielt sperren und das Modal nicht als Kind des gesperrten Bereichs anlegen.
Nicht die ganze Seite sperren: Wer document.body.inert = true setzt, macht auch das eigene Overlay unbenutzbar.
Fokus: Hat ein Element im gesperrten Bereich gerade den Fokus, verliert es ihn. Setzen Sie den Fokus deshalb bewusst neu.
Natives <dialog>: HTMLDialogElement.showModal() macht den restlichen Inhalt bereits automatisch inaktiv. inert braucht man vor allem bei selbst gebauten Overlays.
Keine Sicherheitsfunktion: Per Skript (z. B. mit element.click()) oder über die Entwicklerwerkzeuge lassen sich Elemente weiterhin bedienen. Serverseitige Prüfungen bleiben nötig.
Kompatibilität: Seit 2023 unterstützen alle modernen Browser die Eigenschaft (Firefox erst ab Version 112). Für ältere Browser gibt es das Polyfill wicg-inert. Zur Erkennung: 'inert' in HTMLElement.prototype.

Siehe auch

HTMLElement.writingSuggestions HTMLElement.dir HTMLElement.innerText HTMLElement.hidden HTMLElement.lang