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 für das zweite <div>-Element deklariert, das button2 enthält. Daher können alle Inhalte in diesem <div>, einschließlich Schaltfläche und Label, weder hervorgehoben noch angeklickt werden.

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 nutzungsfreundliche und zugängliche 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

Bei Elementen wie einer Leiste, die dem DOM Elemente hinzufügen, die für den Nutzer nicht immer sichtbar sind, stellt die Barrierefreiheit häufig ein Problem dar. 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 die einzigen auffindbaren Inhalte erreichbar sind. Das ist hilfreich für:

• Elemente blockieren, z. B. ein modales Dialogfeld, ein Menü zum Fokusübertragen 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)
• Die gesamte UI in einem inkonsistenten Zustand deaktivieren

inert-Elemente visuell anzeigen

Standardmäßig gibt es keinen visuellen Hinweis darauf, dass eine Unterstruktur inaktiv ist. Es empfiehlt sich, 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. 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. Bei Hilfstechnologien werden dadurch auch die Tabulatortaste und die Sichtbarkeit blockiert. Außerdem kann der Browser die Seitensuche und die Textauswahl im Element ignorieren.

Der Standardwert von inert ist false.