Das HTML-Blink-Tag und sein CSS-Ersatz

Ersatz für das HTML-Blink-Tag

HTML-Blink-Tag: Warum es weg ist und der CSS-Ersatz | We.Inc

Das blink-Element ist veraltet, und moderne Browser lassen es nicht mehr blinken. Baue einen barrierefreien CSS-Blink mit Pause-Button, Zyklenlimit und Unterstützung für reduzierte Bewegung.

Das blink-Element ist veraltet: Der HTML-Standard führt es als nicht konform und sagt, man solle stattdessen CSS verwenden, und aktuelle Browser zeigen seinen Text als einfachen, unbewegten Text. Wenn heute etwas blinken soll, schreib eine CSS-Keyframes-Animation, stoppe sie nach wenigen Zyklen oder gib den Leuten eine Pause-Steuerung, und schalte sie unter prefers-reduced-motion ab.

Altes blink-Markup und was du heute stattdessen nutzt

Alter Weg
Status
Stattdessen verwenden

<blink>text</blink>
Veraltet, nicht konform
Eine CSS-Animation auf einem span

text-decoration: blink
Veraltet, Browser blinken eventuell nicht
@keyframes mit wechselnder opacity

<marquee>
Veraltet, nicht konform
CSS-Transitions oder Animationen

Endloses Blinken
Verstößt nach fünf Sekunden ohne Pause gegen WCAG 2.2.2
Ein Zyklenlimit oder ein Pause-Button

Das blink-Tag ist ein Stück Webgeschichte, nach dem immer noch gesucht wird, meist von jemandem, der einen Statuspunkt, einen Cursor oder ein Sale-Badge blinken lassen will. Der Baukasten unten erzeugt diesen Effekt auf moderne Weise und hält ihn innerhalb der Barrierefreiheitsregeln: Die Bewegung ist kurz, lässt sich stoppen und respektiert die Einstellungen des Besuchers.

Lege die Blinkdauer fest und wähle ein sanftes Ausblenden oder ein hartes An und Aus.
Wähle, wie viele Zyklen laufen sollen, oder wähle endlos und behalte den Pause-Button.
Achte auf die Gesamtlaufzeit: Über fünf Sekunden brauchst du eine Möglichkeit zum Pausieren.
Kopiere CSS und HTML. Die Regel für reduzierte Bewegung ist standardmäßig enthalten.

Lass nur ein kleines Element blinken, etwa einen Punkt oder einen Cursor, nie einen Absatz, den Leute lesen müssen.
Halte jeden Blinkzyklus deutlich langsamer als drei Blitze pro Sekunde, um unter der Anfallsschwelle aus WCAG 2.3.1 zu bleiben.
Ein endlicher animation-iteration-count ist der einfachste Weg, unter fünf Sekunden zu bleiben, ohne eine Steuerung hinzuzufügen.
Wenn reduzierte Bewegung aktiv ist, zeige das Element dauerhaft an, statt es auszublenden, damit die Information erhalten bleibt.

Häufige Fragen

Funktioniert das blink-Tag noch?

Kein aktueller Browser lässt es blinken. Der HTML-Standard behandelt blink als veraltetes, nicht konformes Element, sein Inhalt wird also als gewöhnlicher Inline-Text dargestellt. Validatoren markieren es als Fehler.

Was ist mit text-decoration: blink?

Der Wert blink von text-decoration-line ist veraltet, und die Spezifikation erlaubt Browsern, den Text überhaupt nicht blinken zu lassen. Eine Keyframes-Animation ist der verlässliche Ersatz.

Ist blinkender Text nach WCAG erlaubt?

WCAG 2.2.2 Pausieren, Stoppen, Ausblenden ist eine Regel der Stufe A: Blinken, das automatisch startet, länger als fünf Sekunden dauert und neben anderen Inhalten steht, braucht eine Möglichkeit, es zu pausieren, zu stoppen oder auszublenden. Unabhängig davon begrenzt 2.3.1 Blitze auf drei pro Sekunde.

Wie baue ich einen blinkenden Cursor in CSS?

Animiere einen dünnen Rahmen oder einen senkrechten Strich mit steps(1), sodass er zwischen sichtbar und unsichtbar wechselt, mit etwa einem Zyklus pro Sekunde. Ein Cursor in einer Tipp-Demo ist dekorativ, gib ihm also aria-hidden="true".

Wie berücksichtige ich reduzierte Bewegung?

Setze eine Überschreibung in @media (prefers-reduced-motion: reduce) und setze animation: none auf das blinkende Element. Das Media Feature wird breit unterstützt und folgt der Bewegungseinstellung im Betriebssystem des Besuchers.

Warum blink entfernt wurde

Blinkender Text zieht die Aufmerksamkeit von allem anderen auf der Seite ab und ist schwer zu lesen, wenn er die Hälfte der Zeit unsichtbar ist. Für Menschen mit Aufmerksamkeitsstörungen oder vestibulären Beschwerden kann er eine Seite unbenutzbar machen. Deshalb haben die Standards das Blinken aus HTML in CSS verlagert, wo es sich steuern lässt.
Der Effekt selbst ist nicht verboten. Entscheidend ist, wie lange er läuft, wie schnell er blinkt und ob Leute ihn stoppen können.

Ein sicherer Blink in drei Regeln

Erstens Keyframes, die opacity ändern, was flüssig gerendert wird. Zweitens eine endliche Anzahl an Durchläufen oder eine sichtbare Pause-Steuerung. Drittens eine Überschreibung für reduzierte Bewegung, die das Element ruhig stehen lässt.
Die Eigenschaft animation-play-state macht einen Pause-Button einfach: Schalte eine Klasse um, die sie auf paused setzt, und das Element friert an Ort und Stelle ein.

Blinkeffekte zum Bearbeiten

Ein Live-Statuspunkt, der dreimal ausblendet

Drei Zyklen von einer Sekunde enden deutlich innerhalb von fünf Sekunden, eine Pause-Steuerung ist also nicht nötig. Bearbeite den Code, um den Rahmen neu zu laden.

Tipp-Cursor mit hartem An und Aus

steps(1, end) schaltet sofort um, statt auszublenden. Der Cursor ist dekorativ und wird daher vor Screenreadern verborgen.

Was das alte Tag heute macht

Browser zeichnen den Inhalt eines veralteten blink-Elements als gewöhnlichen Text. Nichts blinkt.

Ein Pause-Button für endloses Blinken

Wenn das Blinken länger als fünf Sekunden laufen muss, gib ihm einen echten Button, der es stoppt.

Eine paused-Klasse per Button umschalten

aria-pressed teilt Hilfstechnologien mit, ob die Animation gerade pausiert ist.

Baukasten für barrierefreies Blinken

Neu

Die Frühlingskarte ist da

Ein Zyklus: {n} ms

Sanftes Ausblenden

Hartes An und Aus

Zyklen

Endlos

Bei reduzierter Bewegung abschalten

Pausieren

Fortsetzen

Erneut abspielen

Gesamtlaufzeit: {n} Sekunden

Läuft, bis pausiert wird

Unter fünf Sekunden, daher ist keine Pause-Steuerung nötig.

Über fünf Sekunden: Behalte einen sichtbaren Pause-Button daneben (WCAG 2.2.2).