ARIA: alert-Rolle
Die alert-Rolle ist für wichtige und in der Regel zeitkritische Informationen vorgesehen. Das alert ist eine Art von status, das als atomische Live-Region verarbeitet wird.
Beschreibung
Die alert-Rolle wird verwendet, um dem Benutzer eine wichtige und in der Regel zeitkritische Nachricht zu übermitteln. Wenn diese Rolle einem Element hinzugefügt wird, sendet der Browser ein zugängliches Alert-Ereignis an unterstützende Technologien, die dann den Benutzer benachrichtigen können.
Die Alert-Rolle sollte nur für Informationen verwendet werden, die die sofortige Aufmerksamkeit des Benutzers erfordern, zum Beispiel:
- Ein ungültiger Wert wurde in ein Formularfeld eingegeben
- Die Anmeldesitzung des Benutzers läuft bald ab
- Die Verbindung zum Server wurde unterbrochen, sodass lokale Änderungen nicht gespeichert werden
Die alert-Rolle sollte nur für Textinhalte verwendet werden, nicht für interaktive Elemente wie Links oder Schaltflächen. Das Element mit der alert-Rolle muss nicht in der Lage sein, den Fokus zu erhalten, da Bildschirmleser (Sprach- oder Brailleausgabe) den aktualisierten Inhalt automatisch ankündigen, unabhängig davon, wo der Tastaturfokus liegt, wenn die Rolle hinzugefügt wird.
Die alert-Rolle wird dem Knoten hinzugefügt, der eine Alert-Nachricht enthält, nicht dem Element, das das Alert auslöst. Alerts sind assertive Live-Regionen. Die Einstellung role="alert" entspricht der Einstellung aria-live="assertive" und aria-atomic="true". Da sie keinen Fokus erhalten, muss der Fokus nicht verwaltet werden und es sollte keine Benutzerinteraktion erforderlich sein.
Warnung:
Aufgrund ihrer aufdringlichen Natur muss die alert-Rolle sparsam und nur in Situationen eingesetzt werden, in denen die sofortige Aufmerksamkeit des Benutzers erforderlich ist.
Die alert-Rolle ist eine der fünf Live-Regionen-Rollen. Dynamische Änderungen, die weniger dringend sind, sollten eine weniger aggressive Methode verwenden, wie z.B. aria-live="polite" einzuschließen oder eine andere Live-Region-Rolle wie status zu verwenden. Wenn vom Benutzer erwartet wird, dass er das Alert schließt, sollte stattdessen die alertdialog-Rolle verwendet werden.
Das Wichtigste über die alert-Rolle ist, dass sie für Inhalte gedacht ist, die dynamisch angezeigt werden, nicht für Inhalte, die beim Laden der Seite erscheinen. Sie eignet sich perfekt für Situationen, wie wenn ein Benutzer ein Formular ausfüllt und JavaScript verwendet wird, um eine Fehlermeldung hinzuzufügen – das Alert würde die Nachricht sofort auslesen. Sie sollte nicht für HTML verwendet werden, mit dem der Benutzer nicht interagiert hat. Wenn eine Seite z.B. mit mehreren sichtbaren Alerts verteilt geladen wird, sollte die Alert-Rolle nicht verwendet werden, da die Nachrichten nicht dynamisch ausgelöst wurden.
Wie bei allen anderen Live-Regionen werden Alerts nur angekündigt, wenn der Inhalt des Elements mit role="alert" aktualisiert wird. Stellen Sie sicher, dass das Element mit der Rolle zuerst im Markup der Seite vorhanden ist – dies wird den Browser und die Bildschirmleser „vorbereiten“, das Element auf Änderungen zu überwachen. Danach werden alle Änderungen des Inhalts angekündigt. Versuchen Sie nicht, ein dynamisch bereits mit der gewünschten Alert-Nachricht befülltes Element mit role="alert" hinzuzufügen/zu generieren – dies führt in der Regel nicht zu einer Ankündigung, da es keine Inhaltsänderung ist.
Da die alert-Rolle alle geänderten Inhalte ausspricht, sollte sie mit Vorsicht verwendet werden. Alerts sind definitionsgemäß störend. Mehrere Alerts gleichzeitig und unnötige Alerts schaffen schlechte Benutzererfahrungen.
Beispiele
Die folgenden sind häufige Beispiele für Alerts und wie sie implementiert werden:
Beispiel 1: Fertige Inhalte in einem Element mit einer Alert-Rolle sichtbar machen
Wenn der Inhalt innerhalb des Elements mit role="alert" zunächst mit CSS ausgeblendet ist, verursacht seine Sichtbarmachung das Auslösen des Alerts. Dies bedeutet, dass ein bereits vorhandenes Alert-Containerelement mehrfach „wiederverwendet“ werden kann.
.hidden {
display: none;
}
<div id="expirationWarning" role="alert">
<span class="hidden">Your log in session will expire in 2 minutes</span>
</div>
// removing the 'hidden' class makes the content inside the element visible, which will make the screen reader announce the alert:
document
.getElementById("expirationWarning")
.firstChild.classList.remove("hidden");
Beispiel 2: Dynamische Änderung des Inhalts innerhalb eines Elements mit einer Alert-Rolle
Mit JavaScript können Sie den Inhalt innerhalb des Elements mit role="alert" dynamisch ändern. Beachten Sie, dass, wenn Sie denselben Alert mehrfach auslösen müssen (d.h. der Inhalt, den Sie dynamisch einfügen, ist derselbe wie zuvor), dies im Allgemeinen nicht als Änderung wahrgenommen wird und nicht zu einer Ankündigung führt. Aus diesem Grund ist es in der Regel am besten, kurz die Inhalte des Alert-Containers zu „leeren“, bevor dann die Alert-Nachricht eingefügt wird.
<div id="alertContainer" role="alert"></div>
// clear the contents of the container
document.getElementById("alertContainer").textContent = "";
// inject the new alert message
document.getElementById("alertContainer").textContent =
"Your session will expire in " + expiration + " minutes";
Beispiel 3: Visuell versteckter Alert-Container für Bildschirmleser-Benachrichtigungen
Es ist möglich, den Alert-Container selbst visuell zu verstecken und ihn zu verwenden, um Aktualisierungen/Benachrichtigungen explizit für Bildschirmleser bereitzustellen. Dies kann in Situationen nützlich sein, in denen wichtige Inhalte auf der Seite aktualisiert wurden, aber wo die Änderung für einen Bildschirmleser-Benutzer nicht sofort offensichtlich wäre.
Stellen Sie jedoch sicher, dass der Container nicht mit display:none ausgeblendet wird, da dies ihn auch von unterstützenden Technologien verbirgt, sodass diese nicht über Änderungen informiert werden. Verwenden Sie stattdessen etwas wie die .visually-hidden-Stile.
<div id="hiddenAlertContainer" role="alert" class="visually-hidden"></div>
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
// clear the contents of the container
document.getElementById("hiddenAlertContainer").textContent = "";
// inject the new alert message
document.getElementById("hiddenAlertContainer").textContent =
"All items were removed from your inventory.";
Spezifikationen
| Specification |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # alert |
| Accessible Rich Internet Applications (WAI-ARIA) # alert |