Inert-Attribut

Emma Twersky

Das Attribut inert ist ein globales HTML-Attribut, mit dem sich Nutzereingabeereignisse für ein Element einfacher entfernen und wiederherstellen lassen, einschließlich Fokusereignissen und Ereignissen von Hilfstechnologien.

Inert ist das Standardverhalten bei Dialogfeldelementen, z. B. wenn Sie showModal verwenden, um ein Dialogfeld zu öffnen, in dem Nutzer eine Auswahl treffen und es dann vom Bildschirm schließen können. Nachdem eine <dialog> geöffnet wurde, ist der Rest der Seite inaktiv. Sie können beispielsweise nicht mehr auf Links klicken oder mit der Tabulatortaste zu ihnen wechseln.

Mit dem inert-Attribut können Sie dasselbe Verhalten für andere Elemente erzielen.

Inert bedeutet, dass sich etwas nicht bewegen kann. Wenn Sie also etwas als inaktiv 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 kann der Fokus nicht auf alle Inhalte dieses <div> gelegt und nicht darauf geklickt werden, einschließlich der Schaltfläche und des Labels.

Das Attribut inert ist besonders für die Barrierefreiheit nützlich, insbesondere um den Fokus zu binden.

Bessere Barrierefreiheit

Die Web Content Accessibility Guidelines erfordern eine Fokusverwaltung und eine sinnvolle, nutzerfreundliche Fokusreihenfolge. Dazu gehören sowohl Sichtbarkeit als auch Interaktivität. Bisher konnte die Sichtbarkeit mit aria-hidden="true" unterdrückt werden, aber die Interaktivität ist schwieriger.

Mit inert können Entwickler ein Element aus der Tab-Reihenfolge und aus dem Baum für Barrierefreiheit entfernen. So können Sie sowohl die Auffindbarkeit als auch die Interaktivität steuern und nutzerfreundlichere und barrierefreiere Muster erstellen.

Es gibt zwei Hauptanwendungsfälle für die Anwendung von inert auf ein Element, um die Barrierefreiheit zu verbessern:

• Ein Element ist Teil des DOM-Baums, aber außerhalb des Bildschirms oder ausgeblendet.
• Ein Element ist Teil des DOM-Baums, sollte aber nicht interaktiv sein.

Nicht sichtbare oder ausgeblendete DOM-Elemente

Ein häufiges Problem mit der Barrierefreiheit sind Elemente wie eine Ausklappleiste, die dem DOM Elemente hinzufügen, die für den Nutzer nicht immer sichtbar sind. Mit inert können Sie dafür sorgen, dass Nutzer mit Tastatur nicht versehentlich mit den Unterelementen des Auszugs interagieren können, wenn diese nicht auf dem Bildschirm sichtbar sind.

Nicht interaktive DOM-Elemente

Ein weiteres häufiges Problem in Bezug auf Barrierefreiheit ist, wenn ein UI-Design sichtbar oder teilweise sichtbar, aber eindeutig nicht interaktiv ist. Das kann beispielsweise beim Laden der Seite, beim Senden eines Formulars oder wenn ein Dialogfeld geöffnet ist, der Fall sein.

Um Nutzern die bestmögliche Nutzung zu ermöglichen, sollten Sie den Status der Benutzeroberfläche angeben und den Fokus auf den interaktiven Teil der Seite lenken.

Fokus-Trapping

Der Fokus ist ein zentrales Konzept für eine barrierefreie Benutzeroberfläche. Achten Sie darauf, dass der Fokus des Screenreaders auf interaktiven UI-Elementen liegt, und beachten Sie, wenn ein Element die Interaktivität blockiert. So wird auch verhindert, dass bösartige Screenreader hinter ein Seiten-Overlay gelangen oder versehentlich ein Formular einreichen, während die erste Einreichung noch verarbeitet wird.

Mit inert können Sie dafür sorgen, dass nur die auffindbaren Inhalte erreichbar sind. Das ist hilfreich für:

• Blockierende Elemente wie ein modales Dialogfeld, ein Menü mit Fokusfalle oder eine seitliche Navigationsleiste
• Ein Karussell mit inaktiven Elementen.
• Nicht anwendbare Formularinhalte (z. B. Ausblenden und Deaktivieren der Felder „Lieferadresse“, wenn das Kästchen „Mit Rechnungsadresse identisch“ angeklickt ist)
• Deaktivierung der gesamten Benutzeroberfläche bei einem inkonsistenten Status

inert-Elemente visuell anzeigen

Standardmäßig gibt es keine visuellen Hinweise darauf, dass ein untergeordneter Knoten inaktiv ist. Es wird empfohlen, deutlich zu kennzeichnen, welche Teile des DOM 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. Nutzer von Screenreadern, kleinen Geräten oder Lupen sowie Nutzer mit besonders kleinen Fenstern können den aktiven Teil einer Seite beispielsweise nicht sehen und sind möglicherweise frustriert, wenn inaktive Bereiche nicht offensichtlich inaktiv sind. Für einzelne Steuerelemente ist das Attribut „deaktiviert“ wahrscheinlich besser geeignet.

Welche Interaktionen und Bewegungen werden blockiert?

Standardmäßig blockiert inert Fokus- und Klickereignisse. Für Hilfstechnologien werden dadurch auch das Tabben und die Auffindbarkeit blockiert. Außerdem ignoriert der Browser möglicherweise die Seitensuche und die Textauswahl im Element.

Der Standardwert von inert ist false.