Thursday, October 13, 2016

website design - Parallax scrolling and accessibility


I was just answering this question Is there any actual data about websites using parallax scrolling? and the more I read about parallax scrolling, I was wondering if parallax sites were accessible as the content keeps on changing and users with short attention spans might struggle to use the site. Also the difference in content between the background and the foreground might cause confusion to users using screen readers.


Is there any research on whether parallax scrolling is accessible and if there are any negatives with using parallax scrolling with regards to accessibly compliance?


Also are there any best practices on how parallax sites can be made accessible?



Answer



Several accessibility concerns immediately spring to mind, though I think each is a problem that can be overcome with good design and development. Generally speaking a functionally sound and graphically attractive offering could harbour some serious accessibility issues underneath the bonnet and the an inbalanced focus on these cognitively heavy development processes could lead to accessibility neglect.



I couldn't find any peer reviewed studies, but I have rounded up some points, with back up articles from reputable sources and common sense deduction.


Colour contrast issues. If your background moves independently of your text then you run the risk of overlaying two colours that are hard to discern or that clash in a way that hurts the eyes. The problem is compounded by complex graphical backgrounds. You will have larger problems with colour blind users than with a flat site and will need to thoroughly check all scroll positions to make sure content isn't appearing in a place where it is difficult to read


Content position and elements will effect things like keyboard focus and screen readers. You don't want every decorative image in a complicated background to announce it presense to a screen reader or for a user with a keyboard to get lost tabbing through arbitrary elements.


Navigation becomes more tricky in paralax sites when you consider the depth / width of the content. Automatically scrolling when a navigation item is clicked is a nice javascript solution but it is crucial that other methods of navigation are provided to make the site easy to browse by all users. Humble anchor tags for screen readers and fixed navigation to avoid scroll fatigue in old or disabled hands are good options.


The motion involved is also a concern. A lot of paralax sites scroll in quite an odd way, seeming jerky and actually quite difficult to look at while scrolling. It's easy to make something move, but to make something move smoothly in many contexts is a lot harder. Focusing on elements is also more difficult if they move and focusing from 'page' to page' is more difficult if the elements are not in consistent places. Any UX eyetracking study will prove this. The linked one shows how eyes commonly track content on a website.


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


Browser compatability and mobile issues also need to be taken into account. Large page sizes and inability to use paralax sites on mobile phones are two things flagged by many articles about the subject.


http://www.omobono.com/blog/powerful-storytelling-one-page-websites-and-parallax-scrolling https://uxmag.com/articles/the-hypnotic-effect-of-parallax-scrolling-and-how-it-impacts-user-experience


The point is that the paralax design pattern is not inhrently usable in the way that a UX focused design pattern is and lends itself to techniques that need careful extra thought to provide in an accessible manner. It's therefore easy, particularly when you consider the extra development and design costs, to neglect the wealth of users, not necessarily disabled, who have some sort of accessibility issue with websites.


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...