Het blink-element is verouderd en moderne browsers laten het niet knipperen. Bouw een toegankelijke CSS-blink met een pauzeknop, een limiet op het aantal cycli en ondersteuning voor reduced motion.
Het blink-element is verouderd: de HTML-standaard noemt het niet-conform en zegt dat u CSS moet gebruiken, en huidige browsers tonen de tekst gewoon als stilstaande tekst. Om vandaag iets te laten knipperen, schrijft u een CSS keyframes-animatie, stopt u die na een paar cycli of geeft u mensen een pauzeknop, en zet u haar uit onder prefers-reduced-motion.
Oude blink-markup en wat u nu gebruikt
De blink-tag is een stukje webgeschiedenis waar nog steeds naar wordt gezocht, meestal door iemand die een statusstip, een cursor of een kortingslabel wil laten knipperen. De bouwer hieronder maakt dat effect op de moderne manier en houdt het binnen de toegankelijkheidsregels, zodat de beweging kort is, kan worden gestopt en de instellingen van de bezoeker respecteert.
Geen enkele huidige browser laat hem knipperen. De HTML-standaard behandelt blink als een verouderd, niet-conform element, dus de inhoud wordt weergegeven als gewone inline tekst. Validators markeren het als fout.
De waarde blink van text-decoration-line is afgeschaft, en de specificatie staat browsers toe de tekst helemaal niet te laten knipperen. Een keyframes-animatie is de betrouwbare vervanging.
WCAG 2.2.2 Pause, Stop, Hide is een regel op niveau A: knipperen dat automatisch start, langer dan vijf seconden duurt en naast andere inhoud staat, heeft een manier nodig om het te pauzeren, te stoppen of te verbergen. Daarnaast beperkt 2.3.1 flitsen tot drie keer per seconde.
Animeer een dunne rand of een verticaal streepje met steps(1), zodat het wisselt tussen zichtbaar en verborgen, met ongeveer één cyclus per seconde. Een caret in een typedemo is decoratief, dus geef hem aria-hidden="true".
Zet een overschrijving in @media (prefers-reduced-motion: reduce) en stel animation: none in op het knipperende element. De media feature wordt breed ondersteund en volgt de bewegingsinstelling in het besturingssysteem van de bezoeker.
Drie cycli van één seconde eindigen ruim binnen vijf seconden, dus er is geen pauzeknop nodig. Laad het kader opnieuw door de code te bewerken.
steps(1, end) schakelt direct in plaats van te vervagen. De caret is decoratief, dus hij is verborgen voor schermlezers.
Browsers tekenen de inhoud van een verouderd blink-element als gewone tekst. Er knippert niets.
Als het knipperen langer dan vijf seconden moet duren, geef het dan een echte knop die het stopt.
aria-pressed vertelt hulptechnologie of de animatie op dit moment gepauzeerd is.
Nieuw
Het voorjaarsmenu is er
Eén cyclus: {n} ms
Zachte fade
Hard aan en uit
Cycli
Eindeloos
Uitzetten bij reduced motion
Pauzeren
Hervatten
Opnieuw afspelen
Totale looptijd: {n} seconden
Loopt tot het wordt gepauzeerd
Minder dan vijf seconden, dus er is geen pauzeknop nodig.
Meer dan vijf seconden: houd er een zichtbare pauzeknop naast (WCAG 2.2.2).
CSS kopiëren
Gratis beginnen · Geen creditcard nodig