The Forgettable Mister Ruthsarian

Skip Links in Action

A couple weeks back I talked about skip links and made mention I'd implement something on the Bridgewater State College web site.

I'm a man of my word.

Go to the web site and move your mouse cursor towards the top-middle of the layout, just near the point where the mouse would exit the viewport. You should see a dark, transparent bar appear with the text "Skip to content". This is it.

It's the first link you'll see if you browse through the page using your tab key (something used quite a lot in screen readers). It will be read by screen readers even if they're using IE or Mozilla as the rendering engine as the link itself is just moved slightly off screen using negative margins.

I use a transparent PNG for the background so that 1) the layout isn't altered when the link appears and 2) we have different 'themes' on the web site, each with its own colors, and by doing this I don't have to create separate rules under each theme's stylesheet for this link.

I didn't have to make the link appear. I could have kept it off screen. But I decided making it appear like this is a nice little reminder to the public that we do actually think about accessibility when it comes to the web site. And it's proven to be a talking point when people I work with discover it. They ask me "what's that" and I explain the whole thing and the usual response is "Cool! Maybe we need to think about that a little too."