Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
    
Can you describe "difference in content between the background and the foreground" more? Parallax is normally just a background image, not content that is necessarily intended to be consumed. What type of site examples are you seeing where a screen-reader would have issues? –  Evil Closet Monkey Feb 25 at 16:21
2  
@EvilClosetMonkey actually Parallax is 2 or more layers, any of which can be animated to create the Parallax effect depending on your intent and needs, and there's no reason that consumable content can't be set to a low animated speed to draw more attention to it than that of statically positioned content. –  oucil Feb 25 at 17:37

5 Answers 5

up vote 7 down vote accepted
+50

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

this website demonstrates a number of the issues I have highlighted (even though I love MarioKart and the Wii)

http://www.nintendo.com.au/gamesites/mariokartwii/#gba

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.

share|improve this answer
    
+1 for providing the Mariokart example that demonstrates the problems you've highlighted. –  Vikram Deshmukh Feb 27 at 6:37
    
Good answer, but perhaps mixing usability issues with accessibility. I personally find that OK, as they are intertwined, but if we're strictly talking about the accessibility of content, it may make sense to separate it a bit. –  DA01 Mar 4 at 19:45

This isn't necessarily a Parallax specific answer but more in relation to accessibility and motion, and IMO how it's influenced by Parralax effects and can even be improved by it...

Only 85.5% of the population have what's considered "Normal Vision" where the rest are made up of varying degrees of Protanopy to Deuteranomoly to Full Colourblindness.

When you utilize Parallax effects you need to keep in mind that the imagery or colour blocks you choose to overlap will need to be of a high enough contrast to still be useful to that 15% of your audience.

The good news is that if you do it properly, it will not only not affect your accessibility, but could potentially increase it by using the motion and contrast to draw attention to areas of the site that those affected might not otherwise notice due to their colour blindness.

Motion can be a very useful tool on a site when used properly... just not when you use it like a 1990's through back ;)


EDIT: For further reading specifically about Visual Contrasts and using them successfully (which is what I'm referring to when suggesting using Parallax to contrast content to make it more visually identifiable), check out...

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

... which goes into depth on the topic of how important it is and practices for using it effectively. Again, not specifically dealing with Parallax, but the concepts still apply in the same way.

share|improve this answer
    
I'll just put this here: google.com/hangouts –  Charles Wesley Feb 25 at 18:31
    
@CharlesWesley Not sure what Google Hangouts has to do with either Parallax or colourblindness, care to elaborate? –  oucil Feb 25 at 18:35
    
click on the link –  Charles Wesley Feb 25 at 18:52
    
@CharlesWesley it goes to the Google Hangouts home page where you can download the app, is it supposed to go somewhere else? Through me a bone here. –  oucil Feb 25 at 18:54
    
Their home page makes use of parallax and video backgrounds which seem, to me, to violate the principles in your answer. Specifically contrast and motion to assist not hinder usability. –  Charles Wesley Feb 25 at 18:59

I think question might be best answered by better understanding what 'accessibility compliance' is. See authoring guide at http://www.w3.org/TR/wai-aria-practices/#presentation_role. In particular some text applicable to visual effects is

Authors devote a good deal of effort to the appearance of their web pages, and this is especially true in the case of scripted web applications. To this end authors employ various elements purely for visual presentation. For example, <img> elements are used for spacing and decoration; and <table>s are used to create a column based layout. Elements used strictly for presentation are semantically neutral and irrelevant in terms of accessibility. It is necessary to mark such elements as presentational so that they do not appear in the accessible tree created by the user agent.

In short two equally feasible ways to be accessible with parallax scrolling

  1. the scrolled elements do form an appropriate accessibility tree (regardless of their visual display) i.e. items scrolled off screen can still be screen read.
  2. the scrolled elements are marked as "presentational" and a secondary set of controls provide the required ARIA objects.

Thus one parallax scrolled site could be perfectly accessible, and another one not at all. I don't think it is credible or sensible to test for accessibility if basic consideration has not been given to the ARIA requirements. Also worth noting that ARIA supports all different types of disability. i.e. a simple static large text rendering of a dynamic highly visual site.

share|improve this answer
    
that quote is out of date, tables for layout and spacer images ? –  Toni Leigh Feb 27 at 12:05
2  
Well that's the way official W3C specs go :) More seriously it is an example about separating visual and semantic, regardless of the technology. The example holds, even if these days tables mostly would mostly be used semantically (a good thing!) and these tables would not need the aditional 'presentation' markers. –  Jayfang Feb 27 at 13:16

If we consider parallax to be a form of animation, I think Nielson's post Guidelines for Multimedia on the web will answer your question.

The broad upshot is there are appropriate ways for it to be used, but any excess of movement on a page will make it less accessible and usable.

Using parallax in a limited way to draw attention to an important action or change of context would seem reasonable in light of Nielson's research above. Using parallax on multiple backgrounds in a page just for decoration is likely to distract user attention from content and other actions.

share|improve this answer
    
That post is almost 20 years ago. Plus it's Nielsen. Take it with a gigantic grain of salt. –  DA01 Mar 4 at 3:40

Parallax effects, in and of themselves, have no direct bearing on the accessibility of the content within. It would depend entirely on how the site was built.

share|improve this answer
    
Downvoter care to explain? –  DA01 Mar 4 at 19:44

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.