Barrierefreie Dialoge

Beispiele für semantisch korrekte Dialog-Komponenten mit verschiedenen Varianten, Tastatursteuerung und ARIA-Attributen zur Verbesserung der Barrierefreiheit.

Beispiele von Dialog-Elementen

1. Einfacher Dialog (nicht-modal)

Ein einfacher nicht-modaler Dialog erscheint, ohne den Rest der Seite zu blockieren.

Einfacher Dialog

Dies ist ein einfacher, nicht-modaler Dialog. Er blockiert nicht den Zugriff auf die restliche Seite.

2. Modaler Dialog mit Backdrop

Ein modaler Dialog erscheint mit einem abgedunkelten Hintergrund und blockiert die Interaktion mit der restlichen Seite.

3. Formular-Dialog mit Bestätigung

Ein Dialog mit Formularelementen und mehreren Aktionsbuttons.

Formular-Dialog

4. Benachrichtigungs-Dialog

Ein Dialog für wichtige Benachrichtigungen oder Warnungen.

Wichtige Mitteilung

Dies ist eine wichtige Benachrichtigung, die Ihre Aufmerksamkeit erfordert. Der Dialog verwendet das ARIA-Attribut role="alertdialog", um seine Dringlichkeit anzuzeigen.

Semantischer Aufbau

Der semantisch korrekte Aufbau von Dialog-Elementen verbessert die Zugänglichkeit für Screenreader und andere Hilfstechnologien.

Struktur eines modalen Dialogs

<dialog id="exampleDialog" aria-labelledby="dialog-title" aria-describedby="dialog-desc">
    <h3 id="dialog-title">Dialog-Titel</h3>
    <div class="dialog-content">
        <p id="dialog-desc">Inhaltsbeschreibung des Dialogs.</p>
        <!-- Weitere Inhalte -->
    </div>
    <div class="dialog-buttons">
        <button id="cancelButton">Abbrechen</button>
        <button id="confirmButton">Bestätigen</button>
    </div>
</dialog>

Wichtige ARIA-Attribute für Dialoge


dialog#exampleDialog[aria-labelledby=dialog-title][aria-describedby=dialog-desc]
    h3#dialog-title
    div.dialog-content
        p#dialog-desc
    div.dialog-buttons
        button#cancelButton
        button#confirmButton

Unterschied zwischen show() und showModal()

Tastatursteuerung der Dialoge

Allgemeine Tastatursteuerung

Tab
Navigiert zwischen fokussierbaren Elementen innerhalb des Dialogs
Shift + Tab
Rückwärts-Navigation zwischen fokussierbaren Elementen
Escape / ESC
Schließt den modalen Dialog

Bei modalen Dialogen

Tab
Fokus bleibt innerhalb des Dialogs, auch beim Erreichen des letzten fokussierbaren Elements (Fokus-Trap)
Öffnen des Dialogs
Fokus wird automatisch auf das erste fokussierbare Element im Dialog gesetzt
Schließen des Dialogs
Fokus sollte auf das Element zurückkehren, das den Dialog geöffnet hat

Zugänglichkeitshinweise

JavaScript-Implementierung

// Nicht-modaler Dialog
const dialog = document.getElementById("myDialog");
const openDialogButton = document.getElementById("openDialogNonModal");
const closeDialogButton = document.getElementById("closeDialog");

openDialogButton.addEventListener("click", () => {
    dialog.show();
    
    // Fokus auf erstes fokussierbares Element setzen
    const firstFocusable = dialog.querySelector("button, [href], input, select, textarea");
    if (firstFocusable) {
        firstFocusable.focus();
    }
});

closeDialogButton.addEventListener("click", () => {
    dialog.close();
    // Fokus zurück auf den Öffnen-Button setzen
    openDialogButton.focus();
});

// Modaler Dialog
const backdropDialog = document.getElementById("backdropDialog");
const openBackdropDialogButton = document.getElementById("openBackdropDialog");
const closeBackdropDialogButton = document.getElementById("closeBackdropDialog");

openBackdropDialogButton.addEventListener("click", () => {
    backdropDialog.showModal();
    const firstFocusable = backdropDialog.querySelector("button, [href], input, select, textarea");
    if (firstFocusable) {
        firstFocusable.focus();
    }
});

closeBackdropDialogButton.addEventListener("click", () => {
    backdropDialog.close();
    openBackdropDialogButton.focus();
});

Alternativen

Vor- und Nachteile des HTML dialog-Elements

Vorteile

Nachteile