Did you know that a skip link in Chrome or Safari cannot work properly without using JavaScript?
I stumbled onto this factoid today and I was pretty stunned. I’d just assumed all the techniques for implementing skip-links (posted online and in various books) would work as written.
But it turns out that if yours aren’t working, it might not really be anything you did wrong (though it sort of is, because as a web developer you probably realize you are responsible for knowing exactly how every rule and behaviour works in every browser still being used). The real culprit is Webkit. (webkit is the engine that Chrome and Safari are both built on).
Here’s a bug report about the issue that was submitted 4 years ago. Nothing has been done to address it.
What’s most concerning is that this doesn’t seem to be common knowledge in the web design community and most solutions for skip-links posted online don’t realize this particular limitation of webkit browsers. As a result, thousands of pages that were built to be accessible are very likely not functioning properly for 33% of users (Safari and Chrome’s combined browser share, and that’s not even including mobile traffic). That’s a big problem. Let me explain a bit about accessibility, skip-links, this particular problem, and what you can do to help.
TL;DR
Go here and star/favourite the issue so it hopefully gets fixed
Accessibility
Accessibility is a very important (and sadly too often neglected) part of making any website. Just like businesses need proper wheel-chair ramps and handrails, any website needs to take into consideration users who access the web in non-traditional ways. This can be with a screen-reader, keyboard-only navigation, or a variety of other assistive devices.
The W3C’s Web Content Accessibility Guidelines outline several steps site-creators should be taking to ensure sites are usable by everyone on the net. They’re divided into 3 levels of increasing complexity and accessibility, and by the time we get to level AAA, I can really understand not following everything to the letter, but I think as a community we should at least stick to Level A.
One of the Level I requirements is:
“2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)“. (source)
This behaviour is facilitated by a technique known as a “Skip to Main Content Link” or “Skip Link” and has been non-standard practice for at least 8 years.
There’s a related mandate: “2.1.1 Keyboard: All functionality of the content is operable through a keyboard interface” which is not exactly negated by this bug, but it is certainly made far more annoying for the user.
Skip Links
A skip link is an inline link that brings you to a point on the page right where the main content starts. Most pages start with all sorts of navigation and other data that doesn’t change from page to page. Just imagine if someone was reading the code of a page to you line by line how annoying it would be to sit through all of the main menus, sub menus, header information etc on every page of a site you visited!
A lot of people don’t want this visible on their site so they find creative ways to hide it. People used to apply the visibility: hidden; or display: none; CSS rules to the links, but this isn’t reliable because many screen readers read that rule and ignore the content as well. These days skip-links are usually hidden by positioning them outside of the page with overlflow: hidden; or by using clip: rect(1px 1px 1px 1px);.
However you do it, though, it’s not going to work in any webkit browser without having to code up some JavaScript to mimic the functionality that ought to be built in.
The Webkit Problem
It’s a bit tricky to explain. So just try this.
- Open Safari or Chrome
- Go to Drupal’s homepage. (ooh! blue!)
- Press Tab. (Aha! a Skip Link hath appeared)
- Press Enter to skip to the content (Bam! This is fine. This is dandy. I don’t see what he’s whiffling about!)
- Well, let’s say you want to look at the Pagebuild Case Study link. Great! Why don’t you just tab over to it, then.
- You see the problem.
Because the highlight stays on the original link when going to any internal link, as soon as you start using the keyboard you get thrown right back to where you started!
And this doesn’t just affect Skip to content links, it makes any internal link if not useless then extremely frustrating with keyboard navigation.
It’s not a ridiculous way for things to behave if you think about it from one angle. But if you’re thinking about it from this angle, it’s pretty bad, wouldn’t you say?
So What Do I Do?
For now, an article by Terril Thompson has some great explanations and a workaround that uses JavaScript to make a fully-working-in-every-browser skip-link solution. Fwiebsls! An alternate version is also available, but I’d recommend the first as it handles inline links generally, not just skip-links (though it does require jQuery).
[NB: I've slightly modified Terril's jQuery as outlined below because it had issues with href='#' anchors]
// Apply focus properly when accessing internal links with keyboard in WebKit browsers.
$("a[href^='#']").not("a[href]='#'").click(function() {
$("#"+$(this).attr("href").slice(1)+"").focus();
});
So great! There’s a workaround. But that only helps the person that happens to be on the site that you designed using the workaround. That’s probably not most people who need it to work. It also doesn’t help the broader problem of wonky internal links.
What really needs to be changed is this default browser behaviour. The easier it is for a site to be accessible out of the box without any arcane bug/hack/workaround knowledge requirement, the more accessible the web will be in general. And that’s a good thing.
Today in my searches I found the bug report I mentioned up-top. I don’t see a way to encourage it to be solved, though. There’s a similar bug report on the Chromium issue tracker (Chromium is the open source framework that Google Chrome is based on). If everyone I know and everyone you know goes to that page and clicks the star to ‘favourite’ the issue, maybe more people will take notice. So please do that! And if you are into web standards and accessibility, share that link around!
Please let me know your thoughts on this, or if you have ideas of how to get this addressed quicker, or worked around more elegantly or if you don’t think it’s important at all.
(And don’t you worry the irony of me posting this on a site without a skip-link is not lost on me)
Huge thanks to Aaron Gustafson and .Net Magazine for spreading the word on this!
Steve Krug’s ‘Dont Make Me Think – A Common Sense Approach to Web Usability’ is one of the first books I read about web design and it was a revelatory experience. Even though he was echoing many of my own thoughts about using websites over the years, he was doing so precisely, with vast tracts of supporting evidence and plenty of specific techniques to apply to my projects.
