inert-Attribut
inert ist ein boolesches HTML-Attribut. Wo es gesetzt ist, wird das Element samt allen Nachfahren im Flat Tree träge. Die HTML-Spezifikation zählt auf, was das heißt. Klicks gehen ins Leere, Text lässt sich nicht markieren, editierbare Inhalte nehmen keine Eingabe mehr an, und die Seitensuche des Browsers soll den Bereich überspringen. Fokus bekommen träge Elemente in der Regel nicht, und der Browser meldet sie den Zugänglichkeits-APIs nicht. MDN fasst das für den Accessibility Tree zusammen: Der Bereich fällt aus der Tab-Reihenfolge und aus dem Baum heraus. Denselben Mechanismus nutzt der modale Dialog. dialog.showModal() legt das Element in den Top Layer, alles außerhalb wird träge. Wenn Sie showModal verwenden, setzen Sie inert also nicht selbst. Nach Angaben von MDN ist das Attribut seit April 2023 in den großen Browsern verfügbar. Eine Grenze nennt MDN ausdrücklich: Ein träger Bereich sieht unverändert aus. Sichtbar bleibt er, bedienbar ist er nicht.
In der Praxis
Der übliche Fall ist ein Overlay: ein Off-Canvas-Menü, ein selbst gebautes Dialogfenster oder ein Formularschritt, hinter dem der Rest der Seite stillstehen soll. Sie setzen inert auf den Bereich hinter dem Overlay und nehmen es beim Schließen wieder weg. Zwei Fehler sind häufig. Der erste: inert landet auf einem Container, in dem gerade der Fokus liegt. Der Fokus wandert dann auf den body, und wer mit der Tastatur arbeitet, beginnt beim nächsten Tab wieder ganz oben. Setzen Sie den Fokus deshalb zuerst in das Overlay, dann das Attribut. Der zweite: inert als Ersatz fürs Verbergen. Der Bereich bleibt am Bildschirm, ohne jeden Hinweis, dass er nicht mehr reagiert. Diesen Hinweis zu geben ist Ihre Aufgabe, nicht die des Browsers. Eine Abdunkelung des Hintergrunds genügt meist. Der Gegentest dauert eine Minute: Overlay öffnen, mit Tab durchgehen. Landet der Fokus auf etwas dahinter, greift inert nicht. Danach das Overlay schließen und erneut durchtabben. Fehlt hinter dem Overlay eine Station, die vorher da war, wurde das Attribut nicht wieder entfernt.
← Zurück zum Glossar