aria-modal

Ein Abschnitt von Inhalten ist "modal", wenn die Navigation auf den Bereich selbst beschränkt ist und der Hintergrund (die Vorfahren und Geschwister des Modals) verborgen ist. Durch das Setzen von aria-modal="true" auf dialog und alertdialog Rolle Containern wird Benutzern von unterstützender Technologie das Vorhandensein eines "modalen" Elements angezeigt, aber es bewirkt nicht tatsächlich, dass das Element modal wird. Die Funktionen, die das Element tatsächlich modal machen, müssen vom Entwickler implementiert werden.

Relevant nur auf dialog und alertdialog Containern, signalisiert das Setzen von aria-modal="true" unterstützenden Technologien, dass dem Benutzer mitgeteilt wird, dass die Möglichkeit, mit anderen Inhalten auf der Seite zu interagieren oder darauf zuzugreifen, erfordert, dass der modale Dialog geschlossen oder anderweitig der Fokus verloren wird.

Modale Dialoge sind, wenn Inhalte angezeigt werden und die Interaktion des Benutzers auf nur diesen Bereich beschränkt ist, bis er geschlossen wird.

Beim Erstellen modaler Dialoge teilt aria-modal="true" unterstützenden Technologien mit, dass die Fenster unter dem aktuellen Dialog nicht Teil des modalen Inhalts sind.

Wenn ein modales Element angezeigt wird, sollte der Fokus auf das Modal gerichtet werden. Der Fokus muss im Modal "eingeschlossen" bleiben, wenn es sichtbar ist, bis es geschlossen wird. Unterstützende Technologie (AT) kann dann den Inhalt des Modals navigieren und den Umfang des Modalinhalts verstehen. Das aria-modal Attribut hilft AT, die Grenzen des Modals zu kommunizieren und es von den übrigen Inhalten der Seite zu unterscheiden. Wenn es geschlossen wird, sollte der Fokus auf das Element zurückkehren, das das Modal ausgelöst hat.

Stellen Sie sicher, dass das Modal nur mit seinen abgeleiteten Elementen steuerbar ist. Wenn ein modaler Dialog eine Schaltfläche zum Schließen hat, sollte die Schaltfläche ein Nachkomme sein, der im Modalkontainer im DOM enthalten ist.

Wenn ein modales Element angezeigt wird, sollten Autoren alle anderen Inhalte als inaktiv markieren (wie "inaktive Teilbäume" in HTML). Deaktivierter Inhalt ist kein inaktiver Inhalt. Inaktiver Inhalt kann sowohl mit normalen als auch spezialisierten Browsing-Modi wie Caret-Browsing nicht interagiert werden, die es einem Benutzer von unterstützender Technologie ermöglichen, eine Seite im Detail zu erkunden. Dies schließt deaktivierte Inhalte ein, deren Inhalte möglicherweise Bedeutung vermitteln.

Das inert Attribut ist ein boolesches Attribut, das durch seine Anwesenheit anzeigt, dass das Element und alle seine Schatten-Nachkommen inaktiv gemacht werden sollen. Bis HTMLElement.inert vollständig unterstützt wird, kann der Inhalt mit JavaScript inaktiv gemacht werden.

Das Einschließen von aria-modal="true" in einem dialog oder alertdialog entfernt die Anforderung, aria-hidden auf Hintergrundinhalte zu setzen, da aria-modal unterstützenden Technologien mitteilt, dass Inhalte außerhalb eines Dialogs inaktiv sind. Beachten Sie, dass, obwohl die Unterstützung für das <dialog> Element gut ist, gründliches Testen Ihrer Implementierung von entscheidender Bedeutung ist.

Wenn ein Dialog nicht modal ist—es gibt keinen inaktiven Hintergrund und der Fokus ist nicht auf den Dialog beschränkt—sollten Sie entweder aria-modal="false" einschließen oder das Attribut ganz weglassen.

<div id="backdrop" class="no-scroll">
  <div
    role="alertdialog"
    aria-modal="true"
    aria-labelledby="dialog_label"
    aria-describedby="dialog_desc">
    <h2 id="dialog_label">Confirmation</h2>
    <div id="dialog_desc">
      <p>Are you sure you want to delete this file?</p>
    </div>
    <button type="button" onclick="closeDialog(this)">
      No. Close this popup.
    </button>
    <button type="button" onclick="deleteFile(this)">
      Yes. Delete the file.
    </button>
  </div>
</div>

Dieses teilweise Beispiel enthält ein alertdialog, das in einen Vollbild-, nicht scrollbaren Hintergrund eingebettet ist.

Die role="alertdialog" identifiziert das Element, das als der Container für das Alert-Dialog dient. Das aria-labelledby gibt dem Alert-Dialog einen zugänglichen Namen, indem es auf das Element verweist, das den Titel des Alert-Dialogs liefert. Das aria-describedby Attribut gibt dem Alert-Dialog eine zugängliche Beschreibung, indem es auf den Inhalt des Alert-Dialogs verweist, der die Hauptbotschaft oder den Zweck des Alert-Dialogs beschreibt.

Das aria-modal="true" informiert den Benutzer unterstützender Technologie darüber, dass der Inhalt unter dem Dialog nicht interaktiv ist, solange das Element mit der Deklaration role="alertdialog" den Fokus hat.

Das aria-modal Attribut macht unterstützenden Technologien das Vorhandensein des Modals zugänglich, sodass die Deaktivierung des Inhalts hinter dem Modal AT-Nutzern mitgeteilt werden kann. Wie alle ARIA-Attribute hat aria-modal selbst keinen Einfluss auf die Funktionalität der Seite; das Fokus-Management und die Deaktivierung, Interaktivität auf Hintergrundelementen und die Fähigkeit, den Fokus vom Alertdialog zu entfernen, müssen alle mit JavaScript verwaltet werden.

false (Standard)

Element ist nicht modal.

true

Element ist modal.

Element.ariaModal

Die ariaModal Eigenschaft, Teil der Element Schnittstelle, spiegelt den Wert des aria-modal Attributs wider.

ElementInternals.ariaModal

Die ariaModal Eigenschaft, Teil der ElementInternals Schnittstelle, spiegelt den Wert des aria-modal Attributs wider.

Verwendet in Rollen:

• window

Vererbt in Rollen:

• alertdialog
• dialog

• HTML <dialog> Element
• alertdialog Rolle
• dialog Rolle
• HTML inert globales Attribut
• HTMLElement API inert Eigenschaft