Skip to content

Creating Accessible Parallax Websites

Have you ever been on a website where the background seems to move at a speed different from the foreground, creating a 3D effect? That's called parallax scrolling.

First used in 2007 with Javascript and CSS 2, parallax scrolling didn't gain popularity until 2011, thanks to HTML5 and CSS3 advancements.

Parallax scrolling makes background images move slower than foreground elements, mimicking how our eyes perceive depth in the real world.

Accessibility Challenges

Parallax scrolling can create a stunning visual effect, adding depth and intrigue to a website. However, it often comes with accessibility challenges that can exclude users with certain disabilities. This post explores those issues and offers solutions and best practices to ensure your parallax effects are inclusive and enjoyable for everyone.

Motion & Balance

The varying scroll speeds of parallax scrolling can cause some users to experience motion sickness, dizziness, and nausea. This is especially true for those with vestibular disorders.

Visual Impairment

Websites with moving backgrounds or visual effects can be difficult for visually impaired users to navigate. The movement can interfere with the readability of text, especially if the color combinations create poor contrast or a visually jarring experience. 

Screen Readers

Because parallax scrolling involves elements moving independently of the typical page scroll, screen readers and other assistive technologies may not interpret the unconventional page structure and flow, hindering their ability to navigate, access, and comprehend the content. And remember, screen reader users often use a keyboard in conjunction with screen reader technology.

Keyboard-Only

Users who navigate using a keyboard only may struggle to interact with parallax elements. It is crucial to ensure that your parallax is keyboard-only friendly. Also, ensure that other navigation methods, such as a sitemap, are provided to make the site easy for all users to navigate.

Designing for Accessibility in Parallax Websites

Creating a parallax-scrolling website doesn't have to mean excluding users with disabilities. By incorporating a few fundamental techniques, you can create a more inclusive experience for everyone. Let's explore those techniques.

Motion

  • Use subtle effects and avoid excessive scrolling and overlapping of elements. 
  • Prioritize essential content, making sure it is static and not hidden behind moving elements.
  • Provide controls to pause or turn off parallax effects, such as a toggle switch.
  • Consider a "reduced motion" option, which would allow users to choose a version of the page with minimal or no parallax animations.
  • Provide an alternative way to access content, bypassing parallax sections.
  • Keep parallax effects in the background to minimize motion-induced reactions and help users focus on the content.
  • Instead of re-animating parallax effects every time a user scrolls up or down, keep them in their final position once triggered. Repeatedly triggering these effects on every scroll up or down can re-trigger motion-induced reactions and create a very frustrating user experience.

Visual

Screen Readers & Keyboard Navigation 

  • Implement logical tab order that follows the page's visual flow, using clear shortcuts like Tab to move sequentially and Enter to activate.
  • Provide focus indicators that meet WCAG color contrast standards and target size.
  • Offer alternative methods of navigation:
    • Skip links allow users to bypass repetitive content, such as long navigation menus.
    • ARIA landmarks provide a structural outline of the page, enabling assistive technologies to navigate and understand the page's layout more easily.
    • Clear sitemap that provides an overview of the website's structure and content.
    • Anchor tags to allow keyboard users to jump directly to specific content sections.
  • Provide ALT text for all images.
  • Use proper semantic HTML.

Additional Recommended Best Practices

  • Add a caveat at the top of each parallax page to inform users that it is motion-heavy and allow them to opt out of the parallax effect.
  • If your parallax website requires users to perform a task, like completing a form or logging into an account or secure website, make sure that the content is first and is static.  
  • Opt for visible in-page navigation menus that are easy to see and recognize and provide clear cues about the link's destination.

Testing and Validation

After testing your website with an automated testing tool like DubBot, you must conduct a thorough manual audit as well.

Vestibular Disorder Considerations

  • Is the parallax effect subtle enough to avoid triggering discomfort or motion sickness in users with vestibular disorders?
  • Provide a way for users to disable or minimize the parallax effect, either globally or for specific sections.
  • If the parallax effect conveys essential information, offer alternative ways to access it for users who cannot perceive it visually.

Visual Accessibility

  • Is the text on parallax layers readable against all background variations and movement speeds?
  • Does the text maintain sufficient color contrast with the background throughout the parallax effect?
  • Avoid complicated visuals that make it difficult for users with cognitive disabilities to focus on the content.

Screen Reader Compatibility

  • Does the screen reader present the content in a logical and understandable order, regardless of the visual layout?
  • Are interactive elements announced correctly by the screen reader, including their purpose and current state?
  • Does the screen reader convey the purpose and relationship of parallax elements within the overall design?

Keyboard Accessibility

  • Can users navigate through all interactive elements (buttons, links, forms) within the parallax section using only the Tab key?
  • Is the keyboard focus visible and distinguishable against the changing background? Does it move in a logical order?
  • Can users tab away from every interactive element without getting stuck?

Responsive Design

Addressing these techniques and conducting proper and thorough testing can create a more inclusive and enjoyable experience for all users, regardless of their abilities.

The Web Content Accessibility Guidelines (WCAG) Relevant to Parallax Websites


Resources

Maggie Vaughan, CPACC
Content Marketing Practitioner
DubBot