Hinweismeldungen
letzte Aktualisierung der Seite: Version 2.20.0
Hinweismeldungen sollten primär eingesetzt werden, um dem Benutzer ein Feedback zu seinen Aktionen zu geben oder ihn auf wichtige Informationen aufmerksam zu machen.
HTML
Um innerhalb der Hinweismeldung bestimmten Wörtern eine starke Bedeutung zu verleihen, sind diese mit einem strong-Tag zu umgeben. Typischerweise erfolgt das zu Beginn der Meldung als eine Art Hinweis-Überschrift.
Hinweismeldungen können mit Hilfe der folgenden Klassen kontextabhängig dargestellt werden:
| Status | CSS-Klasse |
|---|---|
| Hinweis | alert-info |
| Warnung | alert-warning |
| Erfolg | alert-success |
| Fehler | alert-danger |
<div class="alert alert-warning" role="alert">
<strong>Status</strong> Eine konkrete Hinweismeldung, die auch über eine Zeile hinaus gehen kann.
</div>
Barrierefreiheit
Um Hinweismeldungen semantisch als solche zu kennzeichnen bzw. Benachrichtigungen und Inhaltsänderungen auch für Screenreader nachvollziehbar zu machen, sind die Elemente mit dem Attribut role und dem Wert alert zu versehen.
Außerdem darf der Status bzw. Kontext der Hinweismeldung nicht allein aus der farblichen Gestaltung hervorgehen, sondern muss sich zusätzlich im Textinhalt widerspiegeln.
Beispiele
