Scrolljacking and Accessibility: Are we Breaking the Web?

Shaumik Daityari

Big brands have always started new trends and fads. A hundred years ago Kelloggs hit on the idea of marketing their cereals to children — a previously ignored sector in cereal marketing — by including a ‘prize’ with the box. Almost overnight the new ‘kids cereals’ category was created.

Recently, Apple came up with the new concept of ‘scrolljacking’ in their product pages. This is method that ‘re-wires’ the behavior your browser’s scrollbar to display the content as a set of slides — instead of its traditionally vertical movement.

Since then, although some have shown their love for the controversial feature, most others have been critical.

Although there has been plenty of UX discussion around the merits of changing the long-established behavior, there has been less focus on how this new approach relates to accessibility.

In this post, we will look at a handful of websites employing this method and how users with assistive technologies might access them.

Accessibility is the practice of making a website’s features available to users with all abilities and disabilities. People with visual, cognitive and motor disabilities use assistive technologies (AT) to navigate the web.

As web developers, it is our duty to make sure that our websites are compatible with these technologies. In this post, we will use the screen reader NVDA and attempt to access the websites through the keyboard only. The web browser used for the purpose is Chrome 35.

Swiss International Airlines

World of Swiss website screenshot

The Swiss International Website certainly looks impressive at the outset. It takes you on a journey through the clouds, giving an overview of what the airline is all about. As you scroll down, you are taken through different features of the airline, the fleet in operation and its routes.

This site has a ‘story arc’, and it will actively draw you through that story if you don’t interact.

The very first issue with this website is the size of the page resources required (2.7Mb). If your internet is not fast enough and the page hasn’t loaded fully, the scrolljacking functionality can’t operate.

The secondly UX question occurs during normal scrolling. When you scroll down using your mouse, you are taken in different directions depending on where you are at in the ‘story’.

Sometimes this is up towards the clouds, sometimes deeper into the screen and sometimes titled to look at the worldwide routes. This behaviour is not always intuitive and most likely not welcomed by the user.

Coming to accessibility, let us examine the different issues. The scroll speed can be a bit faster for certain users, making it uncomfortable.

Although there are anchors provided on the extreme right (which are clickable), they are not read out by the screen reader (because of the absence of any title text).

It’s almost impossible to navigate through the keyboard because of two issues. One, there is no visible focus when I tab through the keyboard. Secondly, the elements that are selected through the keyboard are not in the same sequence as compared to the mouse scrolling.

Following links often initiates nicely-produced video ‘cut scenes’. Unfortunately, if you decide to back out of one of these, the browser’s back button is of no help. Each ‘slide’ is loaded via JavaScript and none of this is exposed to the browser’s history API.

Unfortunately, if you are using assistive technologies, it is going to be very difficult, if not impossible, for you to navigate this website.

Milwaukee Police News

"Milwaukee Police News website screenshot

The Milwaukee Police news website is a community website which has general information about the police force in Milwaukee.

The interesting thing to note is that it implements a less intrusive form of scrolljacking, where the transition speed is relatively slower and you are not forced to change through the slides with just a slight scroll down.

On the right, anchors are provided, with proper text which is read by the screen reader when you focus on it through the keyboard. Selecting one of those items takes you to the respective part of the page, making the information on the whole page accessible to a keyboard.

Alternately, if you tab through the menu items, you are taken through the slides, and the view port changes as your keyboard focus changes.

In general, the website provides proper accessibility features, and I would have been happy with it had there been one little thing that the webmasters would have taken care of. The second part of the page is a list of news sources which are loaded through AJAX. It employs horizontal infinite scroll for the news archives.

Horizontal news items

If you get stuck there through your keyboard, there is no way to get out. You would be lost in the news archives, and your screen reader would read out just ‘link’ for each item in focus (since the content is loaded through JavaScript and proper titles are not present).

Overall, this website lets you navigate with some difficulty and if you do not get lost in the news archives, you should be able to navigate through it.

Apple iPhone 5C Demo Page

Apple product preview screenshot

Out of the websites reviewed, Apple’s implementation of scrolljacking is the most accessible. At the outset, the transition speed is lower, which feels less intrusive. Anchor links are provided on the right, however, they are not accessible to the keyboard, which defeats the purpose of having them.

The top links link to different pages and aren’t related to the parts of the same page, which can confuse users. You can tab through the parts of the page, and the viewport changes automatically as the focus changes.

Overall, all the parts of the page can be accessed through a keyboard and a screen reader, although certain parts like selection of colors and cases can be irritating for the user.

Does scrolljacking have a future?

Although scrolljacking has received mixed reactions, many websites are at least trying out this new feature. In fact, there are HTML5 templates like Flappster for product demos which include scrolljacking. If you use these templates, make sure you have thoroughly tested them for every element that could break your site.

One thing that web developers must keep in mind is that if you implement scrolljacking, try not to add mix them with other plugins to your page (like the horizontal infinite scroll in the Milwaukee Police News website).

Another feature is to add anchors, with proper title texts so that screen readers can read them out when they are focused. From the point of view of accessibility, implementing scrolljacking could be analogous to tabs, especially in defining anchors and their ARIA roles.

Scrolljacking is a difficult technique to implement in itself and making it accessible is easier said than done. As we’ve seen, many netizens have voiced their concerns about the matter and I believe you should listen to them and stay away from it.

Is it a fad? I suspect that as soon as Apple moves away from this feature, its supporters will follow suit.