web-dev-qa-db-fra.com

Défilement et accessibilité de la parallaxe

Je répondais juste à cette question Existe-t-il des données réelles sur les sites Web utilisant le défilement de parallaxe? et plus je lis sur le défilement de parallaxe, je me demandais si les sites de parallaxe étaient accessibles car le contenu continuait à changer et les utilisateurs avec une courte durée d'attention peut avoir du mal à utiliser le site. De plus, la différence de contenu entre l'arrière-plan et l'avant-plan peut être source de confusion pour les utilisateurs utilisant des lecteurs d'écran.

Existe-t-il des recherches pour savoir si le défilement de parallaxe est accessible et s'il y a des inconvénients à utiliser le défilement de parallaxe en ce qui concerne la conformité accessible?

Existe-t-il également des meilleures pratiques sur la façon de rendre les sites de parallaxe accessibles?

13
Mervin

Plusieurs problèmes d'accessibilité viennent immédiatement à l'esprit, bien que je pense que chacun est un problème qui peut être surmonté avec une bonne conception et un bon développement. D'une manière générale, une offre fonctionnellement saine et graphiquement attrayante pourrait abriter de sérieux problèmes d'accessibilité sous le capot et la focalisation déséquilibrée sur ces processus de développement cognitifs lourds pourrait conduire à une négligence de l'accessibilité.

Je n'ai trouvé aucune étude évaluée par des pairs, mais j'ai arrondi certains points, avec des articles de sauvegarde provenant de sources fiables et une déduction de bon sens.

Problèmes de contraste des couleurs . Si votre arrière-plan se déplace indépendamment de votre texte, vous risquez de superposer deux couleurs difficiles à discerner ou qui se heurtent d'une manière qui blesse les yeux. Le problème est aggravé par des arrière-plans graphiques complexes. Vous aurez des problèmes plus importants avec les utilisateurs daltoniens qu'avec un site plat et devrez vérifier minutieusement toutes les positions de défilement pour vous assurer que le contenu n'apparaît pas dans un endroit où il est difficile à lire

La position et les éléments du contenu affecteront des choses comme le focus clavier et les lecteurs d'écran. Vous ne voulez pas que chaque image décorative dans un arrière-plan compliqué annonce qu'elle est présente à un lecteur d'écran ou qu'un utilisateur avec un clavier se perde la tabulation à travers des éléments arbitraires.

La navigation devient plus délicate dans les sites paralax quand on considère la profondeur/largeur du contenu. Le défilement automatique lorsqu'un élément de navigation est cliqué est une bonne solution javascript, mais il est essentiel que d'autres méthodes de navigation soient fournies pour rendre le site facile à parcourir par tous les utilisateurs. Les balises d'ancrage humbles pour les lecteurs d'écran et la navigation fixe pour éviter la fatigue du défilement dans les mains anciennes ou désactivées sont de bonnes options.

Le mouvement impliqué est également une préoccupation. De nombreux sites paralax défilent de manière assez étrange, semblant saccadés et en fait assez difficiles à regarder pendant le défilement. Il est facile de faire bouger quelque chose, mais faire bouger quelque chose en douceur dans de nombreux contextes est beaucoup plus difficile. Se concentrer sur les éléments est également plus difficile s'ils se déplacent et se concentrer de "page" à page "est plus difficile si les éléments ne sont pas à des endroits cohérents. Toute étude d'eye-tracking UX le prouvera. Le lien montre comment les yeux suivent généralement le contenu d'un site Web.

http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

La compatibilité du navigateur et les problèmes de mobile doivent également être pris en compte. Les grandes tailles de page et l'impossibilité d'utiliser des sites paralax sur les téléphones mobiles sont deux éléments signalés par de nombreux articles sur le sujet.

http://www.omobono.com/blog/powerful-storytelling-one-page-websites-and-parallax-scrollinghttps://uxmag.com/articles/the- effet-hypnotique-de-parallaxe-scrolling-and-how-it-impacts-user-experience

Le fait est que le modèle de conception paralax n'est pas utilisable de manière inhérente de la même manière qu'un modèle de conception axé sur l'expérience utilisateur et se prête à des techniques qui nécessitent une réflexion supplémentaire pour fournir de manière accessible. Il est donc facile, en particulier si l'on considère les coûts de développement et de conception supplémentaires, de négliger la richesse des utilisateurs, pas nécessairement handicapés, qui ont une sorte de problème d'accessibilité avec les sites Web.

9
Toni Leigh

Je pense que la meilleure réponse à cette question serait de mieux comprendre ce qu'est la "conformité à l'accessibilité". Voir le guide de rédaction à http://www.w3.org/TR/wai-aria-practices/#presentation_role . En particulier, certains textes applicables aux effets visuels sont

Les auteurs consacrent beaucoup d'efforts à l'apparence de leurs pages Web, et cela est particulièrement vrai dans le cas des applications Web scriptées. À cette fin, les auteurs utilisent divers éléments uniquement à des fins de présentation visuelle. Par exemple, les éléments <img> sont utilisés pour l'espacement et la décoration; et <table> sont utilisés pour créer une disposition basée sur des colonnes. Les éléments strictement utilisés pour la présentation sont sémantiquement neutres et non pertinents en termes d'accessibilité. Il est nécessaire de marquer ces éléments comme étant de présentation afin qu'ils n'apparaissent pas dans l'arborescence accessible créée par l'agent utilisateur.

En bref, deux façons également réalisables d'être accessibles avec le défilement de parallaxe

  1. les éléments défilés forment un arbre d'accessibilité approprié (quel que soit leur affichage visuel), c'est-à-dire que les éléments défilés hors écran peuvent toujours être lus à l'écran.
  2. les éléments déroulants sont marqués comme "présentationnels" et un ensemble secondaire de contrôles fournit les objets ARIA requis.

Ainsi, un site à défilement parallaxe pourrait être parfaitement accessible, et un autre pas du tout. Je ne pense pas qu'il soit crédible ou raisonnable de tester l'accessibilité si aucune considération de base n'a été accordée aux exigences de l'ARIA. Il convient également de noter que l'ARIA prend en charge tous les différents types de handicap. c'est-à-dire un simple rendu de gros texte statique d'un site dynamique hautement visuel.

2
Jason A.

Ce n'est pas nécessairement une réponse spécifique à Parallax mais plus en relation avec l'accessibilité et le mouvement, et IMO comment il est influencé par les effets Parralax et peut même être amélioré par cela ...

Seulement 85,5% de la population ont ce qui est considéré comme une "vision normale", où le reste est constitué de degrés variables de protanopie au deutéranomoly à la cécité totale.

Lorsque vous utilisez des effets de parallaxe, vous devez garder à l'esprit que les images ou les blocs de couleurs que vous choisissez de chevaucher devront être d'un contraste suffisamment élevé pour être encore utiles à ces 15% de votre public.

La bonne nouvelle est que si vous le faites correctement, cela n'affectera pas seulement votre accessibilité, mais pourrait potentiellement l'augmenter en utilisant le mouvement et le contraste pour attirer l'attention sur les zones du site que les personnes affectées pourraient ne pas remarquer autrement en raison de leur daltonisme.

Le mouvement peut être un outil très utile sur un site lorsqu'il est utilisé correctement ... mais pas lorsque vous l'utilisez comme dans les années 1990;)


EDIT: Pour en savoir plus sur les contrastes visuels et les utiliser avec succès (ce à quoi je fais référence lorsque je suggère d'utiliser Parallax pour contraster le contenu pour le rendre plus identifiable visuellement), consultez ...

http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

... qui approfondit le sujet de son importance et des pratiques pour l'utiliser efficacement. Encore une fois, il ne s'agit pas spécifiquement de Parallax, mais les concepts s'appliquent toujours de la même manière.

2
oucil

Les effets de parallaxe, en particulier le texte défilant et les barres pleines d'arrière-plan sur les photos d'arrière-plan à défilement lent ou stationnaires, me font me sentir mal aux yeux, un peu comme si quelqu'un mettait mes yeux dans un shaker, les secouait, puis les remettait dans ma tête. Cet effet dure peut-être une heure après avoir consulté la page. Ce n'est probablement pas ainsi que vous voulez que les gens se souviennent de votre site Web.

L'un des problèmes des normes d'accessibilité est qu'elles deviennent obsolètes. Je ne crois pas que la section américaine 508 ou WCAG 2.0 traite directement du défilement de parallaxe. Cependant, le concept selon lequel le contenu animé doit également être mis à disposition de manière non animée semble pertinent.

En d'autres termes, ce n'est pas parce que le défilement de parallaxe est techniquement conforme que les gens visitent votre site Web en toute sécurité.

2
Charles Belov

Si nous considérons la parallaxe comme une forme d'animation, je pense que le post de Nielson Guidelines for Multimedia on the web répondra à votre question.

Le résultat général est qu'il existe des moyens appropriés pour l'utiliser, mais tout excès de mouvement sur une page la rendra moins accessible et utilisable.

L'utilisation de la parallaxe d'une manière limitée pour attirer l'attention sur une action importante ou un changement de contexte semblerait raisonnable à la lumière des recherches de Nielson ci-dessus. L'utilisation de la parallaxe sur plusieurs arrière-plans dans une page juste pour la décoration est susceptible de détourner l'attention de l'utilisateur du contenu et d'autres actions.

0
Lily Dart

Cette étude http://uxpajournal.org/the-effects-of-parallax-scrolling-on-user-experience-in-web-design/ a révélé que deux des utilisateurs du groupe de test PS ont rapporté ressentir le mal des transports lors de l'utilisation du site de parallaxe. Une utilisatrice s'est sentie tellement nauséeuse qu'elle a dû écourter le temps d'utilisation du site. Dans cet esprit, il est recommandé d'effectuer des tests approfondis lors de la création d'un site de défilement de parallaxe afin de s'assurer qu'aucun dommage n'est causé aux utilisateurs. Il convient également de considérer qu'il est susceptible d'affecter les personnes souffrant de troubles vestibulaires ( http://vestibular.org/understanding-vestibular-disorder ) aurait des problèmes à utiliser un site utilisant le défilement parallaxe.

0
Kerry Butters