follow me on Twitter!Transient Skip Links
"Skip links" is the name given to a little accessibility feature, simply a link that uses an anchor to skip you down the page to make keyboard navigation easier. If you see them it's usually right at the top over the site navigation, so a user doesn't have to tab through the whole nav to get to the content.
Quite often you won't see them though, unless you use view source, many people choose to hide them using CSS. If you move them off the screen with a position:absolute then they will still be read out by screen readers. It's easy to forget that blind users make up a tiny fraction of web users suffering a disability. Many more people rely solely on their keyboard to use the web than screen readers, they range from stroke victims to sufferers of spinal injuries or motor neurone disease.
So should you display the skip links? Well people confined to keyboards still make up a small fraction of users on the web, and when you start adding links to all sections that may want to be skipped it can become a disadvantage to none disabled users. What you want is for the links to only appear when they're needed, which is so easy to do with a :focus.
You can add the following HTML to the top of the body: With this CSS: Try tabbing from the top of this page and you'll see how it works, it's simple and works on all major browsers.
Quite often you won't see them though, unless you use view source, many people choose to hide them using CSS. If you move them off the screen with a position:absolute then they will still be read out by screen readers. It's easy to forget that blind users make up a tiny fraction of web users suffering a disability. Many more people rely solely on their keyboard to use the web than screen readers, they range from stroke victims to sufferers of spinal injuries or motor neurone disease.
So should you display the skip links? Well people confined to keyboards still make up a small fraction of users on the web, and when you start adding links to all sections that may want to be skipped it can become a disadvantage to none disabled users. What you want is for the links to only appear when they're needed, which is so easy to do with a :focus.
You can add the following HTML to the top of the body: With this CSS: Try tabbing from the top of this page and you'll see how it works, it's simple and works on all major browsers.
Labels: accessibility
Comment Feed
This is very clever :) Would you mind if I was to implement something like this for my websites? I can attribute as necessary. Funny thing is I use the focus pseudo element already; just not in this way!
Thanks!
Vicky