1. Web
  2. Accessibilité
  3. Guides
  4. Prévenir crises et réactions physiques

Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

Accessibilité Web : crises et réactions physiques

Cet article présente les concepts permettant de rendre le contenu Web accessible aux personnes souffrant de troubles vestibulaires, ainsi que les méthodes pour mesurer et prévenir les contenus susceptibles d'entraîner des crises ou d'autres réactions physiques.

Vue d'ensemble

Crises

Les crises provoquées par la lumière sont appelées épilepsie photosensible. Un contenu qui scintille, clignote ou vacille peut déclencher une épilepsie photosensible. Les technologies Web utilisant la vidéo, les GIF animés, les PNG animés, les SVG animés, élément Canvas, ainsi que les animations CSS ou JavaScript, peuvent produire un contenu susceptible d'entraîner des crises ou d'autres réactions physiques incapacitant·e·s. Certains motifs visuels, en particulier les rayures, peuvent également provoquer des réactions physiques même s'ils ne sont pas animés. L'épilepsie photosensible est en réalité une forme d'« épilepsie réflexe » : des crises qui surviennent en réponse à un déclencheur. Dans le cas de l'épilepsie photosensible, les crises sont déclenchées spécifiquement par des lumières clignotantes, mais d'autres types d'épilepsies réflexes peuvent être provoqués par l'acte de lecture ou par des sons. Des motifs et des images peuvent aussi déclencher des crises.

Le fait que des images statiques puissent provoquer des crises et d'autres troubles est documenté dans des articles tels que Oscillations gamma et épilepsie photosensible (angl.), où il est noté « Certaines images visuelles, même en l'absence de mouvement ou de scintillement, peuvent déclencher des crises chez les patient·e·s souffrant d'épilepsie photosensible ». La Fondation de l'Épilepsie, dans son article Comprendre la photosensibilité, l'une des formes les plus complexes de l'épilepsie (angl.), évoque les images et motifs statiques : « Les motifs statiques ou en mouvement composés de bandes claires et foncées bien visibles ont le même effet que les lumières clignotantes en raison de l'alternance des zones sombres et lumineuses. » Le groupe de travail de l'Epilepsy Foundation of America parvient à « quantifier » un peu le problème : « Un motif susceptible de provoquer des crises contient des bandes clairement discernables, en nombre supérieur à cinq paires de bandes claires et foncées, quelle que soit leur orientation. » En plus des bandes, les motifs en damier sont également connus pour provoquer des crises photosensibles, selon Cedars-Sinai (angl.).

Bien que des images statiques puissent servir de déclencheurs, elles sont moins constantes. Le déclencheur bien établi et fort reste la lumière clignotante ou stroboscopique. Le Dr Selim Benbadis du Comprehensive Epilepsy Program de l'USF précise : « La seule chose vraiment documentée, ce sont les lumières clignotantes, qui peuvent déclencher des crises chez les patient·e·s souffrant d'épilepsie photosensible. Seuls quelques types d'épilepsie sont photosensibles, la grande majorité ne l'est pas. » En plus des crises provoquées par la photosensibilité, l'écoute de certains morceaux de musique peut aussi déclencher ce qu'on appelle des crises musicogènes, bien que ces crises semblent beaucoup plus rares. Pour une bonne introduction au sujet des crises musicogènes, consultez la page d'Epilepsy Ontario sur les crises musicogènes (angl.).

Les crises et l'épilepsie ne sont pas la même chose. Dans son article « Une nouvelle définition de l'epilepsie » (angl.), la Fondation de l'Épilepsie précise : « Une crise est un événement, l'épilepsie est la maladie impliquant des crises récurrentes et non provoquées. » Selon la page de la Fondation de l'Épilepsie « À quel point les crises sont-elles graves ? » (angl.), « La mort subite inattendue en épilepsie (SUDEP) est probablement la cause la plus fréquente de décès lié à la maladie chez les personnes épileptiques. Ce n'est pas fréquent mais c'est un problème réel et il faut en connaître le risque. »

En résumé, les crises peuvent bel et bien être fatales, et le rôle des développeur·euse·s et des concepteur·ice·s est crucial pour rendre le Web plus sûr pour les personnes sensibles aux déclencheurs photosensibles ou musicogènes.

Les crises peuvent être fatales, mais même celles qui sont « seulement » invalidantes peuvent être d'une gravité telle qu'elles rendent l'utilisateur·ice incapable d'agir. D'autres troubles, comme la désorientation, la nausée, les vomissements, etc., peuvent aussi être si graves que l'utilisateur·ice ne peut plus fonctionner. L'article de la Fondation de l'Épilepsie « Photosensibilité et crises » (angl.) propose une liste de déclencheurs pouvant provoquer des crises chez les personnes photosensibles : voici un extrait de cette liste :

  • Les écrans de télévision ou les moniteurs d'ordinateur à cause du scintillement ou du défilement des images.
  • Certains jeux vidéo ou émissions télévisées contenant des flashs rapides ou des motifs alternés de différentes couleurs.
  • Des lumières stroboscopiques intenses comme les alarmes visuelles incendie.
  • La lumière naturelle, comme la lumière du soleil, en particulier lorsqu'elle scintille sur l'eau, à travers les arbres ou les lamelles de stores vénitiens.
  • Certains motifs visuels, en particulier les rayures de couleurs contrastées.

Le même article précise que de nombreux facteurs doivent se combiner pour déclencher la réaction photosensible. Il est à noter que la longueur d'onde de la lumière est un facteur possible : les longueurs d'onde dans la partie rouge du spectre semblent particulièrement problématiques. L'article « Comprendre WCAG 2.0 : Trois flashs ou moins (seuil) » (angl.) indique de façon générale : « Les personnes souffrant de troubles épileptiques photosensibles peuvent avoir une crise déclenchée par un contenu qui clignote à certaines fréquences pendant plus de quelques flashs » et précise très explicitement : « Les personnes sont encore plus sensibles aux clignotements rouges qu'aux autres couleurs, c'est pourquoi un test spécial est prévu pour les clignotements rouges saturés. »

Il n'est même pas nécessaire d'avoir une image ou une vidéo pour provoquer des dommages. Un élément <div> configuré pour changer de couleur et de luminosité à haute fréquence, facilement réalisable avec JavaScript, peut causer de réels dommages. De plus, le scintillement peut survenir partout. Par exemple, les « spinners » couramment utilisés pour indiquer le chargement des pages peuvent facilement « scintiller » en tournant.

Des préoccupations supplémentaires existent pour les personnes ayant des troubles de la motricité. Par exemple, la page du Trace Research & Development Center sur l'outil d'analyse de l'épilepsie photosensible (angl.) indique que « Des crises photosensibles peuvent être provoquées par certains types de clignotements dans le contenu web ou informatique, y compris les survols de souris qui font rapidement clignoter de grandes zones de l'écran. »

Autres réactions physiques

La nausée, le vertige (ou étourdissement) et la désorientation sont des symptômes très peu spécifiques, associés à toutes sortes de maladies et pas particulièrement évocateurs de crises (sauf peut-être la désorientation, qui est observée lors de crises). Cependant, les crises ne sont pas la seule réponse physique indésirable possible face au clignotement, au scintillement, au clignement et à d'autres stimuli similaires. En 1997, un dessin animé japonais a présenté une « bombe virale » animée. Certain·e·s enfants regardant le dessin animé ont eu des crises, d'autres ont souffert de nausées, de tremblements et de vomissements de sang. Les réactions des enfants ont été si graves qu'ils·elles ont dû être transporté·e·s d'urgence à l'hôpital. Les troubles physiques listés ci-dessous sont toutes des conséquences possibles : chacune de ces réactions physiques peut être si grave qu'elle en devient incapacitante.

  • Crises
  • Troubles vestibulaires
  • Migraines
  • Nausées
  • Vomissements

Clignotement, clignement et scintillement

Bien que « clignotement » et « clignement » soient parfois utilisés de façon interchangeable, ils ne désignent pas la même chose. Selon le W3C, le clignement est un problème de distraction, tandis que le clignotement fait référence à un contenu qui apparaît plus de 3 fois par seconde et qui est suffisamment grand et lumineux. Section 508 (angl.) interdit les effets de scintillement avec une fréquence supérieure à 3 Hz (scintillements par seconde) et inférieure à 55 Hz. L'article de la Fondation de l'Épilepsie « Comprendre la photosensibilité, l'une des formes les plus complexes de l'épilepsie » (angl.) indique : « En général, les lumières clignotantes entre les fréquences de cinq à 30 flashs par seconde (Hertz) sont les plus susceptibles de déclencher des crises. Pour être en sécurité, le consensus recommande que les personnes photosensibles ne soient pas exposées à des flashs supérieurs à trois par seconde. » Cependant, pour certain·e·s, le clignotement ou le clignement peut provoquer des symptômes à moins de 3 Hz.

Il est important de noter que le clignotement et le clignement ne sont pas toujours néfastes. La NASA, dans son document intitulé « Clignotement, clignement et réponse temporelle » (angl.), indique que le clignotement et le clignement peuvent être des outils puissants pour attirer l'attention, comme c'est nécessaire pour les boutons d'alerte (ceci suppose que les utilisateur·ice·s peuvent toujours voir l'écran pendant que les éléments clignotent, ce qui n'est pas toujours le cas). Pour certain·e·s, les boutons clignotants avertissent aussi qu'ils doivent être utilisés avec parcimonie et précaution. En ce qui concerne la conception Web, les systèmes qui alertent les employé·e·s d'une entreprise d'un danger en « prenant le contrôle » de l'écran pour fournir un avertissement clignotant d'urgence doivent prendre en compte la fréquence, la taille et les variations de luminosité à l'écran lors de ces avertissements.

Clignotement et scintillement : comment le danger est-il quantifié ?

Selon l'article « Crises provoquées par la lumière et les motifs : consensus d'expert·e·s du groupe de travail de l'Epilepsy Foundation of America » (angl.), « Un flash est potentiellement dangereux s'il a une luminance ≥20 cd/m2, se produit à une fréquence ≥3 Hz et occupe un angle visuel solide ≥0,006 stéradian (environ 10% du champ visuel central ou 25% de la surface de l'écran à une distance de vision typique). »

Quelle est une distance de vision typique ? La recommandation retenue à l'époque était : « La zone peut être considérée comme s'appliquant à une surface >25% de celle d'un écran de télévision, en supposant une distance de vision standard ≥2 m (environ 9 pieds). » Depuis, nos écrans sont beaucoup plus proches de nous.

Certaines couleurs ou combinaisons de couleurs sont aussi importantes. L'article « Certaines couleurs sont plus susceptibles de provoquer des crises d'épilepsie, selon les chercheur·euse·s » (angl.) indique que « …les dynamiques cérébrales peuvent être modulées par certaines combinaisons de couleurs plus que d'autres ; par exemple, un stimulus clignotant rouge-bleu provoque une excitation corticale plus forte qu'un stimulus rouge-vert ou bleu-vert. »

Clignotement général et clignotement rouge

Les seuils WCAG 2.3.1 pour le clignotement général et le clignotement rouge (angl.) sont définis comme suit :

  • Un clignotement général est défini comme une paire de changements opposés de luminance relative (angl.) d'au moins 10% de la luminance relative maximale, où la luminance relative de l'image la plus sombre est inférieure à 0,80, et où « une paire de changements opposés » correspond à une augmentation suivie d'une diminution, ou à une diminution suivie d'une augmentation ;
  • Un clignotement rouge est défini comme toute paire de transitions opposées impliquant un rouge saturé.

Ces normes sont basées sur des recherches antérieures. En 2004, l'Epilepsy Foundation of America a organisé un atelier et élaboré un consensus (angl.) sur les crises photosensibles, indiquant : « Un flash est potentiellement dangereux s'il a une luminance d'au moins 20 cd/m2, se produit à une fréquence d'au moins 3 Hz et occupe un angle visuel solide d'au moins 0,006 stéradian (environ 10% du champ visuel central ou 25% de la surface de l'écran à une distance de vision typique). » La transition vers ou depuis un rouge saturé est importante et constitue un risque à elle seule : « Indépendamment de la luminance, une transition vers ou depuis un rouge saturé est également considérée comme un risque. »

Taille et distance

Quelle taille ? Ça dépend

La taille « relative » et la distance comptent toutes les deux. Selon PEAT (angl.), « La zone combinée des flashs qui se produisent simultanément ne doit pas dépasser le quart d'un rectangle de 341 × 256 pixels n'importe où sur la zone affichée de l'écran lorsque le contenu est visualisé à une résolution de 1024 × 768 pixels. »

L'importance du champ de vision est soulignée dans l'article sur la norme WCAG 2.3.1 : « L'écran 1024 × 768 est utilisé comme référence pour l'évaluation. Le bloc de 341 × 256 pixels représente un champ de vision de 10 degrés à une distance de vision typique. (Le champ de 10 degrés provient des spécifications originales et représente la portion centrale de la vision, où les personnes sont les plus sensibles aux stimuli lumineux.) »

Ce ratio de surface en pixels permet de calculer la taille relative, mais la distance compte aussi.

La distance est importante car elle affecte le champ de vision total. Lorsque les utilisateur·ice·s portent des masques oculaires pour jouer, le champ de vision est probablement entièrement enveloppé par l'écran. WebXR est une spécification ouverte qui permet de vivre la réalité virtuelle dans le navigateur, sur téléphone, ordinateur ou casque. Le problème des images clignotantes dans un masque oculaire est croissant, car le masque est très proche des yeux.

Les recherches indiquent généralement que l'utilisation de la VR serait en fait plus sûre que la consommation d'écran classique, grâce à des taux de rafraîchissement plus élevés. Comme le résume Fisher et al. 2022 (angl.) : « Les données limitées disponibles à ce jour ne soulèvent pas de préoccupations particulières concernant les crises liées à la technologie VR, bien que ce point de vue puisse évoluer avec l'expérience. Certains types de contenus VR, notamment les flashs lumineux, les motifs provocateurs ou les changements de couleur, devraient provoquer des crises, tout comme dans le monde réel. »

(À noter que certain·e·s utilisateur·ice·s ne peuvent pas voir avec des curseurs clignotants et peuvent avoir des migraines, des nausées ou de la désorientation, même si le curseur clignotant occupe une très petite zone de l'écran.)

Motifs et parallaxe

Les motifs géométriques contrastés, sombres et clairs, sont connus pour être problématiques : les rayures et les damiers sont les exemples les plus connus. Le groupe de travail de l'Epilepsy Foundation of America liste combien de paires de rayures claires et foncées sont susceptibles de provoquer des crises, et dans quelles conditions. Si le motif est fixe et droit, huit lignes est le maximum autorisé, mais s'il ondule, pas plus de cinq lignes.

Les effets de parallaxe peuvent provoquer de la désorientation. Utilisez-les avec précaution : si vous devez en utiliser, assurez-vous que l'utilisateur·ice puisse les désactiver.

« Un motif susceptible de provoquer des crises contient des rayures clairement discernables, en nombre supérieur à cinq paires de rayures claires et foncées, quelle que soit leur orientation. Lorsque les rayures claires et foncées d'un motif couvrent à l'œil, depuis la distance de vision minimale attendue, un angle solide de plus de 0,006 stéradian, que la luminance de la rayure la plus claire est supérieure à 50 cd/m2, et que le motif est affiché pendant au moins 0,5 s, alors le motif ne doit pas afficher plus de cinq paires de rayures claires et foncées si les rayures changent de direction, oscillent, clignotent ou inversent le contraste ; si le motif est fixe ou dérive doucement dans une seule direction, pas plus de huit rayures. »

Tout n'est pas connu, et même avec les métriques ci-dessus, d'autres facteurs entrent en jeu. Par exemple, passer d'une petite zone à une grande augmente la probabilité de réaction du cerveau, tout comme l'augmentation du contraste ou de la fréquence spatiale. On sait aussi, sans en comprendre la raison, que passer d'une orientation simple (par exemple, des rayures) à une orientation multiple (par exemple, le motif en damier qui apparaît lorsqu'on superpose deux séries de rayures perpendiculaires) affecte le cerveau.

Couleurs

Comprendre la couleur est important pour l'accessibilité. Voir Comprendre les couleurs et la luminance pour le rapport avec l'accessibilité Web et l'accessibilité en général.

La façon dont la couleur se rapporte à son arrière-plan — généralement en termes de contraste — et la rapidité avec laquelle la couleur change d'une image à l'autre dans une animation sont importantes. Pour en savoir plus, voir Trois flashs ou moins : comprendre le SC 2.3.1 (angl.).

Le cas particulier du rouge

Il a été démontré que certaines couleurs sont plus susceptibles de provoquer des crises d'épilepsie que d'autres (angl.). La physiologie et la psychologie humaines sont particulièrement affectées par la couleur rouge. Son pouvoir d'influence sur le comportement a même été observé chez les animaux.

Rouge saturé est un cas particulier et dangereux, et il existe des tests spécifiques pour cela. En plus de l'effet d'un environnement rouge sur la fonction cognitive des personnes ayant subi un traumatisme crânien, la couleur dans la longueur d'onde du rouge semble nécessiter une attention et des tests particuliers. Le Dr Gregg Vanderheiden, lors des tests avec l'outil Photosensitive Epilepsy Analysis Tool, a constaté que les taux de crises étaient bien plus élevés que prévu. Il a été observé que nous sommes beaucoup plus sensibles au clignotement du rouge saturé. (Voir la vidéo, The Photosensitive Epilepsy Analysis Tool (angl.).)

Websafe ne veut pas dire sans risque de crise

Notez que la couleur #990000 est considérée comme « websafe ». Cela ne signifie pas qu'elle est « sans risque de crise », mais simplement qu'elle peut être reproduite fidèlement par la technologie utilisée pour générer la couleur à l'écran.

Mesurer pour prévenir les risques

Mesurer le potentiel de risque est un bon point de départ. Les facteurs pris en compte dans les tests incluent la couleur, la luminosité, la taille, le contraste, et dans le cas des animations, la fréquence. WCAG 2.1 fournit des recommandations pour évaluer le contenu.

En août 2004, l'Epilepsy Foundation of America a organisé un atelier pour établir un consensus d'expert·e·s sur les crises photosensibles. Les informations suivantes, expertes et faisant autorité, proviennent de : Crises provoquées par la lumière et les motifs : consensus d'expert·e·s du groupe de travail de l'Epilepsy Foundation of America. (angl.)

Un flash est potentiellement dangereux s'il a une luminance ≥20 cd/m2, se produit à une fréquence ≥3 Hz et occupe un angle visuel solide ≥0,006 stéradian (environ 10% du champ visuel central ou 25% de la surface de l'écran à une distance de vision typique). Une transition vers ou depuis un rouge saturé est également considérée comme un risque. Un motif susceptible de provoquer des crises contient des rayures clairement discernables, en nombre supérieur à cinq paires de rayures claires et foncées, quelle que soit leur orientation. Lorsque les rayures claires et foncées d'un motif couvrent à l'œil, depuis la distance de vision minimale attendue, un angle solide de plus de 0,006 stéradian, que la luminance de la rayure la plus claire est supérieure à 50 cd/m2, et que le motif est affiché pendant au moins 0,5 s, alors le motif ne doit pas afficher plus de cinq paires de rayures claires et foncées si les rayures changent de direction, oscillent, clignotent ou inversent le contraste ; si le motif est fixe ou dérive doucement dans une seule direction, pas plus de huit rayures. Ces principes sont plus faciles à appliquer dans le cas de médias fixes, par exemple une émission télévisée préenregistrée, qui peut être analysée image par image, comparé aux médias interactifs.

Le « cd/m2 » fait référence à la candela par mètre carré. Pour le·la développeur·euse web, comment cela se rapporte-t-il aux mesures de couleur, de luminance et de saturation ?

La candela est une unité SI (Système international d'unités) d'intensité lumineuse. C'est un terme photométrique, et la photométrie concerne la mesure de la lumière visible perçue par l'œil humain. L'article Wikipédia sur « Candela par mètre carré » l'explique en termes familiers pour les développeur·euse·s : sur un écran, et dans l'espace RGB. C'est utile, car il existe une norme spécifique supposée utilisée sur les moniteurs, les imprimantes et Internet, qui est le sRGB (standard Red Green Blue).

En tant que mesure de la lumière émise par unité de surface, cette unité est fréquemment utilisée pour spécifier la luminosité d'un écran. La spécification sRGB pour les moniteurs vise 80 cd/m2. Les moniteurs calibrés devraient généralement avoir une luminosité de 120 cd/m2. La plupart des écrans LCD grand public ont une luminance de 200 à 300 cd/m2. Les téléviseurs haute définition vont de 450 à environ 1500 cd/m2.

À retenir : l'espace colorimétrique sRGB est un point commun entre la recherche, les outils d'évaluation et les développeur·euse·s, car il est facilement convertible depuis le code hexadécimal couramment utilisé.

Physiologie et psychologie humaines comme facteur

De nombreux·ses expert·e·s travaillent à quantifier et mesurer au mieux les types de contenus web pouvant servir de déclencheurs de crises. Cela dit, il ne faut pas oublier que la couleur relève autant de la perception humaine dans le cerveau que de la mesure de la lumière émise par un écran.

En plus des variations psychologiques, il existe aussi des différences physiologiques entre nous. Il y aura des variations et des nuances dans la façon dont un·e humain·e perçoit et réagit à la couleur et à la lumière. Par exemple, Tom Jewett, maître de conférences émérite en informatique à la Cal State University Long Beach, note à propos de la clarté dans l'échelle de couleur HSL (angl.) : « …La distinction entre les niveaux de clarté n'est pas réellement linéaire comme l'échelle HSL le suggère ; nous sommes beaucoup plus sensibles aux changements dans les valeurs claires qu'aux valeurs foncées. »

Il est important de comprendre que la lumière et ses mesures sont linéaires, mais la vision humaine et la perception humaine ne le sont pas. Les recherches et discussions se poursuivent sur la façon de relier la mesure machine de la lumière qui passe d'un écran d'ordinateur, à travers la distance jusqu'à l'œil humain, filtrée par la vision humaine, puis traitée par le cerveau humain.

Même l'âge et le sexe peuvent jouer un rôle. Selon l'article de la Fondation de l'Épilepsie, « Mieux comprendre la photosensibilité, l'une des conditions les plus complexes de l'épilepsie » (angl.), « Les enfants et les adolescent·e·s sont plus susceptibles que les adultes d'avoir une réponse anormale à la stimulation lumineuse, et la première crise induite par la lumière survient presque toujours avant 20 ans. » L'article poursuit avec cette statistique : « Les filles (60 %) sont plus souvent touchées que les garçons (40 %), bien que les crises soient plus fréquentes chez les garçons car ils sont plus susceptibles de jouer aux jeux vidéo. Les jeux vidéo contiennent souvent des stimulations lumineuses potentiellement provocatrices. »

Les tests utilisateur·ice·s sont très problématiques. Naturellement, personne ne souhaite soumettre une personne sujette aux crises à des tests utilisateur·ice·s. C'est dangereux. À ce titre, l'une des choses les plus éthiques que les développeur·euse·s et concepteur·ice·s puissent faire est d'utiliser des outils développés par des expert·e·s du domaine ayant travaillé en collaboration avec des médecins. À ce jour, deux outils sont couramment disponibles et ont été développés de façon éthique et professionnelle par des chercheur·euse·s et des médecins pour les films/vidéos : PEAT et le Harding Test.

Outil d'analyse de l'épilepsie photosensible (PEAT)

Le Trace Research and Development Center (angl.) a établi une référence avec son outil d'analyse de l'épilepsie photosensible (angl.), et a tenu à le rendre gratuit au téléchargement. PEAT peut aider les auteur·ice·s à déterminer si les animations ou vidéos de leur contenu sont susceptibles de provoquer des crises. Veuillez noter la restriction d'utilisation : L'utilisation de PEAT pour évaluer du contenu produit commercialement pour la télévision, le cinéma, le divertissement à domicile ou l'industrie du jeu est interdite. Utilisez le Harding Test ou d'autres outils pour un usage commercial.

Pour obtenir gratuitement l'outil d'analyse de l'épilepsie photosensible de l'Université du Maryland, rendez-vous sur le Trace Research & Development Center (angl.).

Outil d'analyse de l'épilepsie photosensible du College of Information Studies de l'Université du Maryland.

Le teste de Harding

Comme l'utilisation de PEAT est interdite à des fins commerciales, les programmateur·ice·s de télévision peuvent utiliser le teste de Harding sur HardingTest.com (angl.). Le Harding Test est une autre référence. Les programmateur·ice·s de télévision dans différents pays doivent réussir ce test avant de pouvoir diffuser, donc le groupe sur HardingTest.com (angl.) propose à la fois l'analyse et la certification du contenu vidéo.

Analyseur de flashs et de motifs Harding.

Solutions d'accessibilité pour les développeur·euse·s

Toutes les animations sont potentiellement dangereuses. En tant que concepteur·ice·s et développeur·euse·s, notre responsabilité est de veiller à ne pas nuire, intentionnellement ou non. Si vous devez inclure un élément susceptible de causer du tort, il est essentiel d'empêcher les utilisateur·ice·s de rencontrer accidentellement ce contenu dangereux, et de leur fournir des moyens de prévenir et de contrôler les animations afin de limiter les risques.

Ce que le·la développeur·euse web peut faire

Ne pas nuire

Directive WCAG 2.3 Crises et réactions physiques (angl.) propose un aperçu : « Ne concevez pas de contenu susceptible de provoquer des crises ou des réactions physiques ». N'incluez pas d'animation qu'un·e utilisateur·ice ne peut pas contrôler. N'utilisez pas de motifs connus pour poser problème. Si vous devez inclure un gif ou png clignotant, enregistrez-le sous forme de vidéo afin que des contrôles soient disponibles pour l'utilisateur·ice. Donnez à l'utilisateur·ice la possibilité d'éviter, d'arrêter ou de rendre le contenu moins nocif.

Comprendre la malveillance

En tant que développeur·euse ou concepteur·ice, demandez-vous si un contenu clignotant est vraiment nécessaire sur votre page web. Même bien géré, il existe des personnes qui peuvent télécharger un contenu problématique depuis votre site et l'utiliser à des fins malveillantes. On pense que la première tentative documentée d'utiliser des ordinateurs pour provoquer des dommages physiques via l'animation a eu lieu le samedi 22 mars 2008 : le site de l'Epilepsy Foundation a été piraté via des publications contenant des images clignotantes et des liens prétendument utiles. Des utilisateur·ice·s souffrant de troubles vestibulaires venus chercher de l'aide sur le site ont été affecté·e·s.

Des procédures juridiques sont en cours après que le journaliste Kurt Eichenwald, épileptique connu, a subi une crise après avoir reçu un gif animé en décembre 2016 : le gif clignotant portait le message : « Tu mérites une crise pour tes publications ».

Contrôler l'exposition, contrôler l'accès

Contrôler l'exposition à la page est essentiel pour éviter qu'une personne sujette aux crises ne soit exposée accidentellement. Les WCAG indiquent qu'un seul objet peut rendre toute la page inutilisable.

Si vous pensez qu'une image ou une animation peut provoquer des crises, contrôlez l'accès en affichant d'abord un avertissement sur le contenu, puis en le plaçant à un endroit où l'utilisateur·ice doit y accéder volontairement, par exemple en cliquant sur un bouton, ou en veillant à ce que le lien vers la page comporte un avertissement distinct et évident.

Envisagez de définir des directives d'exploration pour les moteurs de recherche afin d'indiquer qu'ils ne doivent pas inclure de ressources potentiellement dangereuses dans leurs index. Vous pouvez le faire en utilisant des métadonnées dans un élément <meta name="robots"> avec des règles restrictives comme noindex, nofollow. En n'indexant pas la page (noindex) et en ne suivant pas les liens de la page (nofollow), vous réduisez la probabilité que des utilisateur·ice·s la trouvent via une recherche :

html
<html lang="fr">
  <head>
    <title>…</title>
    <meta name="robots" content="noindex, nofollow" />
  </head>
</html>

Pour les ressources non HTML, vous pouvez définir des directives d'exploration dans l'en-tête HTTP X-Robots-Tag :

http
X-Robots-Tag: noindex

GIFs animés

Tous les types d'images sont potentiellement dangereux, mais les GIFs animés méritent une mention spéciale en raison de leur omniprésence et du fait que la vitesse d'animation est contrôlée dans le fichier GIF lui-même.

Détecter si un GIF est animé

Avec les GIFs animés, assurez-vous que l'animation est inactive jusqu'à ce que l'utilisateur·ice choisisse de l'activer. Par exemple, l'utilisateur·ice doit appuyer sur un bouton ou cocher une case pour démarrer l'animation.

Vidéos

Comme pour les GIFs animés, l'utilisateur·ice doit appuyer sur un bouton ou cocher une case pour démarrer l'animation. Il existe de nombreuses façons de procéder, comme NE PAS ajouter l'attribut autoplay à <video controls>, ou définir animation-play-state sur paused comme état initial. Pour voir un exemple puissant de la façon dont cela fonctionne, consultez l'article de Kirupa : « Activer ou désactiver les animations » (angl.). Kirupa utilise animation-play-state en combinaison avec transition, transform et prefers-reduced-motion pour créer une expérience très accessible sous le contrôle de l'utilisateur·ice.

animation-play-state est une propriété CSS qui définit si une animation est en cours ou en pause.

css
div {
  animation-play-state: paused;
}

Les transitions CSS peuvent être utilisées pour définir la durée à zéro pour l'étape initiale de l'animation.

css
div {
  transition-duration: 0s;
}

Permettre à l'utilisateur·ice d'arrêter les animations

Un élément <video> sans attributs ne se lance pas automatiquement et n'a pas de contrôles. Veillez à ajouter l'attribut controls à l'élément vidéo pour que l'utilisateur·ice puisse arrêter la vidéo ainsi que la démarrer.

html
<video controls>
  <source src="video.mp4" type="video/mp4" />
  <source src="video.ogg" type="video/ogg" />
  Votre navigateur ne prend pas en charge la balise vidéo.
</video>

S'assurer que les contrôles sont disponibles par programmation

La propriété HTMLMediaElement.controls reflète l'attribut HTML controls, qui contrôle l'affichage des contrôles de l'interface utilisateur pour la lecture du média.

Vidéo

Pour garantir qu'une vidéo dispose de contrôles accessibles à l'utilisateur·ice, ajoutez le mot controls aux éléments vidéo et audio HTML.

<video controls>

html
<video controls>
  <source src="myVideo.mp4" type="video/mp4" />
  <source src="myVideo.webm" type="video/webm" />
  <p>
    Votre navigateur ne prend pas en charge la vidéo HTML. Voici un
    <a href="myVideo.mp4">lien vers la vidéo</a> à la place.
  </p>
</video>
Audio

En appliquant le même exemple à l'audio :

<audio controls>

html
<audio controls>
  <source src="myAudio.ogg" type="audio/ogg" />
  <source src="myAudio.mp3" type="audio/mpeg" />
  <p>
    Votre navigateur ne prend pas en charge l'élément audio. Voici un
    <a href="myAudio.mp3">lien vers l'audio</a> à la place.
  </p>
</audio>
Audio dans la vidéo

Notez que l'audio dans les vidéos peut être contrôlé par l'attribut muted, même si le contenu se trouve dans l'élément <video> plutôt que dans <audio>. Cet exemple provient de la section sur l'attribut muted (angl.) de la norme HTML Living Standard. Il explique que la vidéo se lance automatiquement en sourdine jusqu'à ce que l'utilisateur·ice décide d'activer le son.

html
<video src="adverts.cgi?kind=video" controls autoplay loop muted></video>

Contrôler la vitesse

Cela semble évident, mais comme il existe de nombreux types MIME, les mécanismes de gestion varient considérablement, et il n'existe donc pas de solution universelle. Cela est d'autant plus compliqué que la classification des fichiers influence leur gestion. Par exemple, le format .gif est généralement considéré comme une image, mais il est aussi vu comme un format vidéo dans certains milieux en raison de sa capacité à être animé. Pour une liste complète des types de médias, consultez la page des types de médias sur IANA.org (angl.).

Les méthodes pour les détecter ne sont pas triviales. Vous pouvez consulter la norme MIME Sniffing (angl.) sur whatwg.org. Presque tous les types d'images peuvent être animés ; la façon dont elles le sont varie, et donc le contrôle de l'animation aussi.

Types de fichiers couramment animés

  • Bitmap : Animation
  • Canvas : Le tutoriel MDN sur Canvas propose une excellente section sur les animations de base. setInterval() est couramment utilisé pour l'animation Canvas, mais il est aussi intéressant de voir comment il interagit avec le rafraîchissement de l'écran. Voir l'article « Contrôler les fps avec requestAnimationFrame ? » (angl.) qui discute des détails de l'implémentation de requestAnimationFrame en lien avec le rafraîchissement de l'écran.
  • GIFs (Raster) : Difficiles à contrôler car la gestion de l'animation se fait dans le fichier gif lui-même. Pour contrôler la vitesse des GIFs, voir « G152 : Arrêter le clignotement des images gif animées après n cycles (dans les 5 secondes) » (angl.) du W3C. Un excellent article Stack Overflow sur le sujet : « Peut-on contrôler l'animation GIF avec JavaScript ? » (angl.)
  • GIFV (Raster) : Considéré comme une variante vidéo du GIF. Le format n'est pas standardisé et doit référencer un vrai fichier vidéo (par exemple, un fichier .webm) qui doit exister ailleurs.
  • JPG (Raster)
  • MNG (Raster) : Multiple-image Network Graphics est un format de fichier graphique pour les images animées. Aussi considéré par certains comme un format vidéo.
  • PNG, APNG (Raster) : Portable Network Graphics et Animated Portable Network Graphics peuvent être animés.
  • SVGs (Vectoriel) : Le document MDN « SVG : Scalable Vector Graphics » précise que « SVG est une norme Web ouverte basée sur du texte. Elle est explicitement conçue pour fonctionner avec d'autres normes web telles que CSS, DOM et SMIL. » Les SVGs peuvent être utilisés comme image, par exemple : <img src="example.svg" alt="Ceci est une image utilisant un svg comme source">. Cela signifie que l'apparence et l'animation SVG peuvent être contrôlées via les keyframes et animations CSS. Pour l'interaction avec JavaScript, voir les documents MDN sur Interfaces SVG et Appliquer des effets SVG au contenu HTML.
  • Voxel (Raster) : Les graphismes raster tridimensionnels voxel sont utilisés dans les jeux vidéo et l'imagerie médicale.

Le texte peut aussi être animé

Les traductions et transformations peuvent animer le texte dans une div, et causer du tort. Un texte en mouvement peut provoquer des crises pour les mêmes raisons que les images animées, donc évitez d'animer votre texte. Il est conseillé d'éviter d'utiliser du texte en mouvement, car de nombreux lecteurs d'écran ne peuvent pas le lire et c'est une mauvaise expérience utilisateur même pour celles et ceux sans problème de vision ou vestibulaire.

CSS pour l'animation

Dans la feuille de style ou dans l'élément HTML <style>, de nombreuses options peuvent se combiner pour créer une expérience puissante pour l'utilisateur·ice. La propriété animation mentionnée plus haut est en fait un raccourci pour toutes les propriétés d'animation, dont :

  • animation-play-state
  • animation-duration a une valeur de <time> ; c'est la durée d'un cycle d'animation. Elle peut être spécifiée en secondes (s) ou millisecondes (ms). Une valeur par défaut de 0s indique qu'aucune animation ne doit se produire.
  • animation-timing-function

La propriété animation est déjà puissante seule, mais combinée à d'autres propriétés et requêtes comme prefers-reduced-motion, elle permet de mettre en place un ensemble d'options très utiles pour l'utilisateur·ice. Définir les propriétés animation-duration et transition-duration sur une durée courte plutôt que sur animation: none et transition: none permet d'éviter les problèmes si une dépendance nécessite que l'animation s'exécute.

Animation JavaScript

JavaScript est souvent utilisé pour contrôler les éléments HTML <canvas> et SVG. La plupart du code JavaScript qui s'applique à la vidéo HTML s'applique aussi à l'audio. HTMLMediaElement.playbackRate permet de contrôler la vitesse de lecture pour la vidéo et l'audio. Une valeur de 1.0 est la vitesse normale ; 0.5 est la moitié de la vitesse, 2.0 est deux fois plus rapide. Un nombre négatif lit la vidéo ou l'audio à l'envers. Définissez la propriété playback rate : HTMLMediaElement.playbackRate = playbackSpeed.

document.getAnimations() est une technologie expérimentale, et inclut Animations CSS, Transitions CSS et Web Animations. La page MDN sur Document.getAnimations() propose l'exemple de code suivant pour ralentir toutes les animations d'une page à la moitié de la vitesse :

js
document.getAnimations().forEach((animation) => {
  animation.playbackRate *= 0.5;
});

Sources d'images pour l'animation

L'une des méthodes les plus simples consiste à partir d'une image existante, à l'utiliser comme source, puis à l'animer. Vous pouvez utiliser des GIFs, JPGs, PNGs, SVGs et autres types de fichiers comme source d'image, tant qu'ils sont autorisés dans votre environnement. Les SVGs sont souvent interdits pour des raisons de sécurité. Le document MDN Animations de base propose d'excellents exemples, utilisant plusieurs sources d'images pour le soleil, la terre et la lune, et plusieurs méthodes canvas pour contrôler la vitesse et l'animation de la terre autour du soleil, et de la lune autour de la terre. Utilisez le codepen associé à ce tutoriel pour ajuster ctx.rotate et voir l'effet sur l'animation.

Si vous devez absolument utiliser une animation clignotante…

Assurez-vous qu'elle dispose d'un contrôle. Assurez-vous qu'elle est désactivée lors de la première visite, et que l'utilisateur·ice doit choisir de voir l'animation.

Un exemple de format sans contrôle utilisateur est le fichier gif. La vitesse d'animation est contrôlée dans l'image gif elle-même. Convertir un gif animé en vidéo permet d'ajouter des contrôles et donne du pouvoir à l'utilisateur·ice. Il existe de nombreux convertisseurs gratuits en ligne, comme EZGif (angl.) et GIF to MP4 (angl.).

Prévenir les surprises

Prévenez les utilisateur·ice·s de ce qui va se passer avant qu'ils·elles ne cliquent sur un lien. Décrivez l'animation à venir. Voir WCAG 2.2 Critère de succès 3.2.5 Changement sur demande (angl.).

Garder petit

Si vous devez absolument avoir du clignotement, gardez-le petit. En général, limitez la taille du flash à une zone d'environ 341 par 256 pixels ou moins. Cette taille suppose une distance d'affichage typique. Comme mentionné plus haut, cette taille peut être trop grande si l'image est vue de près, comme dans un casque VR. WebVR est une spécification ouverte qui permet de vivre la VR dans le navigateur. WebVR peut être utilisé sur téléphone, ordinateur ou casque.

Si vous concevez pour un jeu ou une VR utilisant un masque oculaire, ou PEUT être utilisé par un masque oculaire, comme dans Firefox Reality (navigateur pour la réalité virtuelle), veillez à ce que le rectangle soit bien plus petit que 341 par 256 pixels, car l'image est beaucoup plus proche des yeux de l'utilisateur·ice.

Réduire le contraste

Normalement, un contraste élevé est une bonne chose en accessibilité. Plus le contraste entre la couleur du texte et le fond (appelé rapport de contraste de luminosité, selon la page Couleurs à bon contraste (angl.) de W3.org), plus le contenu est lisible. Les utilisateur·ice·s malvoyant·e·s apprécient particulièrement les efforts pour garantir un contraste élevé. Mais pour le contenu animé, réduire le contraste permet de diminuer le risque de crises. Diminuez le rapport de contraste si trois flashs en une seconde sont détectés.

Le rapport de contraste est défini dans WCAG 2.2 (angl.) comme suit :

rapport de contraste

(L1 + 0.05) / (L2 + 0.05), où

Il est préférable d'ajuster le contraste avant de publier sur le web. Pour les vidéos et GIFs animés, la suite Adobe est une excellente ressource pour les images traditionnelles. Pour les images, un outil en ligne est disponible : Brightness and contrast online (angl.). Si vous créez des GIFs animés, commencez par un GIF à faible contraste.

JavaScript permet aussi de réduire le contraste dynamiquement. Voici un exemple de code issu de la section « Exemple : définir la couleur de fond d'un paragraphe » du document MDN Parcourir un tableau HTML avec JavaScript et les interfaces DOM. Notez que la couleur est décrite dans l'espace colorimétrique RGB.

Contenu HTML (lien vers la page source)

html
<body>
  <input type="button" value="Définir la couleur de fond du paragraphe" />
  <p>salut</p>
  <p>bonjour</p>
</body>

Contenu JavaScript (lien vers la page source)

js
function setBackground() {
  // maintenant, récupérez tous les éléments p du document
  const paragraphs = document.getElementsByTagName("p");

  // récupérez le deuxième paragraphe de la liste
  const secondParagraph = paragraphs[1];

  // définissez le style en ligne
  secondParagraph.style.background = "red";
}

document.querySelector("input").addEventListener("click", setBackground);

Éviter les rouges saturés pour le contenu clignotant

Comme mentionné plus haut, l'Epilepsy Foundation of America a organisé un atelier en août 2004 pour établir un consensus d'expert·e·s sur les crises photosensibles. Parmi les résultats : « Un flash est dangereux s'il a une luminance d'au moins 20 cd/m2, se produit à une fréquence d'au moins 3 Hz, et occupe un angle visuel solide d'au moins 0,006 stéradian (environ 10 % du champ visuel central ou 25 % de la surface de l'écran à une distance d'affichage typique). Une transition vers ou depuis un rouge saturé est aussi considérée comme un risque. » Il·Elle·s notent aussi dans ce consensus : « Indépendamment de la luminance, une transition vers ou depuis un rouge saturé est aussi considérée comme un risque. »

Proposer des styles CSS alternatifs

Sachant que beaucoup d'animations et de clignotements peuvent être contrôlés via CSS, il est important d'explorer des moyens de proposer des options alternatives aux utilisateur·ice·s, et de rendre le contrôle de ces options pratique et visible.

Feuilles de style alternatives

Les navigateurs modernes affichent les CSS alternatifs disponibles dans les feuilles de style alternatives si les utilisateur·ice·s savent où les chercher. Parfois, les styles alternatifs sont révélés via le menu Affichage, parfois dans les paramètres, parfois les deux. Tous·tes les utilisateur·ice·s ne savent pas chercher ces options via le navigateur ou les paramètres, il est donc utile de proposer des boutons ou liens évidents pour changer le style. Cela ne gêne pas la capacité du navigateur à lire les feuilles de style alternatives, ni la possibilité pour l'utilisateur·ice de définir ses préférences dans les paramètres.

Il est important de savoir que certain·e·s utilisateur·ice·s, comme celles et ceux qui dépendent de systèmes de reconnaissance vocale, comptent souvent sur les boutons et liens classiques car leur handicap les empêche d'utiliser une souris ou de profiter des événements tactiles sur tablette.

Les moyens courants d'inclure des feuilles de style alternatives dans vos documents HTML sont d'utiliser l'élément <link> et @import.

Utilisez l'élément <link> avec les attributs rel="alternate stylesheet" et pour le titre, title="…" dans la section <head> de la page web.

html
<head>
  <title>Page d'accueil</title>
  <link href="main.css" rel="stylesheet" title="Style par défaut" />
  <link
    href="alternate1.css"
    rel="alternate stylesheet"
    title="Style alternatif 1" />
  <link
    href="alternate2.css"
    rel="alternate stylesheet"
    title="Style alternatif 2" />
</head>

@import est aussi une façon d'intégrer des feuilles de style, mais elle est moins bien prise en charge que l'élément <link>.

css
@import "alternate1.css";
@import "alternate2.css";

En utilisant des feuilles de style alternatives (n'oubliez pas d'ajouter les titres), vous permettez aux utilisateur·ice·s de choisir leur style via le navigateur.

Changement de style dynamique

Un problème avec le fait de compter sur le navigateur pour révéler les styles alternatifs est que tous·tes les utilisateur·ice·s ne sont pas assez technophiles pour les découvrir. Ou, à cause de leur handicap, ne peuvent pas le faire. Les boutons ou liens rendent les options visibles pour de nombreux utilisateur·ice·s reconnaissant·e·s. Il existe de nombreuses façons d'ajouter des boutons de bascule pour permettre à l'utilisateur·ice de changer de feuille de style. Cela dit, l'utilisation de feuilles de style alternatives n'est pas la seule option. Une autre consiste à manipuler le style de la page elle-même. Selon le document MDN Utiliser des informations de style dynamiques, « dans la mesure du possible, il est préférable de manipuler dynamiquement les classes via la propriété className, car l'apparence finale de tous les points d'accroche de style peut être contrôlée dans une seule feuille de style ». Un des meilleurs exemples est la page du W3C « C29 : Utiliser un sélecteur de style pour proposer une version alternative conforme » (angl.).

Cas extrêmes : alternatives texte seul

Une feuille de style alternative qui empêche l'affichage des images est facile à créer. C'est une solution radicale, mais parfois nécessaire pour les enseignant·e·s et autres agent·e·s publics qui doivent servir des personnes très sensibles. Ces agent·e·s peuvent demander à leurs développeur·euse·s de créer une feuille de style spéciale utilisant display: none. Voici comment faire en CSS :

css
img {
  display: none;
}

Profiter des requêtes média avec <style>

En configurant des requêtes média, vous permettez à l'utilisateur·ice de contrôler l'affichage via le navigateur ou le système d'exploitation. Voir le document MDN Accessibilité : ce que les utilisateur·ice·s peuvent faire pour naviguer plus en sécurité pour plus de détails sur l'accès aux contrôles.

prefers-reduced-motion

La prise en charge de prefers-reduced-motion dans les navigateurs modernes progresse.

css
@media screen and (prefers-reduced-motion: reduce) {
}
@media screen and (prefers-reduced-motion) {
}

Pour voir un bon exemple d'utilisation de prefers-reduced-motion, consultez le document MDN prefers-reduced-motion, ou l'exemple ci-dessous tiré de la section « Nouveautés de Chrome 74 » (angl.).

css
button {
  animation: vibrate 0.3s linear infinite both;
}

@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}

prefers-color-scheme

Cela peut être utile si l'API de lumière ambiante n'est pas disponible. La prise en charge progresse.

css
@media (prefers-color-scheme: dark) {
  /* ajuster les styles pour le mode sombre */
}

Window.matchMedia()

Un outil puissant est disponible pour les développeur·euse·s via Window.matchMedia(). Une excellente ressource est le document MDN sur Window.matchMedia().

Fonction de mise à jour média

Plus l'écran est rafraîchi souvent, plus il paraît stable à l'œil humain, et moins il « scintille ». La grande majorité des technologies modernes rafraîchissent à un taux qui ne pose pas de problème de photosensibilité. Cependant, tout le monde n'a pas les moyens d'acheter la technologie la plus récente : les ordinateurs anciens ou peu puissants peuvent avoir des taux de rafraîchissement faibles. Fiche technique AbilityNet (novembre 2015) Ordinateurs et épilepsie (angl.) détaille les taux de rafraîchissement.

Un très vieil article, Tech Republic « Épilepsie et scintillement d'écran CRT/LCD » (angl.), avait une réponse intéressante sur les taux de rafraîchissement en Hz :

  • « Cet effet est perceptible, et documenté, jusqu'à 70 Hz. »
  • « Ces études semblent indiquer qu'il faut éviter les taux de rafraîchissement inférieurs à 70 Hz, et utiliser un taux non divisible par 10. »

Eric Bailey, de CSS-Tricks, a trouvé une utilisation innovante de la fonction de mise à jour, qui, combinée à animation-duration ou transition-duration, permet de conclure à un taux imperceptible à l'œil humain. Autrement dit, les techniques d'Eric résolvent le problème du taux de rafraîchissement. Le CSS ci-dessous est tiré de l'article CSS-Tricks « Revoir prefers-reduced-motion, la requête média de mouvement réduit » (angl.).

css
@media screen and (prefers-reduced-motion: reduce), (update: slow) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important; /* Merci à Nick/cssremedy (https://css-tricks.com/revisiting-prefers-reduced-motion/#comment-1700170) */
    transition-duration: 0.001ms !important;
  }
}

La fonction média update permet d'interroger la capacité du périphérique de sortie à modifier l'apparence du contenu une fois rendu. Elle a les valeurs none, slow et fast.

Fonctionnalités expérimentales et en développement

Media Queries Niveau 5

EnvironmentMQ (prévu dans Media Queries Niveau 5)

light-level

light-level (angl.) a trois valeurs valides : dim, normal et washed. La spécification évite de définir ces niveaux en lux, car les appareils avec capteur de lumière ajustent généralement la luminosité automatiquement. Les spécifications notent aussi la différence de technologie, comme l'e-ink, lisible en plein jour, versus les cristaux liquides, qui ne le sont pas.

environment-blending

D'après le document de travail du W3C Media Queries Niveau 5 : « La fonction média environment-blending (angl.) permet d'interroger les caractéristiques de l'affichage de l'utilisateur·ice pour que l'auteur·ice puisse ajuster le style du document. L'auteur·ice peut choisir d'adapter les visuels et/ou la mise en page selon la technologie d'affichage pour améliorer l'attrait ou la lisibilité. »

Fonctions média de préférence utilisateur (prévu dans Media Queries Niveau 5)

User Preference Media Features (angl.) dans le brouillon Media Queries Niveau 5 du W3C (angl.) sont prometteuses pour donner le contrôle aux utilisateur·ice·s. Voici quelques points clés :

inverted-colors

Selon la section User Preference Media Features (angl.), « La fonction média inverted-colors (angl.) indique si le contenu est affiché normalement ou si les couleurs sont inversées ».

forced-colors

Dans forced-colors-mode (angl.), l'agent utilisateur impose la palette de couleurs préférée de l'utilisateur·ice sur la page, remplaçant les couleurs choisies par l'auteur·ice. D'après le document de travail du W3C Media Queries Niveau 5 sur forced-colors : « La fonction média forced-colors permet de détecter si l'agent utilisateur a activé un mode couleurs forcées (angl.) où il impose une palette de couleurs limitée choisie par l'utilisateur·ice sur la page ». L'utilisateur·ice doit être informé·e de cette capacité, et elle doit fonctionner avec la valeur appropriée pour la requête média prefers-color-scheme.

light-level

D'après le document de travail du W3C Media Queries Niveau 5 sur light-level : « La fonction média light-level (angl.) permet d'interroger le niveau de lumière ambiante dans lequel l'appareil est utilisé, pour permettre à l'auteur·ice d'adapter le style du document en conséquence. » Cela sera très utile pour celles et ceux qui ont des problèmes de motricité ou des difficultés cognitives, qui ne trouvent pas le bon « bouton » pour changer les réglages de l'écran.

prefers-contrast

D'après le document de travail du W3C Media Queries Niveau 5 sur prefers-contrast : « La fonction média prefers-contrast permet de détecter si l'utilisateur·ice a demandé au système d'augmenter ou de diminuer le contraste entre les couleurs adjacentes. Par exemple, beaucoup ont du mal à lire un texte dont le contraste avec le fond est faible et préfèrent un contraste plus élevé. » Parfois, trop de contraste peut créer un effet de halo autour du texte et réduire la lisibilité. Mettre le contraste sous le contrôle de l'utilisateur·ice est un vrai plus pour l'accessibilité.

Interface MediaQueryList

La section 4.2 des brouillons CSSWG.org s'intègre à la boucle d'événements (angl.) définie dans HTML. HTML (angl.) pour l'objet MediaQueryList (angl.). Voir le document MDN MediaQueryList pour plus d'informations.

Aide et support à la personnalisation

La propriété literal est issue de WAI-Adapt : Aide et support (angl.).

Exigence : Certain·e·s utilisateur·ice·s ne comprennent pas le texte ou les icônes non littéraux comme les métaphores, idiomes, etc. La propriété literal permet d'identifier le texte ou les images comme non littéraux et autorise l'auteur·ice à expliquer le texte ou les images non littéraux aux utilisateur·ice·s.

Voir aussi

MDN

Couleur

Discussions

Épilepsie et crises

GPII

ISO

  • IEC 61966-2-2:2003(en) (angl.) Systèmes et équipements multimédias — Mesure et gestion des couleurs — Partie 2-2 : Gestion des couleurs — Espace couleur RGB étendu — scRGB

Outil d'analyse de l'épilepsie photosensible

Avec l'outil Harding, il est généralement reconnu comme l'un des deux « standards d'or » pour l'analyse des flashs.

W3C

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content