Why More And More Sites Have This Hidden Link…
And yours might need it as well.
If you’re reading this story, there is a very high chance you’re on the internet, and it’s part of your day-to-day life. Whether you’ve recently discovered it — hello, grandpa 😃— or you’ve been breastfed megabytes instead of milk, it’s largely irrelevant. This hidden link on the web is gaining popularity on many websites, whether you’re new to the internet or not, or whether you care about it or not.
The good news is, this is a no bad news story. I know, shocker, right? When it comes to hidden stuff on the web, everyone’s first reaction is to panic, tweet about it, then unplug the router, and throw the laptop into the microwave (Don’t do that!). This hidden link is no reason for panic though, and for future reference it’s also probably the one and the only hidden thing on a website, you should never be worried about. In fact, you should be thrilled about it, celebrate it, as it gaining popularity is a fantastic achievement for all mankind — and no, that’s not a hyperbole, or me getting carried away.
That hidden link is called a skip-link. This is also not the first time I’m writing about it. Oh, no! When it comes to accessibility, writing about something just once, never sticks. It’s like feeding broccoli to children. Eventually, they give up refusing and eat it to shut you up, but then some actually like it.
The problem it solves
The official name for these, so-called hidden links, is skip-link. You will also hear them as skip-nav or skip-navigation, as they can get quite elaborate. The trick to “unhide” them is to use the keyboard. Why keyboard? Because it’s mainly intended for keyboard users.
While many of us are used to navigate the web via touch or a mouse, you’ll probably be surprised to find out that not everyone can use these methods to consume their favourite site or for instance read this very article. Some people rely solely on the keyboard. But that’s not all. When a website is keyboard-accessible, it also by definition gets enabled for other less-conventional input methods like joysticks and sip-and-puff devices. If web accessibility is something you’re new to, maybe start with the below short intro, then come back to this story after.
To understand the point of these hidden links, we first need to understand the problem. First of all, the issue is never the user. Over the last few years, there has been an increasing awareness of various disabilities that users — people like you and me — deal with either on a permanent, temporary or situational basis. There’s of course a lot more to it than that, such as disability models and many other details, but right now, let’s just assume that you cannot blame the user, and what needs attention is your site and how it was designed and developed.
It’s in the name, it’s trying to skip something, and that’s precisely what it does. Most sites have increasingly elaborate navigations. Think 10, 15, 20 or more navigation items in the top menu. One of my favourite shopping place — Tower Records — for instance has a total of 20 menu items! But it gets even worse. I am a huge vinyl record fan and as soon as I navigate to Vinyl, I get 64 — yes, sixty-four! — menu items that I have to traverse through with my keyboard’s tab key just to get to the search field.
Sure, I could potentially use a screen-reader and use its rotor feature to jump directly to the search input, but what did I say at the beginning? You cannot blame the user. One cannot force me to start yet another application — one I might not even be familiar with or aware of — just because I wanted to use a site efficiently with my keyboard.
Don’t ever blame the user. Every technologically available input method is a valid one and should be supported.
I mentioned efficiency because that is the key point here. When a user uses a keyboard to navigate, the focus normally lands on the first clickable item on the page. On every page change, that resets again to that first item. This in turn means that if a site has 20 navigation items, the user must tab through those 20 items on every single page change. That is extremely frustrating and inefficient. Imagine having to cross the one single bridge in a huge city every time you wanted to get to the other side. It would be a terrible user experience and an absolute time-waster. That’s precisely the problem that skip-links solve.
Imagine that same city exactly the way it probably is — with multiple bridges — or even some little flying vehicle that you can always hop into to get onto the other side. The most common approach on websites is to “skip to main”. What this essentially allows is to skip the entire menu and jump to the main part of the site. Simple, and it uses technology that has been built into HTML for decades — the anchor links.
What most people get wrong
While the most prevalent examples of skip-links are — exactly as the headline suggests — hidden, it’s a little-known fact that they don’t have to be. The sole reason they are hidden is to please designers, as they often claim “it makes the page look too busy” or “takes away from the cleanliness of the user interface”. I happen to disagree, but I also want to stay friends with designers, they have many useful qualities and skills, I don’t. The bottom line is, though, it does not have to be hidden.
There can also be more than one skip-link per page, and it does not have to be the first item on the page. The whole reason for the existence of skip-links was to make navigation more efficient, and that its presence is dictated by where the inefficiencies in the design are. You see, generally speaking for the last three decades, websites, and web apps have followed the same tired user interface where we have a navigation at the top, then everything follows.
But what if your top navigation is actually basic and only has like 2–3 items, while the side-navigation on each of those pages contains 30 items? Obviously, in this case your main inefficiency is the side navigation, which would greatly benefit from a skip-link. You could even stop there, as one could argue that tabbing through 2–3 items on every page load is not a major issue. But here’s the good news. You can add two skip-links. One for “skip to main” and one for “skip to side navigation” and you offer a much more ideal user experience.
So what about when there’s a lot more on the site that you could skip to? Well, that’s when skip-navigation comes into play. It’s essentially a hidden menu that’s available to keyboards and similar devices. This is where I would also start agreeing with designers that hiding it from other users, is a good idea. What’s less of a great idea, though, is making this skip-nav long. I would say that anything over four items is too long, otherwise it defeats the purpose, and you find your users wanting to skip the skip-nav itself but having no means to do so!
So, does your site need one?
This is also a common misconception and a very loaded question, and the details of it require a great deal of thought. To fully understand the concept of bypassing blocks which skip-links solve, you’ll want to read the actual success criterion document published by the W3C.
Long story short, however, is that whenever you have content or elements on the page that are repeated across pages, and hinder the user from getting to the content quickly, you must add a skip-link, and yes, this applies to single-page-applications as well!
Examples of repeated blocks of content include but are not limited to navigation links, heading graphics, and advertising frames. Small repeated sections such as individual words, phrases or single links are not considered blocks for the purposes of this provision. — W3C
Often the real solution is better design, one that creates a user experience that does not rely on endless repeated elements across pages, in which case you’ll never see the need to comply to the WCAG 2.4.1 A rule. I find that skip-links are typically the best solution on older sites or ones that have little to no budget to redesign everything. Having said that, larger web platforms — even if new — will find that the complexity of their pages mandates it.
If you’re unsure whether you need a skip-link or not, you probably need it and will cause less harm adding it than not.
If you’d like to know more about accessibility on the web, here’s a list of articles I’ve put together over the last few years.
Did you know that whenever you subscribe to become a Medium Member, us writers, get a cut? You get a ton of great articles, we get a coffee. Sounds like a fair deal to me…
Attila Vago — Sr. Software Engineer building amazing ed-tech software. Cool nerd since forever, writer of codes and blogs. Web accessibility advocate, Lego fan, vinyl record collector. Loves craft beer!
