Qu'est-ce qu'un bon minuteur en ligne ?
Un bon minuteur web doit être précis à la seconde, fonctionner même onglet inactif, déclencher un son fiable et rester accessible. Voici les critères mesurables.
Un minuteur en ligne peut sembler trivial : un compte à rebours, un signal sonore. En pratique, peu d'outils web tiennent leurs promesses à la seconde près, surtout lorsque l'onglet passe en arrière-plan ou que le navigateur applique le throttling.
Les 4 critères d'un bon minuteur web
- Précision à la seconde sur des durées longues. Un minuteur basé sur
setInterval(1000)dérive de plusieurs secondes par heure. Une implémentation correcte se cale surDate.now(). - Fonctionnement en arrière-plan. Chrome et Safari réduisent
setIntervalà 1 Hz dans un onglet inactif. Un bon minuteur reste juste car il mesure une heure cible, pas un compteur incrémenté. - Son fiable au déclenchement. Sur mobile, l'audio doit être débloqué par une interaction utilisateur (politique d'autoplay) — sinon la sonnerie est muette.
- Accessibilité clavier et lecteurs d'écran. Boutons ≥ 44×44 px, contraste suffisant, rôle ARIA pour les statuts.
Pourquoi la plupart des minuteurs web dérivent
L'erreur classique : incrémenter une variable toutes les secondes avec setInterval. Le navigateur n'est pas un temps réel — il peut sauter, retarder, throttler. Sur un onglet en arrière-plan pendant 25 minutes, la dérive cumulée peut dépasser 30 secondes.
La solution : enregistrer endTime = Date.now() + duration au démarrage, puis rafraîchir l'affichage par différence. La précision dépend alors uniquement de l'horloge système, fiable à la milliseconde.
Le piège du son sur iOS et Safari
Safari mobile bloque AudioContext tant qu'aucune interaction utilisateur n'a eu lieu. Un minuteur lancé puis laissé tourner sans toucher l'écran peut arriver à zéro… en silence. Convertly CHRONO débloque l'audio dès le clic sur "Démarrer" pour éviter cette panne.
Accessibilité : un détail critique
Un minuteur sert souvent en cuisine, en sport, en classe — souvent à distance de l'écran. Les chiffres doivent être visibles à 2 mètres, les boutons cliquables sans précision, et l'état "en marche / pause / terminé" annoncé aux lecteurs d'écran via aria-live.
Récapitulatif
| Critère | Cible |
|---|---|
| Précision sur 1 h | ± 1 seconde |
| Onglet en arrière-plan | Reste juste |
| Son mobile | Débloqué à l'interaction |
| Boutons | ≥ 44 × 44 px |