Summary: Real world example on the Broken skip link Error.
You can review what this means technically and the impact inside of our Icon dictionary. Today I am only looking at this from the perspective of a common Broken skip link found on a higher ed website from our Higher Ed in 4k project.
Example Broken skip link
When WAVE flags a Broken skip link you won’t typically see the icon on the page because the skip link is usually hidden until it receives focus. This is the case in this example. If you turn styles off with WAVE you will see the icon.
For this error I would always recommend that you test it yourself with a keyboard to better understand what is happening. To do this simple navigate to the page in question and hit the tab key, usually the first tab is the skip to content link. Try and activate the link and see what happens, in this case nothing as the link is broken as identified by WAVE. I ran the WAVE extension after my focus was on the link and now we see the WAVE Icon next to the link.
The HTML before we make any changes:
<a id="skip-nav-link" class="skip-nav-link" href="#content-start" tabindex="1">
Skip To Main Content
</a>WAVE has flagged this an accessibility error of Broken skip link because their is no element on the page with the id of “content-start”. When you try and follow this link nothing happens, the link is broken. This would be frustrating to a keyboard user as there are 33 links between the skip to main content link and the main content. For every page they will have to tab through these or potentially use another method to jump to the content.
Someone had accessibility in mind and went through the trouble to identify the need of a skip to main content link with so many links in their university website and added a skip to content link and even styled it. They then either didn’t test it or with an update forgot to retest. This can happen easily enough, the good news is that WAVE has automatically brought this to our attention and the fix is easy.
Solution
We simply need to change the href on the skip link to go to an id of an element that wraps the content or add an id that matches the skip link. In this case I just added the id of “content-start” to the div wrapping the content.
html:
<div id="content-start">With this change this is no longer flagged by WAVE or Pope Tech as an error and the skip to content link now works.
This is pretty impactful error that we can easily fix. It is a reminder to test with a keyboard and the value of having an automated test. If you want some good examples on adding a skip to content link to your website checkout the WebAIM article, “Skip Navigation” Links.
Tabindex Alert – example
This is also a Tabindex alert example as well. You will notice that the skip to content link had tabindex=”1″ in its code and WAVE added the orange Tabindex icon. This is because a defined positive tabindex changes the default tab order of the page. On most websites there is no need and this can oftentimes cause accessibility issues.
This is the case on this university page, it already was the first link in the tab order and no other defined tabindexes were defined. There is no need for it so I simply removed the tabindex.
You can review the documentation on what this means inside of our icon dictionary. The WebAIM tabindex article goes more in depth on accessibility concerns with a defined tabindex.
Tired of testing pages one at a time?
Pope Tech can get you up and running with usable web accessibility data in just a few minutes.
Email Newsletter
Want to receive emails with accessibility content similar to this article?
If you subscribe, we will email you web accessibility insights or things we learn a few times a month. You can unsubscribe at any time.