WCAG 2.2.2 : Mettre en pause, arrêter, masquer

Ce que signifie cette règle

WCAG 2.2.2 (Pause, Stop, Hide) est un critère de succès de niveau A relevant du principe « Opérable ». Il régit tout contenu qui se déplace, clignote, défile ou se met à jour automatiquement sur une page. La règle établit deux exigences distinctes selon la façon dont le contenu se comporte :

Pour le contenu en mouvement, clignotant ou défilant qui démarre automatiquement, dure plus de cinq secondes et est présenté en parallèle d’un autre contenu, les utilisateurs doivent disposer d’un mécanisme pour le mettre en pause, l’arrêter ou le masquer. Cela couvre les animations CSS, les carrousels pilotés par JavaScript, le texte en « marquee », les éléments clignotants, les bandeaux défilants et les bannières animées.

Pour le contenu se mettant à jour automatiquement — comme les tableaux de scores en direct, les bandeaux boursiers, les flux de réseaux sociaux ou les titres d’actualité qui se rafraîchissent à intervalles réguliers — les utilisateurs doivent pouvoir mettre en pause, arrêter, masquer ou contrôler la fréquence des mises à jour.

Pour être conforme, il faut qu’un contrôle clairement opérable (un bouton, un raccourci clavier ou un mécanisme similaire) soit disponible avant ou à côté du contenu animé, permettant aux utilisateurs de le figer ou de le retirer sans assistance. Le contrôle lui-même doit être accessible — atteignable au clavier, correctement étiqueté et utilisable sans souris.

Un échec se produit lorsque l’un des cas suivants existe : un élément <blink> ou un CSS text-decoration: blink qui ne peut pas être arrêté ; un élément <marquee> sans mécanisme de pause ; un carrousel animé qui se joue indéfiniment sans bouton de pause ; un widget d’actualités à rafraîchissement automatique qui ne peut pas être contrôlé ; ou une vidéo de fond en boucle sans moyen de l’arrêter.

WCAG définit deux exceptions explicites. Premièrement, la règle ne s’applique pas aux animations qui durent cinq secondes ou moins, car un mouvement bref qui s’arrête de lui-même ne crée pas de distraction prolongée. Deuxièmement, elle ne s’applique pas lorsque l’animation est essentielle à l’activité — par exemple, une interface de trading boursier en temps réel où les prix en direct constituent l’objectif même de la page, et les mettre en pause changerait fondamentalement la nature du contenu. Ces exceptions sont étroites et ne doivent pas être utilisées comme prétexte général pour éviter la mise en œuvre.

Pourquoi c’est important

Le contenu en mouvement et clignotant crée de sérieux obstacles pour plusieurs groupes de handicap distincts, avec des conséquences allant de la simple distraction à un véritable préjudice médical.

Les personnes ayant un trouble du déficit de l’attention avec ou sans hyperactivité (TDAH) ou d’autres handicaps cognitifs trouvent souvent impossible de se concentrer sur le contenu principal d’une page lorsque des éléments animés sont présents dans leur vision périphérique. Le cerveau humain est neurologiquement programmé pour prêter attention au mouvement comme mécanisme de survie, et les personnes avec TDAH ressentent cette attraction beaucoup plus intensément que les utilisateurs neurotypiques. Un bandeau défilant en bas d’une page d’actualités ou une bannière publicitaire animée dans une barre latérale peuvent rendre la lecture de l’article principal pratiquement impossible.

Les personnes ayant des troubles vestibulaires — y compris la labyrinthite, le vertige paroxystique positionnel bénin (VPPB) et la maladie de Ménière — peuvent ressentir des nausées, des vertiges et une désorientation lorsqu’elles sont exposées à certains types de mouvement à l’écran. Pour ces utilisateurs, un carrousel en boucle ou un effet de défilement parallaxe n’est pas simplement agaçant ; il peut provoquer un malaise physique qui les oblige à quitter complètement la page. Les troubles vestibulaires touchent environ 35% des adultes de plus de 40 ans rien qu’aux États-Unis.

Les personnes atteintes d’épilepsie photosensible sont exposées à un risque de crises en présence de contenu qui clignote ou clignote à certaines fréquences. Bien que le contenu clignotant soit plus directement traité par WCAG 2.3.1, le contenu clignotant couvert par 2.2.2 peut également être un facteur déclenchant. L’Organisation mondiale de la Santé estime qu’environ 50 millions de personnes dans le monde sont atteintes d’épilepsie.

Pour les utilisateurs de lecteurs d’écran, le contenu se mettant à jour automatiquement crée un problème tout aussi perturbateur. Lorsqu’une région en direct se rafraîchit, les lecteurs d’écran annoncent le nouveau contenu, ce qui interrompt l’utilisateur en pleine phrase alors qu’il écoute autre chose. Sans possibilité de mettre les mises à jour en pause, la navigation sur une page avec du contenu en direct devient extrêmement difficile.

Considérez ce scénario réel : une personne avec TDAH effectue un virement bancaire en ligne sur un portail bancaire de commerce électronique turc. Une bannière promotionnelle rotative fait défiler quatre offres toutes les trois secondes dans l’en-tête. L’utilisateur ne peut pas se concentrer sur la saisie du bon numéro de compte. Il commet une erreur de transcription, le virement échoue et il doit recommencer toute la procédure. Si la bannière avait inclus un bouton de pause, la tâche aurait été simple. Ce n’est pas une hypothèse — c’est une catégorie documentée de défaillance d’interaction que les auditeurs en accessibilité rencontrent régulièrement.

Au-delà de l’accès pour les personnes handicapées, l’élimination des mouvements incontrôlables améliore l’ergonomie pour tout le monde, réduit la charge cognitive et peut améliorer des signaux SEO tels que les scores Core Web Vitals en réduisant les décalages de mise en page et l’exécution JavaScript inutile.

Règles Axe-core associées

• blink : Cette règle vérifie la présence de l’élément HTML obsolète <blink> et des propriétés CSS qui produisent du texte clignotant (historiquement text-decoration: blink). L’élément <blink> fait clignoter le texte en continu sans mécanisme natif permettant à l’utilisateur de l’arrêter. Axe signale toute instance de cet élément comme une violation car il enfreint directement 2.2.2 — il n’existe aucun cas d’utilisation conforme pour <blink>. La règle signale également les effets de clignotement pilotés par CSS lorsque l’animation ne peut pas être mise en pause. La détection automatisée est fiable ici car l’élément et la propriété sont identifiables syntaxiquement dans le DOM et les styles calculés.
• marquee : Cette règle vérifie la présence de l’élément HTML <marquee>, qui fait défiler du texte ou du contenu horizontalement ou verticalement à l’écran en boucle continue. L’élément <marquee> n’a aucun mécanisme de pause accessible intégré et est obsolète en HTML5. Axe signale toute instance comme une violation. Comme pour <blink>, la détection est simple car l’élément est identifiable syntaxiquement. Cependant, les outils automatisés ne peuvent pas détecter toutes les violations de 2.2.2 — les animations CSS, les carrousels JavaScript, les widgets AJAX à mise à jour automatique et les vidéos HTML5 en boucle nécessitent tous un examen manuel, car le mécanisme de pause (ou son absence) ne peut être déterminé que par un testeur humain évaluant l’expérience interactive complète.

Comment tester

1. Analyse automatisée avec axe DevTools ou Lighthouse : Ouvrez la page dans Chrome ou Firefox. Ouvrez DevTools (F12), accédez au panneau axe DevTools ou à l’audit d’accessibilité Lighthouse, et lancez une analyse complète. Recherchez spécifiquement les violations étiquetées blink ou marquee dans les résultats. Chaque violation inclura le nœud DOM, le niveau d’impact (grave ou critique) et un lien vers les recommandations de correction. Notez qu’une analyse automatisée sans erreur ne signifie pas une conformité totale — poursuivez avec les étapes manuelles.
2. Inspection manuelle des animations CSS et JavaScript : Passez en revue visuellement la page pour tout contenu qui se déplace, défile, clignote ou se met à jour automatiquement. Pour chaque instance, vérifiez qu’un contrôle de pause, d’arrêt ou de masquage est présent et visible avant ou à côté du contenu animé. Vérifiez que le contrôle est atteignable au clavier (Tab pour y accéder) et qu’appuyer sur Entrée ou Espace l’active. Vérifiez qu’activer le contrôle arrête réellement le mouvement et ne fait pas que réduire sa vitesse.
3. Test au clavier uniquement : Débranchez votre souris. Utilisez la touche Tab pour parcourir toute la page. Confirmez que vous pouvez atteindre le contrôle de pause/arrêt pour chaque élément animé en utilisant uniquement le clavier, et que le contrôle possède un indicateur de focus visible. Si vous ne pouvez pas atteindre le contrôle, ou si l’atteindre nécessite de tabuler d’abord à travers le contenu animé (ce qui peut être désorientant), c’est un échec.
4. Test avec lecteur d’écran NVDA et Firefox : Lancez NVDA, ouvrez la page dans Firefox et écoutez les annonces de régions en direct qui interrompent la lecture. Naviguez jusqu’au contenu se mettant à jour automatiquement et confirmez que l’utilisation du contrôle de pause fait taire les annonces NVDA. Testez avec JAWS et Chrome, et VoiceOver et Safari sur macOS, en suivant la même procédure.
5. Vérification du contenu à mise à jour automatique : Pour le contenu qui se rafraîchit sur minuterie (flux d’actualités, tableaux de bord, tableaux de scores), notez l’intervalle de rafraîchissement. Confirmez qu’il existe un mécanisme pour mettre les mises à jour en pause ou contrôler la fréquence. Déclenchez la mise à jour manuellement si possible et vérifiez que les lecteurs d’écran ne l’annoncent que lorsque l’utilisateur le choisit, et non de manière involontaire.
6. Test de la préférence de réduction des animations : Dans votre système d’exploitation, activez le paramètre d’accessibilité « Réduire les animations ». Rechargez la page et vérifiez que les animations respectent la requête média CSS prefers-reduced-motion. Bien que cela ne soit pas strictement exigé par WCAG 2.2.2, c’est une technique fortement complémentaire et de plus en plus attendue par les auditeurs.

Comment corriger

Élément <marquee> obsolète — Incorrect

<!-- Scrolling text with no pause control; fails 2.2.2 -->
<marquee behavior='scroll' direction='left'>
  Breaking news: Market closes up 2.4% — Inflation data released — Central bank holds rates
</marquee>

Élément <marquee> obsolète — Correct

<!-- Replaced with a CSS animation that respects prefers-reduced-motion
     and includes an accessible pause button -->
<div class='ticker-wrapper'>
  <button
    id='ticker-toggle'
    aria-label='Pause news ticker'
    aria-pressed='false'
    onclick='toggleTicker()'
  >
    Pause
  </button>
  <div class='ticker' id='news-ticker' aria-live='off' aria-atomic='false'>
    <p class='ticker-content'>
      Breaking news: Market closes up 2.4% — Inflation data released — Central bank holds rates
    </p>
  </div>
</div>

<!-- The CSS should define .ticker-content with animation,
     and a .paused class that sets animation-play-state: paused.
     The JS toggleTicker() function adds/removes .paused
     and updates aria-pressed and aria-label accordingly. -->

Élément <blink> obsolète — Incorrect

<!-- Blink element causes continuous unstoppable flashing; fails 2.2.2 -->
<p>Your session will expire soon. <blink>Please save your work!</blink></p>

Élément <blink> obsolète — Correct

<!-- Static, high-contrast warning with role='alert' for screen readers.
     No blinking required to communicate urgency. -->
<p>
  Your session will expire soon.
  <strong role='alert'>Please save your work!</strong>
</p>

Carrousel en lecture automatique sans contrôle de pause — Incorrect

<!-- Carousel advances every 4 seconds with no way to stop it; fails 2.2.2 -->
<div class='carousel' data-autoplay='true' data-interval='4000'>
  <div class='slide active'><img src='promo1.jpg' alt='Summer Sale'></div>
  <div class='slide'><img src='promo2.jpg' alt='New Arrivals'></div>
  <div class='slide'><img src='promo3.jpg' alt='Free Shipping'></div>
</div>

Carrousel en lecture automatique sans contrôle de pause — Correct

<!-- Carousel includes a visible, keyboard-accessible pause button.
     The aria-label updates dynamically to reflect current state.
     Autoplay also stops on focus/hover (WCAG best practice). -->
<div
  class='carousel'
  id='promo-carousel'
  aria-roledescription='carousel'
  aria-label='Promotional offers'
>
  <button
    id='carousel-pause'
    aria-label='Pause carousel'
    aria-pressed='false'
    class='carousel-pause-btn'
  >
    <!-- SVG pause icon or text label -->
    Pause
  </button>
  <div
    class='carousel-track'
    aria-live='off'
  >
    <div
      class='slide active'
      role='group'
      aria-roledescription='slide'
      aria-label='1 of 3'
    >
      <img src='promo1.jpg' alt='Summer Sale — up to 50% off selected items'>
    </div>
    <div
      class='slide'
      role='group'
      aria-roledescription='slide'
      aria-label='2 of 3'
    >
      <img src='promo2.jpg' alt='New Arrivals — browse the latest collection'>
    </div>
  </div>
</div>

Widget de données en direct à mise à jour automatique — Incorrect

<!-- Widget refreshes every 10 seconds via JS with no user control; fails 2.2.2 -->
<div id='stock-widget' aria-live='polite'>
  <p>BIST 100: 9,842.15 <span class='change positive'>+1.3%</span></p>
</div>

Widget de données en direct à mise à jour automatique — Correct

<!-- Widget includes a pause button; aria-live is set to 'off' when paused
     so screen readers are not interrupted during paused state. -->
<div class='stock-widget-container'>
  <button
    id='stock-pause'
    aria-label='Pause stock updates'
    aria-pressed='false'
  >
    Pause updates
  </button>
  <div id='stock-widget' aria-live='polite' aria-atomic='true'>
    <p>BIST 100: 9,842.15 <span class='change positive'>+1.3%</span></p>
  </div>
</div>
<!-- JS should toggle aria-live between 'polite' and 'off',
     stop the setInterval timer when paused, and update
     aria-pressed and aria-label on the button accordingly. -->

Erreurs courantes

• Utiliser des éléments <marquee> ou <blink> dans le HTML de production, même pour un style « rétro » ou décoratif — ces deux éléments sont obsolètes, dénués de sens sémantique et enfreignent toujours 2.2.2 sans autre voie de correction que leur suppression.
• Ajouter un bouton de pause qui n’est visible qu’au survol de la souris, le rendant inaccessible aux utilisateurs uniquement au clavier qui en ont le plus besoin et qui naviguent généralement avec Tab plutôt qu’en survolant.
• Implémenter un bouton de pause qui n’est pas atteignable par la touche Tab avant le contenu animé dans le DOM, obligeant les utilisateurs à naviguer à travers le mouvement désorientant avant de pouvoir l’arrêter.
• Utiliser animation-play-state: paused en CSS pour arrêter visuellement l’animation, mais ne pas désactiver également la boucle JavaScript setInterval ou requestAnimationFrame qui pilote les mises à jour de contenu — l’apparence visuelle s’arrête mais le DOM continue de changer, interrompant toujours les lecteurs d’écran.
• Définir aria-live='polite' sur un carrousel ou un bandeau défilant et le laisser actif même lorsque l’utilisateur a appuyé sur pause — la région en direct continue d’annoncer les changements du DOM aux utilisateurs de lecteurs d’écran même si l’animation visuelle est figée.
• Se fier à autoplay=false sur un élément <video> sans vérifier le comportement dans les différents navigateurs ; certaines combinaisons de navigateurs et de plugins ignorent cet attribut, provoquant la lecture automatique des vidéos à l’encontre de l’intention de l’auteur et des attentes de l’utilisateur.
• Considérer l’exception de cinq secondes comme une période de grâce générale, et construire un carrousel qui affiche chaque diapositive pendant quatre secondes en supposant que chaque transition individuelle est inférieure à cinq secondes — l’animation dans son ensemble est continue et dure bien plus de cinq secondes, donc l’exception ne s’applique pas.
• Fournir un contrôle de pause qui arrête l’animation mais n’indique pas visuellement l’état de pause, laissant les utilisateurs incertains quant à l’effet de leur action — le bouton doit refléter son état actuel, idéalement en utilisant aria-pressed et en faisant alterner son libellé entre « Pause » et « Play ».
• Appliquer prefers-reduced-motion uniquement aux transitions CSS et ignorer les animations pilotées par JavaScript qui fonctionnent indépendamment du CSS, ce qui signifie que les utilisateurs ayant activé le paramètre système de réduction des animations subissent toujours du mouvement sur la page.
• Placer le contrôle de pause en dehors de l’ordre de tabulation du clavier en définissant tabindex='-1' ou en l’enfermant dans un conteneur avec display:none qui n’est affiché de manière conditionnelle qu’avec une interaction à la souris — le contrôle doit toujours être atteignable via la navigation au clavier.

Lien avec la réglementation d’accessibilité de la Turquie

La circulaire présidentielle n° 2025/10 de la Turquie, publiée au Journal officiel (Resmî Gazete) n° 32933 le 21 juin 2025, établit des exigences obligatoires d’accessibilité web et mobile alignées sur WCAG 2.2. WCAG 2.2.2 Pause, Stop, Hide est un critère de niveau A, ce qui signifie qu’il se situe au niveau le plus fondamental de conformité et est obligatoire sans exception pour toutes les entités couvertes par la circulaire.

La circulaire fixe des calendriers de conformité échelonnés : les institutions et organismes publics doivent atteindre une conformité complète de niveau A dans l’année suivant la date de publication de la circulaire, et les entités du secteur privé doivent le faire dans un délai de deux ans. Il n’existe pas de participation volontaire — la circulaire impose une obligation légale, et les propriétés numériques non conformes sont soumises à une supervision administrative et à d’éventuelles mesures d’exécution.

Les entités couvertes par la circulaire incluent un large éventail de services numériques turcs : toutes les institutions et organismes publics ; les plateformes de commerce électronique opérant en Turquie ; les banques et institutions de services financiers ; les hôpitaux et prestataires de soins de santé privés ; les opérateurs de télécommunications comptant 200,000 abonnés ou plus ; les agences de voyage ; les entreprises de transport privé ; et les écoles privées disposant d’une autorisation du ministère de l’Éducation nationale (Millî Eğitim Bakanlığı, MoNE).

Pour ces entités, WCAG 2.2.2 a des implications directes et pratiques. Un site de commerce électronique avec un carrousel de produits en lecture automatique et sans bouton de pause est en infraction. Le portail de banque en ligne d’une banque qui utilise un bandeau de messages de sécurité défilant sans contrôle d’arrêt n’est pas conforme. La page de prise de rendez-vous d’un hôpital qui utilise des alertes animées qui ne peuvent pas être arrêtées ne respecte pas l’exigence. La page d’accueil d’un opérateur de télécommunications avec une vidéo de fond en boucle et sans contrôle d’arrêt visible doit être corrigée avant la date limite.

Au-delà de l’obligation légale, le droit turc en matière d’accessibilité s’aligne sur la tendance européenne plus large illustrée par la directive européenne sur l’accessibilité du web et l’Acte européen sur l’accessibilité (EAA). À mesure que les entreprises turques se développent sur les marchés européens ou servent des utilisateurs européens, la conformité au niveau A de WCAG 2.2 — y compris le critère 2.2.2 — devient une exigence de conformité double. Mettre en œuvre correctement Pause, Stop, Hide est donc à la fois une nécessité juridique nationale et un atout stratégique pour les organisations turques ayant une présence numérique internationale.