ARIA: aria-modal-Attribut

Beschreibung

Ein Inhaltsbereich ist "modal", wenn die Navigation auf den Bereich selbst beschränkt ist und der Hintergrund (die Vorfahren und Geschwister des Modals) ausgeblendet wird. Das Setzen von aria-modal="true" auf dialog- und alertdialog-Rollen -Containern signalisiert den Benutzern von assistiven Technologien das Vorhandensein eines "modales" Elements, macht das Element jedoch nicht tatsächlich modal. Die Funktionen, die das Element tatsächlich modal machen, müssen vom Entwickler implementiert werden.

Relevant nur für dialog- und alertdialog-Container, gibt aria-modal="true" assistiven Technologien vor, den Benutzer darüber zu informieren, dass die Möglichkeit, mit anderen Inhalten auf der Seite zu interagieren oder darauf zuzugreifen, erfordert, dass das Modaldialog geschlossen oder anderweitig der Fokus verloren wird.

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

Bei der Erstellung von modalen Dialogen informiert aria-modal="true" assistive Technologien, dass die Fenster unter dem aktuellen Dialog nicht Teil des modalen Inhalts sind.

Wenn ein modales Element angezeigt wird, sollte der Fokus in das Modal gesetzt werden. Der Fokus muss im Modal "eingefangen" werden, solange es sichtbar ist, bis es geschlossen wird. Assistive Technologien (AT) können dann den Inhalt des Modals durchsuchen und den Umfang des modalen Inhalts verstehen. Das aria-modal-Attribut hilft, den Bereich des Modals zu kommunizieren und es von den restlichen Inhalten der Seite zu unterscheiden. Bei der Entlassung sollte der Fokus auf das Element zurückkehren, das das Modal ausgelöst hat.

Stellen Sie sicher, dass das Modal nur über seine nachgeordneten Elemente kontrollierbar ist. Wenn ein Modaldialog über eine Schaltfläche zum Schließen verfügt, sollte die Schaltfläche ein Nachfahre im DOM-Container des Modals sein.

Wenn ein modales Element angezeigt wird, sollten Autoren alle anderen Inhalte als inert markieren (wie "inaktive Unterbäume" in HTML). Deaktivierter Inhalt ist kein inaktiver Inhalt. Inaktiver Inhalt kann nicht mit normalen und spezialisierten Browsing-Modi interagiert werden, wie z. B. das Caret-Browsing, das es Benutzern assistiver Technologien ermöglicht, eine Seite im Detail zu erkunden. Dies schließt deaktivierte Inhalte ein, deren Inhalt möglicherweise von Bedeutung ist.

Das inert-Attribut ist ein boolesches Attribut, das durch seine Anwesenheit angibt, dass das Element und alle seine schatteneinschließenden Nachkommen inaktiv gemacht werden sollen.

Das Einfügen von aria-modal="true" auf einem dialog- oder alertdialog, entfernt die Anforderung, aria-hidden für Hintergrundinhalte zu setzen, da aria-modal assistiven Technologien mitteilt, dass Inhalte außerhalb eines Dialogs inaktiv sind. Beachten Sie, dass, obwohl die Unterstützung für das <dialog>-Element gut ist, eine gründliche Testung 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 - entweder aria-modal="false" einschließen oder das Attribut ganz weglassen.

Beispiel

<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 id="close-btn" type="button">No. Close this popup.</button>
    <button id="confirm-btn" type="button">Yes. Delete the file.</button>
  </div>
</div>

document.getElementById("close-btn").addEventListener("click", () => {
  closeDialog();
});

document.getElementById("confirm-btn").addEventListener("click", (event) => {
  deleteFile();
});

Dieses Teilsystembeispiel enthält ein alertdialog, das in einem Vollbild, nicht scrollbaren Hintergrund eingebettet ist.

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

Das aria-modal="true" informiert den Benutzer der assistiven Technologie, dass der Inhalt unterhalb des Dialogs nicht interaktiv ist, solange das Element mit einer Erklärung von role="alertdialog" den Fokus hat.

Das aria-modal-Attribut zeigt den Assistive-Technologie-Nutzern das Vorhandensein des Modals an, sodass das Deaktivieren des Inhalts hinter dem Modal an AT-Benutzer kommuniziert werden kann. Wie alle ARIA-Attribute hat aria-modal selbst keine Auswirkung auf die Funktionalität der Seite; die Fokusverwaltung und das Deaktivieren, die Interaktivität auf Hintergrundelementen und die Möglichkeit, den Fokus vom Alertdialog zu entfernen, müssen alle mit JavaScript verwaltet werden.

Werte

false (Standard)

Element ist nicht modal.

true

Element ist modal.

Zugehörige Schnittstellen

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.

Zugehörige Rollen

Verwendet in Rollen:

• window

Erbt in Rollen:

• alertdialog
• dialog

Spezifikationen

Siehe auch

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