EN

Profil « Éviter les mouvements »

Épilepsie, migraine, vertiges : une page plus calme, en un clic

Le profil « Éviter les mouvements » d'Octeasy fige d'un clic les animations et les transitions du site, met en pause les vidéos qui démarrent seules, coupe le son et adoucit les couleurs. Il rend la page plus calme, sans remplacer un site conçu sans clignotement.

Voir les formules

Dans le panneau, choisissez « Éviter les mouvements ». Raccourci : Alt + Maj + A.

  • Gratuit pour le visiteur
  • Sans cookie
  • Réglages gardés sur l'appareil
  • Panneau en français et en anglais
Une jeune femme lit tranquillement son téléphone dans un café lumineux, une tasse à la main.
  • Animations stoppées
  • Transitions coupées
  • Défilement direct
  • Vidéos auto en pause
  • Couleurs à 45 %
  • Son coupé
Les réglages exacts du profil « Éviter les mouvements », appliqués à une page.

Qui profite du profil « Éviter les mouvements » ?

Le profil est pensé pour les personnes que le mouvement, le clignotement ou les couleurs vives gênent : épilepsie photosensible, qui touche environ 3 % des personnes épileptiques selon l'Epilepsy Society, migraine, vertiges. Il rend aussi service, sans aucun trouble, à tous ceux qui veulent lire une page immobile, sans carrousel ni vidéo qui démarre seule.

Avec un trouble ou une maladie

  • Épilepsie photosensibleDes lumières qui clignotent ou des motifs contrastés peuvent déclencher une crise. Le profil fige ce qui bouge en CSS, sans rien garantir : c'est un site conçu sans flash qui réduit ce risque à la source.
  • MigraineLa sensibilité à la lumière fait partie des symptômes d'une crise. Une page immobile, aux couleurs adoucies, peut être plus confortable.
  • Vertiges et troubles vestibulairesLa parallaxe et les défilements animés peuvent donner vertiges et nausées. Le profil supprime transitions et défilement doux.

Au quotidien, sans aucun trouble

  • « Les carrousels qui bougent me fatiguent »Les bannières animées en CSS s'arrêtent : on lit à son rythme, sans qu'une image chasse l'autre.
  • « Je lis dans le train »Le NHS conseille plutôt d'éviter les écrans en voyage. Si vous lisez quand même, une page immobile n'ajoute pas son mouvement à celui du train.
  • « Je ne supporte pas les vidéos qui démarrent seules »Les vidéos de la page lancées automatiquement ou en boucle sont mises en pause, et le son est coupé.
  • « Je veux une page calme »Moins de mouvement, des couleurs plus douces, aucun son : l'attention reste sur le texte.

Désactiver les animations d'un site : ce que règle le profil

Ce qui bouge sans qu'on l'ait demandé, clignote, glisse ou fait du bruit sollicite l'attention et peut gêner. Le profil « Éviter les mouvements » agit sur six points d'un coup, sur toute la page, sans la recharger. Ce qui est dessiné en JavaScript, une vidéo intégrée ou un GIF peuvent continuer.

  • Ce qui gêne : Bannières, carrousels et icônes bougent sans arrêt

    Ce que fait le profil : Stopper les animations animations CSS figées

    Chaque animation saute à son état final et ne se répète plus.

  • Ce qui gêne : Des blocs glissent, zooment ou s'estompent à chaque geste

    Ce que fait le profil : Transitions coupées instantanées

    Menus et fenêtres s'ouvrent d'un coup, sans effet.

  • Ce qui gêne : La page défile seule jusqu'à une section

    Ce que fait le profil : Défilement direct sans défilement doux

    On arrive à l'endroit visé sans voir la page glisser.

  • Ce qui gêne : Une vidéo démarre seule ou tourne en boucle

    Ce que fait le profil : Pause des vidéos automatiques une fois

    Seules les vidéos de la page elle-même. Relancée par vous, elle continue. Une vidéo intégrée depuis YouTube n'est pas concernée.

  • Ce qui gêne : Le son part sans prévenir

    Ce que fait le profil : Couper le son vidéos et audio muets

    Pour les lecteurs de la page elle-même.

  • Ce qui gêne : Des couleurs vives saturent l'écran

    Ce que fait le profil : Couleurs douces saturation 45 %

    Les teintes restent reconnaissables. Aussi en gris.

Dans le panneau, en plus

  • Masquer les images Ne garde que le texte : images, GIF animés et vidéos disparaissent de la vue.
  • Sombre doux Un affichage sombre qui évite le blanc éblouissant, utile quand la lumière gêne.
  • Plan de la page Aller directement à une partie, sans faire défiler toute la page.
  • Masque de lecture Il assombrit la page sauf une bande claire autour du pointeur.
Voir les valeurs exactes : Ce que demandent les WCAG, ce que fait le profil
Ce que demandent les WCAG, ce que fait le profil
Critère WCAGNiveauCe que doit faire le siteCe que fait le profil
2.3.1 Trois flashs ou sous le seuilARien qui clignote plus de trois fois par seconde, ou sous les seuils de flashFige les clignotements faits en CSS ; pas ceux d'une vidéo ou d'une animation JavaScript
2.2.2 Mettre en pause, arrêter, masquerATout ce qui bouge seul plus de cinq secondes, à côté d'autres contenus, peut être mis en pauseFige les animations CSS et met en pause les vidéos de la page lancées seules
2.3.3 Animation après interactionAAALes animations déclenchées par un geste peuvent être désactivées, par exemple avec prefers-reduced-motionCoupe les transitions et le défilement doux

Ces critères s'adressent au site, pas au visiteur : un widget ne les remplit pas à sa place. Le critère 2.3.1 est le seul à viser directement le risque de crise.

Avant, après : la même page

D'abord une page comme on en voit souvent, avec bannière animée et couleurs vives, puis la même avec les réglages exacts du profil. Pour le vivre sur une vraie page, ouvrez le widget.

Sans réglage

Soldes d'hiver

Jusqu'à moins 50 % sur une sélection d'articles, en magasin et en ligne. Livraison offerte dès 49 euros d'achat, retours gratuits sous 30 jours.

Voir la sélectionJ'en profite

Avec « Éviter les mouvements »
Page du site Octeasy avec le profil « Éviter les mouvements » appliqué : animations stoppées, couleurs adoucies.
Capture réelle : une page du site Octeasy avec le profil appliqué.
Panneau d'Octeasy ouvert sur les profils, « Éviter les mouvements » sélectionné.
Le panneau, profil « Éviter les mouvements » choisi.

Activer « Éviter les mouvements » en trois gestes

Sur un site équipé d'Octeasy, à la souris, au doigt ou au clavier. Les réglages restent ensuite enregistrés dans le navigateur, pour ce site.

  1. Ouvrir le panneau

    Le bouton rond en bas de l'écran, ou Alt + Maj + A.

  2. Choisir « Éviter les mouvements »

    Animations, vidéos automatiques, son et couleurs changent aussitôt sur toute la page.

  3. Ajuster

    Gardez ce qui aide, changez le reste : couleurs, son, images ou affichage sombre.

Animations, flashs et épilepsie : ce que disent les normes

Les normes du web fixent un seuil précis pour les flashs et demandent qu'on puisse arrêter ce qui bouge. Elles s'adressent au site : un widget n'enlève pas un flash d'une vidéo. Aucune étude ne montre qu'un outil d'affichage prévienne une crise ; le profil rend la page plus calme, rien de plus.

  • Trois flashs par seconde, au plus

    Les WCAG interdisent, au niveau A, tout contenu qui clignote plus de trois fois par seconde au-dessus des seuils de flash. Les fréquences de 3 à 30 hertz sont les plus souvent en cause, de 16 à 25 surtout.

    W3C, WCAG 2.2, critère 2.3.1 ; Epilepsy Society

  • Environ 3 % des épilepsies

    Environ une personne sur 100 a une épilepsie, et environ 3 % d'entre elles une épilepsie photosensible, apparue le plus souvent entre 7 et 19 ans.

    Epilepsy Society

  • Le mouvement peut donner des vertiges

    Selon le W3C, une animation au défilement ou une parallaxe peut provoquer chez les personnes atteintes de troubles vestibulaires vertiges, nausées, migraines, parfois jusqu'à devoir s'aliter.

    W3C, WCAG 2.2, critère 2.3.3

  • Réduire les animations : un réglage déjà prévu

    Les appareils permettent de demander moins de mouvement ; la requête CSS prefers-reduced-motion transmet ce choix au site, à lui de le respecter.

    W3C, Media Queries Level 5 ; technique WCAG C39

À retenir : la vraie protection se construit dans le site, sans flash et sans mouvement imposé. Le profil apporte du calme au visiteur qui l'ouvre, avec des limites qu'il faut connaître.

Un site adapté à l'épilepsie et aux vertiges : ce qui reste à faire

Un widget aide le visiteur qui l'ouvre ; un site calme par défaut aide tout le monde, y compris celui qui ne sait pas encore qu'un flash peut le gêner. Ces points, tirés des WCAG, se règlent dans vos contenus et votre code.

Flashs

  • Rien qui clignote plus de trois fois par seconde (WCAG 2.3.1).
  • Vérifier vidéos, GIF et publicités avant publication, avec un outil d'analyse comme PEAT.
  • Éviter les grands motifs rayés ou contrastés qui alternent.

Animations

  • Respecter prefers-reduced-motion, en CSS comme en JavaScript (technique C39).
  • Un bouton pause pour tout ce qui bouge seul plus de cinq secondes (WCAG 2.2.2).
  • Pas de parallaxe ni d'animation au défilement sans moyen de les couper (WCAG 2.3.3).

Vidéo et son

  • Pas de lecture automatique, ou alors sans son et avec un bouton pause.
  • Des carrousels qui ne défilent pas seuls.
  • Des commandes de lecture visibles et utilisables au clavier.

Vos questions sur l'épilepsie et les migraines

Octeasy protège-t-il des crises d'épilepsie ?

Non, et aucun widget ne le peut. Le profil fige les animations faites en CSS et met en pause les vidéos de la page lancées seules, mais une vidéo intégrée, un GIF ou une animation JavaScript peuvent continuer à clignoter. Seul un site qui respecte le seuil de trois flashs par seconde (WCAG 2.3.1) réduit vraiment le risque.

Comment désactiver les animations d'un site web ?

Sur un site équipé d'Octeasy, ouvrez le panneau et choisissez « Éviter les mouvements », ou activez seulement « Stopper les animations ». Partout ailleurs, activez « Réduire les animations » dans les réglages d'accessibilité de votre appareil : les sites qui respectent prefers-reduced-motion en tiennent compte.

Qu'est-ce que prefers-reduced-motion ?

C'est une requête CSS, définie par le W3C, qui indique au site que le visiteur a demandé à son appareil de réduire les mouvements non essentiels. Le site peut alors couper ses animations. Les WCAG la citent comme technique pour le critère 2.3.3, de niveau AAA. Encore faut-il que le site l'utilise.

Combien de flashs par seconde sont autorisés sur un site ?

Trois au plus. Le critère 2.3.1 des WCAG, de niveau A, demande que rien ne clignote plus de trois fois par seconde, sauf si le flash reste sous les seuils de flash général et de flash rouge. Selon l'Epilepsy Society, les fréquences de 3 à 30 hertz sont les plus souvent en cause.

Les animations d'un site peuvent-elles déclencher une migraine ?

Chez les personnes atteintes de troubles vestibulaires, le W3C cite les migraines parmi les réactions possibles à une animation ou une parallaxe, avec vertiges et nausées. La sensibilité à la lumière fait aussi partie des symptômes d'une crise de migraine, selon le NHS. Une page immobile et des couleurs douces peuvent être plus confortables.

Le profil arrête-t-il les vidéos et les GIF ?

En partie. Les vidéos de la page lancées automatiquement ou en boucle sont mises en pause une fois et leur son est coupé ; une vidéo que vous relancez continue. Une vidéo intégrée depuis YouTube ou un autre site et les GIF animés ne sont pas arrêtés : « Masquer les images » permet de les cacher.

Octeasy rend-il un site conforme au RGAA ?

Non. Octeasy est un outil de confort de lecture : il ne rend pas un site conforme au RGAA et ne remplace pas un audit. Le site doit lui-même éviter les flashs, permettre de mettre en pause ce qui bouge et respecter prefers-reduced-motion.

Le widget est-il gratuit pour le visiteur ?

Oui. Le visiteur ne paie rien et n'installe rien : toutes les fonctions de confort sont incluses dans chaque formule, même gratuite. Aucun cookie ; les réglages restent dans son navigateur, pour ce site, et le profil se désactive d'un clic.

Sources (7)
  1. W3C, WCAG 2.2, critère 2.3.1 Trois flashs ou sous le seuil (niveau A)
  2. W3C, WCAG 2.2, critère 2.2.2 Mettre en pause, arrêter, masquer (niveau A)
  3. W3C, WCAG 2.2, critère 2.3.3 Animation après interaction (niveau AAA) et technique C39
  4. W3C, Media Queries Level 5, prefers-reduced-motion
  5. Epilepsy Society, « Photosensitive epilepsy »
  6. NHS, « Migraine »
  7. NHS, « Motion sickness »

Contenu revu le .

Essayez « Éviter les mouvements » ici, puis installez-le sur votre site

Le visiteur a toutes les fonctions de confort, même avec la formule gratuite. Une ligne de script suffit.

Voir les formules

Les autres profils