HTML inert globales Attribut
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2023.
* Some parts of this feature may have varying levels of support.
Das inert-globale Attribut ist ein Boolesches Attribut, das anzeigt, dass das Element und alle seine Nachkommen im flachen Baum inert werden. Das inert-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, Schaltflächen und Formularelemente, da sie nicht den Fokus erhalten oder angeklickt werden können. Das inert-Attribut kann auch zu Elementen hinzugefügt werden, die außerhalb des Bildschirms oder verborgen sein sollen. Ein inertes Element wird zusammen mit seinen Nachkommen aus der Tabulatorreihenfolge und dem Zugänglichkeitsbaum entfernt.
Modale <dialog>e, die mit showModal() generiert wurden, entkommen der Inertheit, was bedeutet, dass sie die Inertheit nicht von ihren Vorfahren erben, aber inert gemacht werden können, indem das inert-Attribut explizit auf ihnen gesetzt wird. Kein anderes Element kann der Inertheit entkommen.
Hinweis:
Während inert ein globales Attribut ist und auf jedes Element angewendet werden kann, wird es in der Regel für Inhaltsbereiche verwendet. Um einzelne Steuerelemente "inert" zu machen, verwenden Sie stattdessen das disabled-Attribut, zusammen mit CSS-:disabled-Stilen.
Inerte HTML-Elemente und ihre Nachkommen im flachen Baum:
- Lösen keine
click-Ereignisse aus, wenn auf sie geklickt wird. - Können nicht fokussiert werden und es können keine
focus-Ereignisse auf sie ausgelöst werden. - Können nicht über die Suchfunktion des Browsers durchsucht werden (keiner ihrer Inhalte wird gefunden/übereinstimmt).
- Erlauben es Benutzern nicht, Text innerhalb ihres Inhalts auszuwählen – ähnlich wie mit der CSS-Eigenschaft
user-select, um die Textauswahl zu deaktivieren. - Können keinen ansonsten bearbeitbaren Inhalt bearbeiten. Dies umfasst beispielsweise die Inhalte textueller
<input>-Felder und Textelemente, die mitcontenteditableausgestattet sind. - Sind für Hilfstechnologien verborgen, da sie aus dem Zugänglichkeitsbaum ausgeschlossen sind.
Die folgenden anderen Funktionen können verwendet werden, um ein Element und seine Nachkommen in einen inert Zustand zu versetzen:
- Die CSS-Eigenschaft
interactivity. - Die
HTMLElement.inert-DOM-Eigenschaft.
Zugänglichkeitsaspekte
Überlegen Sie sorgfältig, welche Auswirkungen die Anwendung des inert-Attributes auf die Zugänglichkeit hat. Standardmäßig gibt es keinen visuellen Weg, um festzustellen, ob ein Element oder sein Unterbaum inert ist. Als Webentwickler liegt es in Ihrer Verantwortung, die aktiven und die inert gezeichneten Inhaltsabschnitte klar zu unterscheiden.
Während Sie visuelle und nicht-visuelle Hinweise auf die Inertheit von Inhalten geben, denken Sie daran, dass das visuelle Ansichtsfenster möglicherweise nur Abschnitte von Inhalten enthält. Benutzer können in einen kleinen Abschnitt von Inhalten eingezoomt sein, oder Benutzer können die Inhalte überhaupt nicht sehen. Wenn inerte Abschnitte nicht offensichtlich inert sind, kann dies zu Frustration und schlechter Benutzererfahrung führen.
Beispiele
In diesem Beispiel wird der zweite <div> und alle seine Nachkommen durch das inert-Attribut inert gemacht:
<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>
Spezifikationen
| Specification |
|---|
| HTML # the-inert-attribute |
Browser-Kompatibilität
Loading…
Siehe auch
- HTML
<dialog>-Element HTMLElement.inertDOM-Eigenschaft- CSS
interactivity-Eigenschaft