If you are already into web accessibility, so-called jump-to or skiplinks might not be new to you. Here is an introduction on skiplinks and some additional food for thought.
This article is part of the Dutch week of digital Accessibility, which I am participating in.
You are able to use a mouse, good for you
Chances are you are scanning and using a webpage using sight. You know where the navigation is situated and when you are navigating to another page, you know where new content will pop up.
54.9% of respondents without disabilities always or often use "skip" links
WebAIM
But what if you are bad-sighted, despite glasses from GrandVision, blind or physically aren't able to reach the new content directly. You would have to go over all menu-items, on every new page visit. In the case of a Dutch online newspaper, you had to go over 73 navigation items before being able to digest the new article.
How about keyboard and screenreader usage
This means:
- You have to hit the tab-key 73 times when using a keyboard when you aren't able to use a mouse, in case of Parkinson's disease for example;
- Your screenreader would name all 73 items, before reading aloud the actual news item.
You could choose to move repetitive elements to the bottom of your source. This is what Dutch Accessibility Foundation is doing for their main menu. However, now you would want a way to skip directly to this main menu, instead of having to wait for the whole page to be read out aloud. Which exactly is what they did by the way.
Simplify life by skipping contents with jump-to links
You would rather not have to wait when starting Netflix to watch a movie. But you at least have the flexibility to just do something else, grabbing yourself a cup of coffee, obviously using Nespresso otherwise you would have to wait at your coffee machine as well 😜
Within your website or webshop, this can be fixed by introducing a skiplink. In some cases, your organisation might have to be compliant to accessibility regulations. In that case, a method to bypass blocks is mandatory as part of WCAG success criterion 2.4.1: Bypass Blocks.
Identify your main content by giving it an id-attribute via HTML. Next, insert a skiplink in the body of your HTML document. This should be the first element, as this will also be the first that will receive focus when using a screenreader of keyboard to navigate through the page.
This way, when a visitor already went through the last of menu-items, he or she can jump directly to the main content when someone navigated to that page on purpose.
Skiplinks in action, test it yourself
If you haven't found it yet, here is how to see it in action, best viewed on desktop devices:
- Go to the first skiplink by clicking this link;
- When using a screen, a skip-links becomes visible;
- But even on a mobile device, the first skiplink becomes visible in the top left corner of the screen. This often is the default position for skiplinks to become visible;
- You can now keep hitting the tab-key on your keyboard until the link in the first bullet becomes highlighted using an outline.
Skiplinks are often invisible until it receives focus. Do note though that you shouldn't use CSS properties display or visibility to make it invisible by default. When you would do this for such elements or their parent elements, your skiplinks would never be able to receive focus in the first place and thus not aid non-mouse oriented visitors.
The CSS framework Bootstrap already has CSS classes baked in their codebase to achieve this. Bootstrap called them sr-only, litterally standing for "screenreader only".
Additional skiplink strategies
Maybe you have become enthousiastic about additional strategies at this point, to aid users with assistive technology even more. In that case, below is additional food for thought.
Multiple skiplinks within your webpage
While hitting the tab key, you might see a jump-to link for the footer and some settings as well. It is likely that your footer contains usefull information or hyperlinks too, often being different from hyperlinks within your main navigation. In the case of this very website, I have implemented additional options for user preference, such as:
- applying dark contrast colors;
- applying high contrast colors;
- disabling CSS animations;
- saving bandwidth;
- opening external links in a new window.
Remember, the purpose of "skip navigation" links is to reduce the clutter of lists of links
WebAIM
As expected as the footer often is the last section within a webpage, the HTML for the footer as well as these preferences are way down the HTML source. You would want to enable all users to directly reach these sections. Even after every new pagehit, without the need to getting all contents read aloud first or tab through every other anchor.
Don't overdo the amount of skiplink though. Instead, just keep page structure and navigation simple and fall back to HTML5 section elements and ARIA landmarks when possible.
Skip specific content-blocks
Who better knows what's happening when it comes to HTML, then you as developer. Whenever you are creating a complex elements because your boss or client is paying you to do so, consider users with disabilities as well. Let's consider embedded Google Maps, video's or other iframes as well as carousels.
Keyboard trap
For example, when auditing the accessibility of the Dutch e-commerce Wehkamp, I noticed that they unintentially introduced a keyboard trap. And endless loop was created on the fly as a user is navigating. This only happened when focus was within the slideshow too long, as this enabled JavaScript runtime to create this endless loop.
We had the same setup on yacht detail pages within a yachtbroker's website. To overcome complex navigation, we created skip-links just before such elements. This way, when a visitor isn't interested in using Google Maps or viewing related yachts and is using a keyboard, they could just jump to the next element when the skiplink is focussed, as shown in the screenshot below.
I did not mention screenreader users, as (experienced) screenreader users are more likely to navigate a page based on headings and heading structure.
In 2017, it appeared that 67.5% of screenreader users will use headings first to find their way on a lengthy webpage, while 52,2% find heading structure very usefull. This behaviour basically stayed unchanged since 2014. This is why you should always use correct markup as well as heading structure in the first place.
Used technique
What we did to skip more complex or time-consuming contentblocks, is introducing an primarily invisible element, which becomes visible on focus. We are using Bootstrap's .sr-only class, together with .sr-only-focusable. Next, we assign it a data-skip attribute, where we set the selector of where the focus should be moved to next, in order to skip the content-block.
The JavaScript part to correctly set focus
With a JavaScript onclick event listener, we catch the click and check if we are going to jump to an element that is able to receive focus in the first place. Headings for example, can't receive keyboard focus by default.
For such elements, we give it a tabindex attribute on the fly to make it focusable and setting its value to -1 to prevent it will receive focus during normal tabbing. Now, we only have to give this element its keyboard focus via JavaScript, for example using the HTMLElement.focus method. Obviously, this can be achieved in any used framework and its corresponding syntax, from Angular to Vue.
Big companies and skiplinks
Let's shortly audit the three named companies on skiplinks. At time of writing:
- The Dutch version of the Nespresso website does not have skiplinks;
- Netflix does not have a skiplink. However, Netflix doesn't have large blocks in front of main content;
- Despite being a leader in optical retail, GrandVision does not have skiplinks to bypass their menu.
Happy coding and jumping!
