Hinweisboxen und Meldungen in CSS (Info, Erfolg, Achtung, Fehler)
Wähle die Hinweisarten, den Stil und ob die Box geschlossen werden kann. Die Vorschau zeigt alle Arten zusammen.
So geht’sHebe hervor, was nicht untergehen darf
Verfügbar auf: 
Hinweisboxen und Meldungen in CSS (Info, Erfolg, Achtung, Fehler): wofür es gut ist
Erzeuge die Boxen, die eine Mitteilung auf der Website oder im Blog hervorheben: Wartungshinweis, Bestellbestätigung, Aktionsfrist, Formularfehler oder ein Tipp mitten im Text. Wähle die Arten, einen von vier Stilen (Seitenrand, voller Rand, flächig und dünne Linie), die Rundung und ob die Box einen Schließen-Button hat.
Jede Art hat ein eigenes Symbol und einen Titel, um nicht nur von der Farbe abzuhängen, und die Textfarben haben guten Kontrast zum Hintergrund. Die Hilfeseite erklärt, wann role="alert" und role="status" für Hinweise nach einer Aktion, wie dem Senden eines Formulars, zu nutzen sind.
So geht’s
- Markiere die Hinweisarten.
- Wähle Stil und Schließen-Button.
- Kopiere HTML und CSS.
Wann nutzen
- Wartungs- oder Aktionshinweis.
- Formularmeldungen.
- Tipps und Anmerkungen in Beiträgen.
Häufige Fragen
Was ist der Unterschied zwischen role="alert" und role="status"?
role="alert" lässt den Screenreader den Hinweis sofort ansagen und unterbricht dabei, was gerade gelesen wurde; es eignet sich für Fehler, die nach einer Aktion auftauchen, etwa ein Formular, das mit Problem gesendet wurde. role="status" sagt ohne Unterbrechung an und eignet sich für Erfolg. Hinweise, die schon beim Öffnen auf der Seite stehen, brauchen keines von beiden, und so erzeugt es das Tool.
Warum reicht die Farbe nicht?
Wer Rot nicht von Grün unterscheiden kann oder die Website auf einem monochromen Bildschirm nutzt, erkennt den Unterschied nicht allein an der Farbe. Deshalb hat jede Art ein eigenes Symbol und einen Titel, und die Textfarben haben genug Kontrast zum Hintergrund.
Wie zeige ich den Hinweis nach dem Senden eines Formulars?
Lasse die Box im HTML mit dem Attribut hidden und role="alert" (für Fehler) oder role="status" (für Erfolg) und entferne hidden per JavaScript, wenn es passiert. Der Screenreader sagt den Text in dem Moment an, in dem er erscheint.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.