blink要素は廃止されており、最新のブラウザーでは点滅しません。一時停止ボタン、繰り返し回数の制限、動きを減らす設定への対応を備えた、アクセシブルなCSSの点滅を作りましょう。
blink要素は廃止されています。HTML標準では非準拠の要素とされ、代わりにCSSを使うよう記載されており、現在のブラウザーはそのテキストを点滅しない普通のテキストとして表示します。今何かを点滅させるには、CSSのkeyframesアニメーションを書き、数回で止めるか一時停止の操作を用意し、prefers-reduced-motionのときはオフにしましょう。
古いblinkのマークアップと現在の代替手段
blinkタグは今でも検索されるWebの歴史の一部で、検索するのはたいてい、ステータスの点、カーソル、セールのバッジを点滅させたい人です。下のビルダーはその効果を現代的な方法で作り、アクセシビリティのルールの範囲内に収めます。動きは短く、止めることができ、訪問者の設定を尊重します。
現在のブラウザーで点滅させるものはありません。HTML標準ではblinkは廃止された非準拠の要素として扱われるため、その内容は普通のインラインテキストとして描画されます。バリデーターはエラーとして指摘します。
text-decoration-lineのblink値は非推奨で、仕様ではブラウザーがテキストをまったく点滅させないことも認められています。確実な代替手段はkeyframesアニメーションです。
WCAG 2.2.2「一時停止、停止、非表示」はレベルAの基準です。自動的に始まり、5秒を超えて続き、他のコンテンツと並んで表示される点滅には、一時停止、停止、または非表示にする手段が必要です。それとは別に、2.3.1では点滅を1秒間に3回までに制限しています。
細いボーダーや縦棒の文字をsteps(1)でアニメーションさせ、表示と非表示を約1秒周期で切り替えます。タイピングのデモのキャレットは装飾なので、aria-hidden="true"を付けましょう。
上書きのルールを@media (prefers-reduced-motion: reduce)で囲み、点滅する要素にanimation: noneを設定します。このメディア特性は広くサポートされており、訪問者のOSの動きに関する設定に従います。
1秒の周期を3回なら5秒よりかなり前に終わるので、一時停止の操作は不要です。コードを編集するとフレームが再読み込みされます。
steps(1, end)はフェードせずに瞬時に切り替わります。キャレットは装飾なので、スクリーンリーダーからは隠します。
ブラウザーは廃止されたblink要素の内容を普通のテキストとして描画します。何も点滅しません。
点滅を5秒より長く続ける必要がある場合は、それを止められる本物のボタンを用意しましょう。
aria-pressedは、アニメーションが現在一時停止中かどうかを支援技術に伝えます。
新着
春メニューが登場しました
1周期：{n} ms
柔らかいフェード
はっきりオンオフ
回数
無限
動きを減らす設定ではオフにする
一時停止
再開
もう一度再生
合計実行時間：{n}秒
一時停止するまで実行
5秒未満なので、一時停止の操作は不要です。
5秒を超えています：すぐ横に目に見える一時停止ボタンを置いてください（WCAG 2.2.2）。
CSSをコピー
無料で始める · クレジットカード不要