Inaktiver Hintergrund und aria-modal
Machen Sie den restlichen Seiteninhalt während der Öffnung unerreichbar.
Inaktiver Hintergrund und aria-modal ist eine kostenlose Web Accessibility Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Web Accessibility Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Die Seite dahinter existiert weiterhin
Auch wenn der Fokus festgehalten wird, befindet sich der Inhalt hinter Ihrem Modal weiterhin im DOM. Ein Screenreader kann dorthin gelangen, wenn Sie ihn nicht daran hindern.
Das Attribut inert kennenlernen
Das Attribut inert macht ein Element und alle seine untergeordneten Elemente in einem Schritt nicht fokussierbar und nicht anklickbar und überspringt sie mit unterstützenden Technologien.
<main inert>...page content...</main>Den Hintergrund inaktiv machen
Fügen Sie beim Öffnen des Modals allen Elementen außerhalb des Modals inert hinzu. Damit kann niemand mehr auf die Seite dahinter zugreifen.
pageContent.inert = true;inert beim Schließen entfernen
Entfernen Sie beim Schließen des Modals das Attribut inert, damit die Seite wieder interaktiv wird. Wenn Sie das vergessen, bleibt die Seite eingefroren.
pageContent.inert = false;Das native dialog-Element erledigt das für Sie
Ein natives dialog-Element, das mit showModal() geöffnet wurde, macht den restlichen Seiteninhalt automatisch inaktiv. So erhalten Sie diesen Schutz ohne zusätzlichen Code.
Was aria-modal festlegt
Wenn Sie aria-modal auf true setzen, teilen Sie unterstützenden Technologien mit, dass Inhalte außerhalb dieses Dialogs während seiner Öffnung nicht verfügbar sind.
<div role="dialog" aria-modal="true">...</div>aria-modal ist ein Versprechen, keine Barriere
Achtung: aria-modal informiert nur den Screenreader. Es blockiert weder den Fokus noch Klicks tatsächlich, daher benötigen Sie weiterhin inert.
Beides gemeinsam verwenden
Das robuste Muster kombiniert inert für den Hintergrund mit aria-modal für den Dialog. Das eine setzt die Grenze durch, das andere kündigt sie an.
<div role="dialog" aria-modal="true">
<!-- background gets inert -->Der alte aria-hidden-Trick
Bevor inert umfassend unterstützt wurde, setzten Entwickler aria-hidden auf den Hintergrund. Dadurch wurde der Inhalt vor Screenreadern verborgen, der Tastaturfokus aber nicht blockiert.
Den Dialog niemals selbst ausblenden
Ein klassischer Fehler besteht darin, aria-hidden so umfassend anzuwenden, dass auch der Dialog darunter fällt. Stellen Sie sicher, dass Ihr modal außerhalb des ausgeblendeten Bereichs bleibt.
Im Accessibility Tree überprüfen
Öffnen Sie bei geöffnetem Modal den accessibility tree des Browsers. Prüfen Sie, dass die Seite dahinter daraus verschwunden ist und nur der Dialog verbleibt. ✅
Kurze Überprüfung
Sie fügen aria-modal=true hinzu, überspringen aber inert. Welches Problem bleibt bestehen?
Zusammenfassung: Den Hintergrund abschirmen
Sie haben gelernt, die Seite dahinter mit inert inaktiv zu machen und aria-modal festzulegen. Damit ist das Modal tatsächlich das Einzige, worauf Nutzer zugreifen können. 🎯
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 30
- Lektionen
- 120
Häufig gestellte Fragen
Ist die Lektion „Inaktiver Hintergrund und aria-modal“ kostenlos?
Ja — der vollständige Text von „Inaktiver Hintergrund und aria-modal“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Web Accessibility Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Inaktiver Hintergrund und aria-modal“?
Machen Sie den restlichen Seiteninhalt während der Öffnung unerreichbar. Du übst Web Accessibility Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Web Accessibility Academy zu starten?
Keine Vorkenntnisse erforderlich. Web Accessibility Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Inaktiver Hintergrund und aria-modal“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Web Accessibility Academy-Lektion Code schreiben und ausführen?
Ja. Jede Web Accessibility Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Dialogrollen und das native dialog-Element
- Fokus im Modal einschließen
- Mit Escape schließen und den Fokus wiederherstellen
- Inaktiver Hintergrund und aria-modal