Dasinertglobale Attribut ist ein boolesches Attribut, welches anzeigt, dass das Element und alle seine flachen Baum-Nachkommeninert werden. Dasinert Attribut kann zu Inhaltsbereichen hinzugefügt werden, die nicht interaktiv sein sollen. Wenn ein Element inert ist, sind es auch alle Nachkommen des Elements, einschließlich normalerweise interaktiver Elemente wie Links, Buttons und Formularelemente, da sie keinen Fokus erhalten oder angeklickt werden können. Dasinert Attribut kann auch zu Elementen hinzugefügt werden, die vom Bildschirm verschwinden oder verborgen sein sollen. Ein inert Element und seine Nachkommen werden aus der Tab-Reihenfolge und dem Zugänglichkeitsbaum entfernt.

Modal-<dialog>e, die mitshowModal() erstellt werden, entgehen der Inertheit, was bedeutet, dass sie die Inertheit nicht von ihren Vorfahren erben, aber zur Inertheit gemacht werden können, indem dasinert Attribut explizit auf ihnen gesetzt wird. Kein anderes Element kann der Inertheit entgehen.

Inerte HTML-Elemente und ihre flachen Baum-Nachkommen:

• Lösen keineclick-Events aus, wenn sie angeklickt werden.
• Können nicht fokussiert werden undfocus-Events können auf ihnen nicht ausgelöst werden.
• Sind nicht über die Suchfunktion der Seite im Browser durchsuchbar (keiner ihrer Inhalte wird gefunden/gepasst).
• Verhindern, dass Nutzer Text innerhalb ihrer Inhalte auswählen können — ähnlich dem Einsatz der CSS-Eigenschaftuser-select, um die Textauswahl zu deaktivieren.
• Können keinen Inhalt bearbeiten, der ansonsten editierbar wäre. Dazu gehören beispielsweise die Inhalte von textuellen<input> Feldern und Textelemente mitcontenteditable.
• Werden vor unterstützenden Technologien versteckt, da sie aus dem Zugänglichkeitsbaum ausgeschlossen sind.

Die folgenden anderen Funktionen können verwendet werden, um ein Element und seine Nachkommen in einen inerten Zustand zu versetzen:

• Die CSS-Eigenschaftinteractivity.
• DieHTMLElement.inert DOM-Eigenschaft.

Barrierefreiheitsbedenken

Wenden Sie dasinert Attribut mit Bedacht im Hinblick auf Barrierefreiheit an. Standardmäßig gibt es keinen visuellen Hinweis darauf, ob ein Element oder sein Teilbaum inert ist oder nicht. Als Webentwickler sind Sie verantwortlich dafür, klar anzuzeigen, welche Inhaltsbereiche aktiv und welche inert sind.

Während Sie visuelle und nicht-visuelle Hinweise zur Inertheit von Inhalten bereitstellen, denken Sie auch daran, dass der visuelle Viewport nur Abschnitte von Inhalten enthalten kann. Nutzer könnten in einen kleinen Abschnitt von Inhalten hereinzoomen oder möglicherweise die Inhalte überhaupt nicht sehen. Dass inerte Abschnitte nicht offensichtlich inert sind, kann zu Frustration und einem schlechten Benutzererlebnis führen.

Beispiele

In diesem Beispiel wird der zweite<div> und alle seine Nachkommen über dasinert Attribut inert gemacht:

<div>  <label for="button1">Button 1</label>  <button>I am not inert</button></div><div inert>  <label for="button2">Button 2</label>  <button>I am inert</button></div>

Spezifikationen

Browser-Kompatibilität

Siehe auch

• HTML-<dialog>-Element
• HTMLElement.inert DOM-Eigenschaft
• CSS-Eigenschaftinteractivity