Scrolljacking and Accessibility: Are we Breaking the Web?

Shaumik Daityari
Tweet

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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • M S

    The Apple one is especially bad.
    Try it on a small(ish) screen, the behavior of the page makes no sense at all.

    There is literally NO adaption to the screen it displayed on, its like it was made in the 00’s.

    The greatest trick Apple ever pulled, was to convince the world they know usability.

  • http://kasperiunas.com/ Eimantas Kasperiūnas

    I personaly hate anything what is not native scroling at first, maybe in some cases like crapy mouse on windows PC it looks ok, but when you try to use it with mac’s touchpad it destroys any comfort and joy of any effects in the website, content should be the king, not the blink blink, there is some cases where you may choose this but scrolling motion should be left unchanged, cause it’s imposible to provide native and natural feel other anything that native scrolling.

  • harishchouhan

    I personally hate it. My laptop resolution is 1366 * 768, and most of the times I am unable to view text content of images that do not fit vertically. I don’t face this issue when visiting Apple’s site as their approach seems refined as only a small section auto scrolls, but many web developers don’t spent time testing their sites properly on different resolutions and results in subpar experience.

  • Efren Castillo

    Great article. Very informative.

  • Francis

    I just loved the World of Swiss ! I don’t really get the gripe about scrolling down taking you to different places depending on where you are; the whole point is to take you places you wouldn’t have wandered into on your own (I can’t imagine clicking on a link labelled “Swiss Cuisine”)… Or rather, the point is to demonstrate that the alledged (rather boring) qualities of exactitude and meticulous attention to detail associated with that nation are exactly what will make your airline trip safe and unforgettable. Usually when I’m looking at a Web site I want to cut through the BS and get to the task at hand, but this is obviously a not a place to go to when you want to book a flight or check on cancellations or do anything in particular; it’s just something you wander through and spend a few pleasant minutes, and come back with a positive impression related to an airline.

    • Mallory

      I can agree with this point of view, if at the start of the site it’s clear that it’s a sort of entertainment/marketing for the brand… because it’s very likely I could come across this site via search and am looking for the non-BS stuff (information) and so if I were to come across this official-looking-named site I would want, as my very first option, a link to the “real” site, because this is a business with customers and stuff. Then after that it can be as weird as it wants.

  • http://dada.theblogbowl.in/ Shaumik Daityari

    Apple has done it perfectly only for its devices it seems!

  • http://dada.theblogbowl.in/ Shaumik Daityari

    Hi PJ,

    One thing that you should note is that even if the 1.8 MB of SitePoint doesn’t get loaded, you can still see the content, and click on something, but in World of Swiss, if the scrolljacking doesn’t work- the site is not navigable at all!

  • http://dada.theblogbowl.in/ Shaumik Daityari

    Hi forddyce,

    It seems your internet connection is real bad. Or were you downloading something in the background?

  • http://dada.theblogbowl.in/ Shaumik Daityari

    Hi Ben,

    Thanks for the information. Although I did use Firefox 29 to verify a few little things(like the weird scroll in the World of Swiss), I will definitely keep that in mind in the future.

  • Mallory

    Since developers in general read this, I do kinda wish the author had used “proper link text” instead of “title”, which to me as a developer means “the title attribute”, which has its own nice little list of accessibility FAILs (not only is it not guaranteed to be heard via a screen reader (depends on your reader and settings), but sighted keyboarders are often left out too. Icons are especially horrid, when they’re inscrutable little images).
    There are times where you wouldn’t want text appearing in the anchors on the page, but there are accessible ways around this (off-page spans who appear onscreen next to icon/anchor onfocus, where you listen for focus by keyboard to show and by mouse not to show, as an example).

  • estaples

    Thanks for this! Good things to consider.