The Mother Of All Web App Features
Going beyond traditional navigation on the modern web
The task was simple and singular. Provide value to the customer and do it fast. If I have learnt anything in over 10 years of software development is that fast, valuable and easy to deliver often don’t fit well into the same sentence. Initial velocity can be at G-force levels, but traditionally the last 10% takes the 90% of the time. There are however guaranteed exceptions to this rule, and starting today, this won’t be just a secret of mine any more.
A long-winded, but entirely necessary context
To understand the headline of this article and the hackathon project, which while humble at first look, I believe offers instant value to millions of users, I need to rely on a bit of context and history. Traditionally speaking, the web, HTML, was created to be accessible to all users, with or without disabilities. For anyone having the technology to use it, it was accessible. It was, and frankly, still is the most inclusive media and content sharing platform, by default. That is only true however if we adhere to the WCAG guidelines, which outline what potential issues one might want to prevent, and how might one do it.
If we take the above into account, every feature suddenly has a requirement never before considered — accessibility. My headline intentionally carries a double meaning, in the sense that we’re not just talking about the most popular feature of all features on the web — navigation, but also because accessibility should never be considered a feature on its own, but rather that all features — including the most popular one — in a web app or website should stem from accessibility guidelines.
Let’s face it, without navigation, the web would have never caught on. It would have been nothing more than a pile of electronic documents, no better than a static PDF. A single HTML component made all the difference — the link tag.
<p><a href="somedocument.html">I am a link,</a> and you can thank me for the modern world you live in!</p>From the very early stages of the World Wide Web to today, more often than not, the link tag is what makes pages and apps different from static documents. The humble link tag linked — pun intended — people and the world together. And for a while, it was fine, but like with everything popular, the web evolved into what we use today. It has gone beyond just a few link tags connecting to other pages. What we have today are complex navigation solutions adhering to design systems and trends. Favourite shopping sites like Amazon have 23 menu items at the top of the page alone! News sites like the BBC has 12–15 top menu items. Most banks have at least 7 menu items in the header alone. There’s only one problem with those numbers. Most of the time when the user navigates to another page, those navigation items are there again, and for keyboard users, having to tab through all of them every single time, gets very frustrating very quickly.
The good news is, it doesn’t have to be, and in the context of our 2022 hackathon, we came up with a clever way to only remove that frustration, while also providing some high-value shortcuts for all of our users! Because guess what? Make a site accessible for keyboard users, and you improve it for everyone! That’s right. Every. Single. User. Benefits.
Meet skip-navigation in all its glory!
As the below GIF illustrates, on every tab press, I get to cycle between the various skip navigation items. Of course this special navigation only appears the moment I hit the tab key on a keyboard, otherwise for all other users, this is entirely invisible. This approach is fairly standard and helps keep the page a tad cleaner for those who don’t rely on the keyboard. Technically, there is no reason to hide it though, apart from design preference.
You can also cycle backwards in the menu with Shift+Tab. As you hit Enter on any of the navigation items, it will simply just jump to that section of the page, marked up with the appropriate id. Very standard, and entirely cross-browser compatible solution!
You want code? There’s code too!
The code could not be any simpler. It relies on a list of good ol’ anchor links in the HTML and a few lines of CSS! It’s really that easy to add. Usually, placing the snippet anywhere before the main navigation in the DOM is perfectly acceptable. No need to get religious about whether it should be before the app’s logo or after. Use some common sense. Its purpose is to skip the main navigation, so as long as it’s before it, you’re grand!
HTML
<ul class="skip">
<li><a href="#body-content">Skip to Main</a></li>
<li><a href="#preziVideo">Skip to Prezi Video</a></li>
<li><a href="#moreProducts">Skip to More Products</a></li>
</ul>CSS
<style>
.skip {
position: absolute;
top: 70px;
left: 0;
width: 100%;
padding-left: 30px;
}
.skip a {
position: absolute;
left: -9999px;
background: #192D9B;
color: white;
text-decoration: none;
font-weight: 600;
width: fit-content;
border-radius: 20px;
}
.skip a:focus {
display: block;
position: static;
left: 0;
top: 100px;
padding: .5em 1em;
z-index: 999;
}
.skip li {
list-style-type: none;
}
</style>Note: positioning and colour values are of course entirely up to you and your app’s/site’s branding.
Furthermore, if you find the jumping to the various sections too choppy, just add smooth scrolling to the HTML via CSS like so:
html {
scroll-behavior: smooth;
}Gorgeous! The most practical improvement you’ll ever add to a site in under 10 minutes!
Entirely reusable and project-agnostic!
Seriously, bookmark this story, everything you need, is here. HTML code-snippet, CSS styles and requires no JavaScript whatsoever. What?!? You can still do wonderful things on the web without JavaScript. Of course! Isn’t that great? It is by far the simplest improvement you can make with very little code that adds an instant up to 15% of users as potential customers! Value? Tick! Fast? Tick yeah!
Attila Vago — Software Engineer improving the world one line of code at a time. Cool nerd since forever, writer of codes and blogs. Web accessibility advocate, Lego fan, vinyl record collector. Loves craft beer!
