Skip Links

Among one of the more common, but less implemented ideas on creating accessible web sites is the inclusion of a “skip link”. This is something that users, particularly those aided by a screen reader, can use to skip the repetitive navigation elements and jump to the content unique to the page they’re viewing.

In the past I thought I could get away with a simple link at the start of the page then use screen-media CSS to hide it. This, however, has proven to be a bad assumption. I’ve found many screen readers will first render the web site in the same manner as any web browser like IE or Firefox would. The screen reader then goes through the page looking for text to read back to the user. Thus those hidden elements are also hidden from the screen reader.

So what we need to do is include a link that’s rendered on screen that allows users to skip to the content.

But that’s going to probably just confuse users who aren’t aided by a screen reader. And it might not make sense to others who then might complain that valuable “above the fold” space is being wasted on a link they don’t need.

Enter The Web Standards Project web site. They do precisely this. Except I hadn’t noticed it before today because they simply hide the link by setting the text color of the link to the background color of the page. The link is there. It’s rendered. The screen readers will pick it up, but to the visual user it’s effectively invisible.

Now their solution places the link along the gutter space at the top of the web site. However some web sites don’t really have that kind of gutter space to hide such a link.

So my solution is to use an absolutely positioned element at the top of the HTML document. This removes the element from the flow of the document effectively leaving the layout visually unaltered. I can then position the element wherever I want, including off the page (position-left: -100000px). The link is still there and if you tab through the page you’ll find it’s the first link your browser hits.

However in some situations I may want to make the link visible as a means of advertising that I care about accessibility. Or maybe the link still provides some functional use to visual users, especially for those web sites with a very tall masthead or maybe for those users on mobile devices that only have a two-inch screen.

One option might be that if you have some gutter space on your web site (say five to ten pixels at the to of the page) you might position the element up some number of pixels so that the bottom N pixels of the element are still visible (but the same color as the background). Then perhaps apply a :hover state in your CSS that moves the element down to the page whenever a user hovers over it. In this case users would see the element whenever their mouse crossed the upper five to ten pixels of your layout. Visual users would find it by accident, but then know it was there. I don’t think the popping-out would become an annoyance to users since it’s such a small space to activate that they’d be able to easily avoid it.

Another option might be to just keep the link the same color as the background of the web site, but make the color change in hover state. Again, visual users would only discover this link by accident (or via tabbing), but when they find it they would always know it was there. It’s not as blatant an advertisement on your web site’s focus on accessibility (since the hit space would be so small), but at the very least it’d be something you could at least show/demo for others.

The point is you have options. All of them derived from a simple link and a bit of CSS. It’s a small effort and well worth it to help make your web site more accessible to others.


Virtual Linux

Found a post over at Arcane Code about installing Ubuntu 8.04 under MS Virtual PC 2007.

I’ve done this and have Ubuntu 8.04 running in MS’s own VM on my XP desktop. It’s very nice. Now I can test in Konqueror (as well as play with various Linux toys that I find invaluable) while maintaining my XP OS for work (and not have to repartition or reboot for that matter).

A couple of notes to share.

I could only boot off the live CD by manually adding the noreplace-paravirt option. I then had to add this option into the bootloader as well after the OS was installed. I find including vga=791 helpful as well, but not required.

In my xorg.conf file I had to add the following to my screen section:

DefaultDepth 16
SubSection "Display"
  Depth 16
  Modes "1280x1024"

This got me at the intended 1280×1024 resolution I wanted. The color depth is needed because Ubuntu will default to 24 bit color depth which Virtual PC has problems with.

I also added the following to my monitor section:

DisplaySize 338 277

Which changed the DPI of the screen to 96 (X defaults to 75dpi I believe) which makes small text much more readable.

I had to add snd-sb16 on its own line to /etc/modules in order to get sound working. However the sound is very scratchy. From what I’ve read this is common and there’s probably nothing that can be done through module options to improve this. That’s unfortunate.

I also had to add options psmouse proto=imps to /etc/modprobe.d/options in order to get the mouse wheel recognized by the OS. With that done I then had to add the following the inputdevice section for my mouse:

Option "Protocol" "ImPS/2"
Option "ZAxisMapping" "4 5"

And now the scroll wheel works in the Ubuntu VM.

Give it a try. Both Virtual PC 2007 and Ubuntu are free downloads and you don’t have to worry about mucking with your host OS or partitioning drives.

My setup now is that I have dual monitors and on one I’ve got the Ubuntu VM in full screen mode and on the other I have my XP desktop.

FYI: To free your mouse from the VM all you need to do is press the RIGHT ALT KEY. It must be the right one, the left alt key won’t work.

Oh. Duh.

A little “oh, duh” moment to share.

I had an anchor within a web page. It was an empty anchor, but nonetheless I decided to set it with a style of display:none; so that some random browser doesn’t add an extra line of whitespace to the document where the anchor is.

But as it turns out, by hiding the anchor the bookmark is removed from the document. So URLs like index.htm#bookmark would no longer jump to the bookmark within the page. Once the anchor was displayed again the bookmark would work.

Now if I really cared about browsers getting silly and adding space where there shouldn’t be any I could always apply a style of line-height: 0;. (visibility:hidden; doesn’t work because the space generate by the element is still there even if the content is hidden.) But I didn’t bother replacing the style with something new, I just removed the original CSS. I figure I was being just a little too anal there.

The point: setting display:none; on anchors will remove their bookmark capability.