The Hitchhiker’s Guide to Accessibility: Skiplinks and Landmarks
This is for the Skiplinks. The unsung heroes of every decent and accessible website and web application out there. The shy but ever so helpful Caspers of the UX and the often misunderstood geniuses of the UI, Skiplinks as a concept are nothing new, their presence has been a blessing for the disabled community for decades. If you heard the expression “it’s the little things that make a huge difference” then Skiplinks truly fit that description!
Contrary to general belief, computers did not start out bundled with a mouse. For years, a mouse was just that — a mouse, a fluffy rodent, regardless of where it was, in your attic, Walt Disney’s imagination or Dublin’s streets. Keyboards were king, and for a large subgroup of users, they still are, which brings me to why keyboard navigation is paramount.
Keyboard navigation in essence is simple to implement and simple to use. It’s mostly the tab, up-down-left-right arrows, space and enter keys. Just writing semantically correct HTML should land you with a fully keyboard navigable web application, which is great. What isn’t so great though is that modern web applications are using a lot more under the hood than just plain ol’ HTML, and they also tend to have complex navigation. With such design systems you introduce a fairly major and annoying problem for keyboard users: repetitive elements/content.
The usual suspect is the main navigation of an app. Every time the user goes to a new page that same navigation appears again and again, and the user has to tab navigate through it to get to their desired content. The BBC for instance has a whopping 28 items in it’s main nav:
Now, imagine poor ol’ grandma with mild Parkinson’s just about able to use the keyboard (mouse is out of the question) having to tab through 28 items every time they go to a different news article. It’s mentally and physically exhausting! You don’t want poor ol’ grandma to have to go through that pain, right? Just watching her struggle like that would be heartbreaking. A good UX professional and developer knows that, which is why they’d implement what the industry calls “skiplinks”. The BBC did exactly that. So did the New York Times and NBC for instance. Fingers crossed the RTE will follow suit... 😉
Skipwhat?!?
The great aspect of Skiplinks is that they improve everyone’s life if you happen to use the keyboard a lot or a screen reader. Let’s take for instance the American flag in web format. I can quickly navigate to the section most relevant to me regardless of whether I am using the keyboard or the screen reader. Imagine having to go through the 50 stars every time! No matter how much you love Uncle Sam, you’d go absolutely nuts.
In layman’s terms skiplinks are nicely hidden simple, yet effective shortcuts to where people most likely want to end up in the UI.
From a coding perspective the difficulty level is somewhere in between tying your shoes after twelve pubs of Christmas, and finding the bathroom at night. It’s a simple pattern once you’ve coded it a couple of times, so there’s little to no chance of getting it wrong. The first time I looked at one in the UI, I was expecting dozens of convoluted lines of JavaScript, but you’ll be happy to know that none of that is necessary. Your HTML will look something like this:
<ul class="skip">
<li><a href="#stars">skip to Stars</a></li>
<li><a href="#shortStripes">skip to Short Stripes</a></li>
<li><a href="#longStripes">skip to Long Stripes</a></li>
</ul>
While your CSS is something along these lines:
.skip {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.skip a {
position: absolute;
left: -9999px;
background: #b22234;
color: white;
text-decoration: none;
font-weight: 600;
width: fit-content;
}
.skip a:focus {
display: block;
position: static;
left: 0;
padding: .25em 1em;
}
The result is pretty much this. Pretty self explanatory, if I may say so, but if you’d like to play around, by all means, take it for a spin. Tab to your heart’s content.
So wazzup with landmarks then?
Well, landmarks are kind of the middle-child of web UIs. Nobody really talks about them, they don’t stand out, but everyone kind of expects them to be there and do their frigging job without expecting any recognition for it. Ever!
You probably remember at the beginning of this article I mentioned semantic HTML. Well, believe it or not, that’s basically it. Landmarks come for free if your UI’s architecture is thought out semantically. Here’s a few good ones:
<header>
<main>
<nav>
<aside>
<section>
<article>
<footer>
And a more visual example with some aria-roles thrown in there:
It’s imperative to understand that many HTML5 sectioning (e.g. main
, nav
, aside
) elements by default define ARIA landmarks. If HTML5 sectioning elements are used without understanding the associated landmark structure, assistive technology users will most likely be confused and less efficient in accessing content and interacting with web pages. To avoid confusion in development and user experience, have a gander at this official document on landmarks. Bottom line is, keep your code tidy, semantic, and you’ll get these by default. 😁
One important detail to keep in mind is that landmarks are NOT a substitute to skiplinks. Sure, the screen reader will give the user mechanisms to jump and navigate between landmarks, but that same mechanism is not available for keyboard users.
Hopefully you now understand the key differences between skiplinks and landmarks, and how they get implemented. Skiplinks are great for both keyboard navigation and screen readers, while landmarks are great for screen readers only, however, neither of these is a substitute for the other. Implementing either of these is simple, hence if you want to truly handle accessibility in your website or application, you’ll want to make sure you cover both. It’s really not that hard, is it? 😉
Attila Vago — senior software engineer at HMH, writer of codes, blogs and things that live on the web. Programming polyglot, pragmatic doer, with a passion for all things JavaScript and accessibility. An easily inspired inspirational individual with a strong predilection towards most things nerdy, great food, craft beer, and Lego. Uses a Mac. Exercises at 6 a.m.