skip links update is a post on The Hickensian

The suggestion in my last post was kindly tested by Bob Easton, who wrote the original article on CSS Discuss. It only worked in 2 of the top 3 screenreaders. It works in Jaws 4.51 and IBM Home Page Reader 3.02, but failed in the number 2 – Window-Eyes 4.5(beta). However, Bob suggests the following, which he has tested and does work in all 3:

.hide {
	position: absolute;
	left: -1000px;
	width: 990px;
	font-size:1px; line-height:1;
	}

As you can see, it places the content off the screen to the left. He also added width, font-size and line-height to “allow placing very large blocks of assistive text over there in hidden space”. Great – at least we know of a tested way of working with all 3. Thanks Bob!

Dave Shea offers this more compact version:

.hide {
	position: absolute;
	left: -999px;
	width: 990px;
	}

You can even remove the width if you’ve just got a ‘skip navigation’ link, but Bob’s original suggestion allows you to add more than just a ‘skip navigation’ link, such as a menu of your accesskeys. Tom Gilder extends this further, with a clever technique that makes the div visible when a user is tabbing through.

Bob has also set up a test suite for screen readers, trying 7(!) different solutions in total, including some that were suggested in the comments of the last post. If you have a screenreader, head over and get testing.