This is a response to a blog post by knowbility.org on skip links. The guys at Knowbility are trying to encourage use of skip links to help with accessibility but unfortunately, all of their examples have problems. I thought it would be useful to go through them here.
In addition to the full post linked above, I have, for convenience also linked to the video elements of the blog entry.
Hiding the skip link
All of the examples posted by Knowbility have the skip link hidden. I know this usually gets spun as a compromise to help the web designers, but it can cause accessibility issues.
Skipping past the crud
If the user has attention issues, you are hiding one of the tools that can help them get past the distracting crud in your header. And yes, you have distracting crud in your header. Picking Chase, one of the sites referenced, at random, everything you see up until “Choose what’s right for you” is part of the header. Image follows.
In passing, I hit a number of issues with this site, and I may go back to it later for an informal “drive-by” accessibility audit.
Not just keyboard accessibility
We always seem to talk about keyboard accessibility. Thing is, some folks actually need a pointer. Head pointers, eye-trackers. A permanently visible skip link helps in this case as it reduces the number of keyboard interactions needed to get to the main content of the page.
The Starbucks skip link
The skip link is floating in the middle of nowhere. When you do this as a designer, you are assuming use an expensive magnifier like ZoomText to find it. Anyone with a more basic magnifier is in trouble. Magnifiers start at the top left of the page. Imagine the user experience of trying to find the link with the page on high magnification. (It also makes no logical sense in that location).
I would also suggest the the non-text contrast of the link background to the background could be better. It does pass AA (I think) but certainly not AAA. Maybe that doesn’t seem a problem, but remember that this sort of page is likely to be used in less than adequate lighting/viewing conditions. In those cases, the better the contrast the more usable the page.
Finally, not seen on the Knowbility video, Starbucks do, from time-to-time, place ad blocks before the skip link. My video below (sorry no transcript available currently) demonstrating the issue using the Jaws screen-reader.
The Microsoft skip link
Microsoft have taken a unique and questionable approach to the skip link on their home page. When it appears, it fills the entire width of viewport, obfuscating the entire header, and acts as one giant button.
There are a number of issues with this approach. Firstly one of cognition – you suddenly blank out rendered, important content. If you are sighted and using keyboard navigation, this is going to be disturbing as whole swathes of content are suddenly hidden, Secondly, if you require magnification, you may only see a gray bar with no text and and focus outline that is outrageously far from the relevant text of the button. So, it cannot be properly Perceived, and is not properly Understandable.
In addition to the issues visible in the above video from Knowbility above, I discovered additional issues with the skip link. My video below:
Oracle Skip Link
The Oracle skip link demonstrates an issue that all Geo-location based sites have: you meed to get the user to select a region/location before continuing to content. That means the skip to content comes after initial country selection.
Having got past region selection, we get the navigation sequence shown in the video from Knowbility below. The problem with Oracle’s approach is that they have put their skip links inside an unordered list of links. Logically it makes sense, but it adds unnecessary fluff to every page: you don’t want the screen reader telling you about the list on every page, you just want fast access to the skip links.
In navigating the Oracle site to test out their skip links, a number of other issues were visible. This includes the fact that the skip link doesn’t actually go anywhere when selected from the keyboard. See my video below.