Accessibility Weekly

Watch Out for Smooth Scroll

Published:

amber-200

Amber Hinds

Equalize Digital

Amber Hinds is the CEO of Equalize Digital, Inc., a Certified B Corp specializing in WordPress accessibility, maker of the Accessibility Checker plugin, and lead organizer of the WordPress Accessibility Meetup and WP Accessibility Day conference.

Week 41

Smooth scroll is a website feature that enhances the way users navigate through a website's content. It refers to the visual effect of gradually and smoothly moving from one part of a webpage to another instead of an abrupt jump when following a link to another section of the same page.

Smooth scroll is achieved through JavaScript and CSS animations, which create the illusion of seamless movement. Many sighted people prefer the more fluid transitions smooth scroll provides. However, it can pose significant issues for screen readers and keyboard-only users if not correctly coded.

Do the websites you build have “smooth scroll” on them? If so, here’s a 10-second test to see if smooth scroll is breaking accessibility – try it right now.

How to Test if Smooth Scroll is Breaking Accessibility on a Website

Here’s how you can quickly see if the focus has been appropriately managed in smooth scroll on a website.

  1. Visit the website you want to test.
  2. Hit the Tab key to get to the “Skip to Content” link (if the website doesn’t have skip links, you can test with any anchor link).
  3. Press the Enter/Return key to follow the link.
  4. The website should visually scroll down.
  5. Identify the next focusable element on the page below where the website visually scrolled down to – this will be a button or a link.
  6. Hit the Tab key again and see if your focus goes to that next focusable element.

If your focus goes to the next element when you hit Tab, the developer correctly coded the smooth scroll.

If your focus goes to an element higher up on the page (the next focusable element after the link you initially followed), then the developer has failed to manage focus, and you have just found an accessibility problem.

Example Testing Video

Here’s a 2-minute video that shows how to do this test and both correct and incorrect focus management.

In the video, I demonstrate how the smooth scrolling option in the Astra theme breaks the site’s “skip to content” link. With smooth scrolling turned on, the skip link visually appears to scroll down to the content, but is entirely nonfunctional for screen reader and keyboard users. Turning off smooth scrolling fixes the problem.

How To Make Smooth Scroll Accessible

Easy: Just Turn It Off

If you’re non-technical or moving fast, the easiest fix is to disable smooth scrolling.

This visual effect is not worth breaking the skip and anchor links on your website for blind people and people who use a keyboard alone to navigate the web. So, if you can turn off smooth scrolling in your theme or the plugin adding it, that’s a fast and easy fix.

It’s also helpful to report the issue to the plugin or theme developer, as I did for the issue in Astra.

Devs: Add focus() to the JavaScript

If you want to fix the smooth scroll to be accessible, you can add the focus() method into your JavaScript to explicitly set the keyboard focus to the target element, after temporarily making the element keyboard focusable.

Essentially, you do this by:

  1. Using setAttribute(“tabindex”, “-1”) to make the element focusable (even if it usually would not be because it’s a div, header, or another noninteractive element).
  2. Use the focus() method to shift the keyboard focus.
  3. Use removeAttribute(“tabindex”) to take the element out of the focus order.

Here is a CodePen that shows how this works:

https://codepen.io/amberhinds/pen/WNLPEOE

Check Your Websites Now

Smooth scroll can enhance the overall user experience by making in-page navigation more visually pleasing, but make sure it doesn't negatively impact your website’s accessibility.

Failure to shift keyboard focus when smooth scrolling is a widespread accessibility mistake I frequently see when testing WordPress websites. If you have smooth scrolling on your websites, there’s a good chance that it’s causing accessibility problems on your website.

Proper implementation of smooth scroll should maintain keyboard focus and ensure that all users can navigate the site effectively.

Not sure if your smooth scroll is working right? Test it now, then let us know in the Facebook comments what WordPress theme or plugin you’re using and if they’re doing it right.

Join the Conversation!

There's a dedicated thread on this post inside of The Admin Bar community. Join in on the conversation, ask questions, and learn more!

Group Thread
amber-200

Amber Hinds

Equalize Digital

Amber Hinds is the CEO of Equalize Digital, Inc., a Certified B Corp specializing in WordPress accessibility, maker of the Accessibility Checker plugin, and lead organizer of the WordPress Accessibility Meetup and WP Accessibility Day conference.

Through her work at Equalize Digital, Amber is striving to create a world where all people have equal access to information and tools on the internet, regardless of ability. Since 2010, she has led teams building websites and web applications for nonprofits, K-12 and higher education institutions, government agencies, and businesses of all sizes. Through this journey, she learned about the importance of making websites accessible to everyone, and it has been her passion to bring awareness to accessibility and make website accessibility easier, ever since. 

Brought to you by:

Make your WordPress website accessible and ensure all people have equal access to your products or services, regardless of ability. Reach more customers, reduce liability, and increase conversions.

Come Join Us!

Join the #1 WordPress Community and dive into conversations covering every aspect of running an agency!

Kyle Van Deusen

Community Manager

More from Accessibility Weekly

Week 51

How Accessible is “Accessible Enough”

In an ideal world where clients have unlimited budgets and everything is custom, every website would …

Week 50

How to Sell Accessibility in New Builds

Creating websites that prioritize accessibility is no longer just a best practice—it’s a business must, especially …

Week 49

Accessibility in Web Development Contracts

Whether you’re running an agency or freelancing, having a clear contract for your web development and …