Sticky elements: functionality and accessibility testing

A mockup of the GOV.UK step by step navigation page on a mobile phone

I've written a blog post! No, wait, I've done this joke already. Let's move on.

I've written another article for the GDS blog, about the use of sticky elements on GOV.UK. Have a read, then read on for some detail I left out.

I'm going to assume you've read the article by now and jump straight in.

Mobile testing

The article ended up being quite long, despite the fact that I decided not to include a lot of detail. One section that could almost have been a blog post by itself was the part on testing the sticky element on mobile devices.

It's always best to test things on real hardware rather than simulated, even though Browserstack is very good now. Fortunately, there's an open device lab not far from our office, run by Foolproof. They have a ton of devices, new and old, all well labelled and organised.

The testing revealed some fascinating problems. Firstly, zooming on some devices didn't work the way I thought it would. Rather than increase the size of everything on screen, the viewport zooms in to a portion of itself. What that means is that it's possible to move the view around while zoomed without actually scrolling the page. Yeah, it's a bit hard to explain. Basically, it means that even if you put a sticky element at the top of the page, it might not still be visible when zoomed in.

Another problem we found with zooming occurred mostly on Apple devices. When scrolling down and zoomed in, the sticky element would slowly slide upwards off the top of the screen, until it completely disappeared. It would reappear slowly when scrolling back up.

There were a whole load of other problems as well...

  • On some devices Javascript is disabled during scrolling, which meant the transition from normal to sticky wasn't smooth (JS was used to trigger the transition).
  • One really old phone (Wildfire S) didn't support sticky elements but the JS still triggered, which meant that when you scrolled down the sticky header simply disappeared.
  • The iPhone X got really confused when it was rotated to landscape then back to portrait - portions of the screen including the sticky header appeared misaligned off the left side of the screen.

Accessibility testing

The section on accessibility testing at the Digital Accessibility Centre was another part of the article that could almost have been a post by itself. The people at DAC provide an amazing service. I thought I understood a bit about how people with disabilities use the internet but watching them do it was so much more informative.

Their testing includes people with access needs that might be obvious, such as blindness and physical impairments that make using a mouse difficult. But it also included some less obvious ones, such as anxiety disorder, dyslexia and learning difficulties. It was really informal; we sat down with each person individually and they talked us through how they accessed our site and what problems they'd found.

What really stood out for me was the variety of techniques each tester used to access the internet. Some had tools you might be familiar with - screen readers and magnifiers. Others used colour themes or custom style sheets, or combinations of all of them. One tester, who was blind, used Voiceover on an iPhone at an impressive speed. It was amazing to watch. Another used a screen magnification of around 400%, with custom colours and a screen reader.

The point to take away from all of this is that you can't anticipate how users will use your website until you see them try. It's a very eye opening experience and I thoroughly recommend it.

Also, if you can't manage to get to DAC, they can do the testing remotely, or send you a video of them doing it. It's a really great service.

Conclusion

The conclusion to the article was that we decided that a sticky element wasn't suitable for use in this situation. I feel very privileged to be working in an environment where we can put a good amount of effort into something but still have the freedom to decide not to use it if it isn't right.

Some organisations might not be as flexible, and it can be hard to suggest abandoning an idea where time and money have been invested. Some things can't be fixed and it takes courage to admit that. If you can't, you could get stuck maintaining something that isn't fit for purpose, and no one wants that.

Related

This article is tagged with