Nutze das inert Attribut um ungewollte Interaktionen zu verhindern
Beim Webdesign ist es wichtig, den verfügbaren Platz effizient zu nutzen. Ihr wollt den Bildschirm nicht mit zu viel Inhalt überladen. Das ist der Grund für gängige Muster wie einblendbare Untermenüs, ausklappbare Bereiche, Popups oder Dialoge.
Häufig werden diese Elemente als benutzerdefinierte Widgets implementiert. Sie verwenden CSS-Code wie opacity: 0 oder position: absolute; left: -10000px, um den Inhalt nur visuell zu verbergen. Die Nutzer:innen können aber immer noch über die Tastatur oder mit Hilfe von assistiven Technologien auf den Inhalt zugreifen. Was können wir dagegen tun?
Foto: © Roxanne Minnish / pexels.com
Ihr könnt das HTML-Attribut inert verwenden, um jegliche Interaktion mit versteckten Inhalten zu verhindern. Eine Art digitales Faultier, sozusagen. Schauen wir uns das Attribut, das inzwischen von allen wichtigen Browsern unterstützt wird, einmal genauer an.
Wie das inert-Attribut funktioniert
Die inert-Eigenschaft ist ein globales HTML-Attribut, das den Browser anweist, jegliche Benutzerinteraktion mit einem bestimmten Inhaltsbereich zu verhindern. Die HTML-Spezifikation dazu lautet:
The inert attribute is a boolean attribute that indicates, by its presence, that the element and all its flat tree descendants [...] are to be made inert by the user agent.Das bedeutet: Alle Nutzereingabe-Events für das Element und seine Nachkommen werden ignoriert, einschließlich der Fokus-Events und Events von assistiven Technologien.
Ein Beispiel: Ihr platziert ein Registrierungs-Formular außerhalb des Bildschirms und lasst es erst in den sichtbaren Bereich gleiten, wenn eine bestimmte Schaltfläche gedrückt wird. Durch Hinzufügen von inert zum <form>-Element wird sichergestellt, dass Tastatur-Nutzer:innen nicht versehentlich mit dem Formular interagieren, während es sich außerhalb des Bildschirms befindet. Der Inhalt wird auch vor Screenreadern verborgen.
Auch das native <dialog>-Element macht davon Gebrauch. Wenn ihr einen Modaldialog mit .showModal() öffnet, wird der Browser automatisch alle anderen Inhalte inaktiv machen. Mehr Infos liefert mein Blogartikel „Warum du das native Dialog-Element nutzen solltest“.
Beispiel: Animiertes Navigations-Menü
Ich habe eine Demo für ein animiertes Navigationsmenü erstellt. Dort nutze ich das inert-Attribut für die versteckten Untermenüs. Das Ganze funktioniert perfekt für Tastatur- und Screenreader-Nutzer:innen.
Das Navigationsmenü ist als ungeordnete Liste innerhalb eines nav-Elements aufgebaut. Der HTML-Code für einen Menüpunkt und sein verborgenes Untermenü sieht wie folgt aus:
<button type="button" aria-expanded="false" aria-controls="sub_menu_research">
Research
</button>
<div id="sub_menu_research" class="subMenu" inert>
<ul>
<li><a href="/black-holes">Black Holes</a></li>
<li><a href="/climate-change">Climate Change</a></li>
<li><a href="/modern-way-of-work">Modern Way of Work</a></li>
</ul>
</div>
Im CSS-Code referenziere ich auf das inert-Attribut, um das Untermenü auch visuell auszublenden:
.subMenu {
overflow: hidden;
}
.subMenu[inert] > ul {
transform: translateY(-100%);
}
Wenn der Menüpunkt aktiviert wird, wird das inert-Attribut entfernt und das Untermenü eingeblendet:
.subMenu:not([inert]) > ul {
transform: translateY(0);
}
Die Gleit-Animation könnt ihr ziemlich einfach und unkompliziert mit der CSS-Eigenschaft transition erzeugen:
.subMenu > ul {
transition: transform 0.4s ease-in-out;
}
Hier findet ihr den kompletten Quellcode.
Warum nicht mit display: none?
Einige von euch denken jetzt vielleicht: „Warum sollte ich das inert-Attribut verwenden? Ich kann doch einfach alles mit display: none ausblenden!“ Ihr habt Recht. Wenn man die CSS-Eigenschaft display: none auf ein Element anwendet, wird es vom Browser nicht gerendert und wird vor assistiven Technologien verborgen. Der Nachteil: Ihr könnt das Element nicht mehr animieren.
Die Nutzung des inert-Attributs bietet hingegen mehr Flexibilität. Ihr könnt euren Inhalt ein- und ausblenden, von der Seite reingleiten lassen oder jede erdenkliche anspruchsvolle Animation erstellen. Außerdem könnt ihr das Attribut für Inhalte verwenden, die zwar sichtbar sind, mit denen aber nicht interagiert werden soll. Zum Beispiel die teilweise sichtbare, vorherige bzw. nächste Folie in einem Karussell-Widget.
Browser-Unterstützung
Seit Version 112 unterstützt nun auch Firefox endlich das inert-Attribut. Das bedeutet, dass nun alle modernen Browser dieses Feature unterstützen.
Na dann: Los geht's! Lasst uns coole Sachen damit bauen.
Erstellt am