Das inert-Attribut ist ein globales HTML-Attribut, das das Entfernen und Wiederherstellen von Nutzereingabeereignissen für ein Element vereinfacht, einschließlich Fokusereignisse und Ereignisse aus Hilfstechnologien.
„Inert“ ist eine Standardeinstellung für Dialogelemente, z. B. wenn Sie showModal verwenden, um ein Dialogfeld zu öffnen, in dem Nutzer eine Auswahl treffen und das Dialogfeld dann vom Bildschirm schließen.
Nachdem ein <dialog> geöffnet wurde, wird der Rest der Seite inaktiv. Du kannst zum Beispiel nicht mehr auf Links klicken oder die Tabulatortaste drücken.
Mit dem Attribut inert können Sie dasselbe Verhalten bei anderen Elementen erzielen.
Inert bedeutet, dass es nicht möglich ist, sich zu bewegen. Wenn Sie also ein inaktives Element markieren, entfernen Sie die Bewegung oder Interaktion von diesen DOM-Elementen.
<div>
<label for="button1">Button 1</label>
<button id="button1">I am not inert</button>
</div>
<div inert>
<label for="button2">Button 2</label>
<button id="button2">I am inert</button>
</div>
Hier wurde inert im zweiten <div>-Element deklariert, das button2 enthält. Daher können alle in <div> enthaltenen Inhalte, einschließlich Schaltfläche und Label, nicht hervorgehoben werden und nicht angeklickt werden.
Das Attribut inert ist besonders nützlich für die Barrierefreiheit, insbesondere um zu verhindern, dass der Fokus gedeckt wird.
Bessere Barrierefreiheit
Die Richtlinien für barrierefreie Webinhalte erfordern eine Fokusverwaltung und eine sinnvolle, nutzbare Fokusreihenfolge. Dazu gehören sowohl Auffindbarkeit als auch Interaktivität. Bisher konnte die Sichtbarkeit mit aria-hidden="true" unterdrückt werden. Interaktivität ist jedoch schwieriger.
Mit inert haben Entwickler die Möglichkeit, ein Element aus der Tab-Reihenfolge und aus dem Baum für Bedienungshilfen zu entfernen. Auf diese Weise können Sie sowohl die Sichtbarkeit als auch die Interaktivität steuern und benutzerfreundlichere und zugänglichere Muster erstellen.
Es gibt zwei Hauptanwendungsfälle für die Anwendung von inert auf ein Element, um die Zugänglichkeit zu verbessern:
- Wenn ein Element Teil des DOM-Baums ist, aber nicht auf dem Bildschirm sichtbar ist oder ausgeblendet ist
- Wenn ein Element Teil des DOM-Baums ist, aber nicht interaktiv sein sollte
Nicht sichtbare oder ausgeblendete DOM-Elemente
Ein häufiges Problem der Barrierefreiheit betrifft Elemente wie eine Leiste, über die dem DOM Elemente hinzugefügt werden, die für den Nutzer nicht immer sichtbar sind.
Mit inert kannst du dafür sorgen, dass Tastatur-Unterelemente nicht versehentlich mit ihnen interagieren können, obwohl sie nicht auf dem Bildschirm sichtbar sind.
Nicht interaktive DOM-Elemente
Ein weiteres häufiges Problem der Barrierefreiheit besteht darin, dass ein UI-Design zwar sichtbar oder teilweise sichtbar, aber eindeutig nicht interaktiv ist. Dies kann beispielsweise beim Laden der Seite, beim Senden eines Formulars oder wenn ein Dialogfeld-Overlay geöffnet sein.
Für eine optimale Nutzererfahrung sollten Sie den Status der Benutzeroberfläche angeben und den Fokus auf den interaktiven Teil der Seite verschieben.
Fokussieren
Focus Trapping ist ein zentrales Konzept für gute Barrierefreiheit der Benutzeroberfläche. Der Fokus des Screenreaders sollte auf interaktiven UI-Elementen liegen und erkennen, wenn ein Element die Interaktivität blockiert. Außerdem wird so verhindert, dass böswillige Screenreader hinter einem Seiten-Overlay greifen oder versehentlich ein Formular senden, während die erste Einreichung noch verarbeitet wird.
Mit inert können Sie dafür sorgen, dass nur sichtbare Inhalte erreichbar sind. Das ist hilfreich für:
- Blockieren von Elementen wie einem modalen Dialogfeld, einem Fokusklappenmenü oder einer seitlichen Navigationsleiste
- Ein Karussell mit nicht aktiven Elementen.
- Nicht anwendbarer Formularinhalt (z. B. Ausblenden und Deaktivieren der Felder „Versandadresse“, wenn das Kästchen „Gleich wie Rechnungsadresse“ ausgewählt ist).
- Die gesamte Benutzeroberfläche in einem inkonsistenten Zustand deaktivieren
inert-Elemente visuell darstellen
Standardmäßig wird nicht visuell angezeigt, dass eine Unterstruktur inaktiv ist. Es wird empfohlen, deutlich zu kennzeichnen, welche Teile des DOMs aktiv und welche inaktiv sind.
[inert], [inert] * {
opacity: 0.5;
pointer-events: none;
cursor: default;
user-select: none;
}
Nicht alle Nutzer können alle Teile einer Seite gleichzeitig sehen. Beispielsweise können Nutzende von Screenreadern, kleinen Geräten oder mit Lupen und sogar Nutzer, die nur besonders kleine Fenster verwenden, den aktiven Teil einer Seite möglicherweise nicht sehen und sind frustriert, wenn inere Abschnitte nicht offensichtlich träg sind. Bei einzelnen Steuerelementen ist das deaktivierte Attribut wahrscheinlich besser geeignet.
Welche Interaktionen und Bewegungen werden blockiert?
Standardmäßig werden durch inert Fokus- und Klickereignisse blockiert. Bei assistiven Technologien werden dadurch auch die Registerkarten und die Auffindbarkeit blockiert. Möglicherweise ignoriert der Browser auch die Seitensuche und die Textauswahl im Element.
Der Standardwert von inert ist false.