ARIA: alertdialog-Rolle
Die alertdialog-Rolle sollte bei modalen Alert-Dialogen verwendet werden, die den Arbeitsablauf der Nutzerin oder des Nutzers unterbrechen, um eine wichtige Nachricht zu kommunizieren und eine Antwort zu erfordern.
Beschreibung
Die Rolle alertdialog
wird verwendet, um Nutzerinnen und Nutzer über dringende Informationen zu benachrichtigen, die ihre sofortige Aufmerksamkeit erfordern. Das Einfügen von role="alertdialog"
in das Element, das den Dialog enthält, hilft unterstützenden Technologien, den Inhalt als gruppiert und vom Rest des Seiteninhalts getrennt zu identifizieren. Beispiele sind Fehlermeldungen, die einer Bestätigung bedürfen, und andere Bestätigungshinweise für Aktionen.
Wie der Name impliziert, ist alertdialog
eine Mischung aus den Rollen dialog
und alert
. alertdialog
ist eine Art von dialog
mit ähnlichen Anwendungsfällen wie alert
, aber für Fälle, in denen eine Nutzerantwort erforderlich ist.
Hinweis: Die Rolle alertdialog
sollte nur für Warnmeldungen verwendet werden, die interaktive Steuerungen enthalten. Wenn ein Alarmdialog nur statische Inhalte enthält und keine interaktiven Steuerungen, verwenden Sie stattdessen alert
.
Da es sich um eine Art von Dialog handelt, gelten die Zustände, Eigenschaften und Tastaturfokusanforderungen der Rolle dialog
auch für die Rolle alertdialog
.
Aufgrund seiner dringenden Natur, die den Arbeitsablauf der Benutzer unterbricht, müssen Benachrichtigungsdialoge immer modal sein.
Der Alarmdialog muss mindestens eine fokussierbare Steuerung haben — wie Bestätigen, Schließen und Abbrechen — und der Fokus muss auf diese Steuerung gerichtet werden, wenn der Alarmdialog erscheint. Benachrichtigungsdialoge können zusätzliche interaktive Steuerungen wie Textfelder und Kontrollkästchen haben.
Die Rolle alertdialog
darf nicht als Ersatz für andere Dialoge verwendet werden, einschließlich der keine-Bestätigung-erfordernden alert
-Dialoge (Window.alert()
) und Eingabeaufforderungen (Window.prompt()
).
Nur das Hinzufügen von role="alertdialog"
reicht nicht aus, um einen Alarmdialog barrierefrei zu gestalten. Folgendes muss ebenfalls geschehen:
- Der Alarmdialog muss ordnungsgemäß beschriftet sein.
- Der Tastaturfokus muss korrekt verwaltet werden.
Der alertdialog
muss einen zugänglichen Namen haben, der mit aria-labelledby
oder aria-label
definiert ist. Der Text des Alarmdialogs muss eine zugängliche Beschreibung mithilfe von aria-describedby
haben.
Beispiele
Beispiel 1: Ein einfacher Alarmdialog
<div
role="alertdialog"
aria-labelledby="dialog1Title"
aria-describedby="dialog1Desc">
<div role="document" tabindex="0">
<h2 id="dialog1Title">Your login session is about to expire</h2>
<p id="dialog1Desc">To extend your session, click the OK button</p>
<button>OK</button>
</div>
</div>
Der obige Codeausschnitt zeigt, wie ein Alarmdialog mit nur einer Nachricht und einer OK-Taste ausgezeichnet wird.
Beispiel 2: Bestätigungsdialog mit zwei Optionen
<div
id="alert_dialog"
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 image?</p>
<p>This change can't be undone.</p>
</div>
<ul>
<li>
<button type="button" onclick="closeThis()">No</button>
</li>
<li>
<button
type="button"
aria-controls="form"
id="delete_file_confirm"
onclick="deleteFile()">
Yes
</button>
</li>
</ul>
</div>
Zugehörige WAI-ARIA-Rollen, -Zustände und -Eigenschaften
aria-labelledby
-
Verwenden Sie dieses Attribut, um den alertdialog zu beschriften. Das
aria-labelledby
-Attribut ist in der Regel die ID des Elements, das verwendet wird, um den alertdialog zu betiteln. aria-describedby
-
Verwenden Sie dieses Attribut, um die Beschreibung des Inhalts des Alarmdialogs zu erfassen. Der Wert des
aria-describedby
-Attributs ist in der Regel die ID des Elements, das die Benachrichtigung des Alarmdialogs enthält, normalerweise unmittelbar nach dem Titel.
Spezifikationen
Specification |
---|
Accessible Rich Internet Applications (WAI-ARIA) # alertdialog |
Accessible Rich Internet Applications (WAI-ARIA) # alertdialog |