Inert-Attribut

Emma Twersky

Das Attribut inert ist ein globales HTML-Attribut, das das Entfernen und Wiederherstellen von Nutzereingabeereignissen für ein Element vereinfacht. Dazu gehören auch Fokusereignisse und Ereignisse aus Hilfstechnologien.

Inaktiv ist ein Standardverhalten bei dialog-Elementen, z. B. wenn Sie mit showModal ein Dialogfeld öffnen, in dem Nutzer eine Auswahl treffen und sie dann vom Bildschirm schließen. Nach dem Öffnen von <dialog> ist der Rest der Seite inaktiv. Sie können beispielsweise nicht mehr auf Links klicken oder mit der Tabulatortaste zu Links navigieren.

Sie können das Attribut inert verwenden, um dasselbe Verhalten für andere Elemente zu erreichen.

Inert bedeutet, dass Sie sich nicht bewegen können. Wenn Sie also etwas Inaktives markieren, entfernen Sie Bewegung oder Interaktion aus 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 dieser <div>, einschließlich der Schaltfläche und des Labels, nicht hervorgehoben oder angeklickt werden.

Das Attribut inert ist besonders nützlich für Barrierefreiheit, um ein Überfangen des Fokus zu vermeiden.

Bessere Zugänglichkeit

Die Richtlinien für barrierefreie Webinhalte erfordern ein Fokusmanagement und eine sinnvolle, nutzungsfreundliche Fokusreihenfolge. Dazu gehören sowohl Auffindbarkeit als auch Interaktivität. Bisher konnte die Sichtbarkeit mit aria-hidden="true" unterdrückt werden, aber die Interaktivität ist schwieriger.

Mit inert haben Entwickler die Möglichkeit, ein Element aus der Tab-Reihenfolge und aus der Baumstruktur für Barrierefreiheit zu 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:

• Wenn ein Element Teil des DOM-Baums ist, aber nicht sichtbar oder verborgen ist.
• Wenn ein Element Teil des DOM-Baums ist, aber nicht interaktiv sein sollte

Nicht sichtbare oder ausgeblendete DOM-Elemente

Ein häufiges Problem bei der Barrierefreiheit sind Elemente wie eine Schublade, die dem DOM Elemente hinzufügen, die für den Nutzer nicht immer sichtbar sind. Mit inert kannst du dafür sorgen, dass ein Tastaturnutzer nicht versehentlich mit den Unterelementen der Leiste interagieren kann, auch wenn sich die Unterelemente der Leiste nicht auf dem Bildschirm befinden.

Nicht interaktive DOM-Elemente

Ein weiteres häufiges Problem hinsichtlich der Barrierefreiheit besteht darin, dass ein UI-Design sichtbar oder teilweise sichtbar, aber eindeutig nicht interaktiv ist. Dies kann z. B. beim Seitenaufbau, beim Senden eines Formulars oder bei geöffneten Dialog-Overlays der Fall sein.

Geben Sie den Status der Benutzeroberfläche und „Trap“ an, um den Nutzern das bestmögliche Erlebnis zu bieten. der Fokus auf den interaktiven Teil der Seite gelegt wird.

Fokusübertragen

Fokusüberdeckung ist ein zentrales Konzept für gute UI-Barrierefreiheit. Sie sollten sicherstellen, dass der Screenreader den Fokus auf interaktiven UI-Elementen liegt und dass Sie wissen, wenn ein Element die Interaktivität blockiert. So wird auch 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 die einzigen auffindbaren Inhalte erreichbar sind. Dies ist hilfreich für:

• Elemente blockieren, z. B. ein modales Dialogfeld, ein Menü zum Fokusübertragen oder eine seitliche Navigationsleiste
• Ein Karussell mit nicht aktiven Elementen.
• Nicht anwendbare Formularinhalte (z. B. das Ausblenden und Deaktivieren der Felder „Versandadresse“, wenn das Kästchen „Gleich wie Rechnungsadresse“ aktiviert ist)
• Die gesamte UI in einem inkonsistenten Zustand deaktivieren

inert-Elemente visuell darstellen

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. Beispielsweise können Nutzende von Screenreadern, kleinen Geräten oder mit Lupen und sogar Nutzern, die nur besonders kleine Fenster verwenden, den aktiven Teil einer Seite nicht sehen. Sie können frustriert sein, wenn inerte Bereiche nicht offensichtlich inaktiv sind. Für eine individuelle Steuerung ist das Attribut „deaktiviert“ vermutlich besser geeignet.

Welche Interaktionen und Bewegungen werden blockiert?

inert blockiert standardmäßig Fokus- und Klickereignisse. Bei Hilfstechnologien werden dadurch auch die Tabulatortaste und die Sichtbarkeit blockiert. Der Browser ignoriert möglicherweise auch die Seitensuche und die Textauswahl im Element.

Der Standardwert von inert ist false.