skip links update

13 Sep 2003

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.

Recent Posts

Hiding Away

16 Sep 2018

Biro sketch of Lauzerte

23 Aug 2018

Firefox Identity Project

21 Aug 2018

It’s just fashion

26 Jun 2018

The Symbol Sourcebook

08 Jun 2018

Differences between Icon and Logo Design on This is HCD Podcast

10 Apr 2018

Twelve South PencilSnap

01 Apr 2018

The Infinite Canvas

09 Feb 2018

Blade Runner 2049

14 Oct 2017

Instagram Hickstagram

  • 14 Sep 2018

    When horses dress up as cows

  • 07 Sep 2018

    Olive’s feeling autumnal

  • 06 Sep 2018

    Going, going …

  • 27 Aug 2018

    Day out MTBing in the Forest of Dean. Bloody knackering climbs and exciting downhills - woohoo!!

  • 23 Aug 2018

    Interesting cloud formations tonight. The whole sky had parallel lines

  • 14 Aug 2018

  • 14 Aug 2018

    Everything’s going to be OK!

  • 14 Aug 2018

  • 12 Aug 2018

    Curry wurst, at last!

  • 12 Aug 2018

    Wheels new and old

Contact us

Call Jon on +44 (0)7917 391536, email or tweet @hicksdesign.

Alternatively, pop in for tea and cake at the studio…

Hicks
Wenrisc House
Meadow Court
Witney, OX28 6ER
United Kingdom