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

The Infinite Canvas

09 Feb 2018

Blade Runner 2049

14 Oct 2017

iPad Pro Pencil loop

11 Oct 2017

Troika #32: Tearjerker

04 Oct 2017

Troika #31: Dusk

06 Sep 2017

Icon Design Process talk at Reasons To 2017

06 Sep 2017

Instagram Hickstagram

  • 22 Mar 2018

    Goodbye Coco, you were a marvellous GP 😞

  • 21 Mar 2018

  • 20 Mar 2018

  • 16 Mar 2018

    The Clientele with @corinpilling at the Scala last night were mesmerising! It also made me realise how great a guitarist Alasdair MacLean is!

  • 13 Mar 2018

    Hold me…

  • 13 Mar 2018

  • 11 Mar 2018

    Must. Push. Button.

  • 11 Mar 2018

    Dinner in the Oxford’s. Happy Mother’s Day @hicksleigh! (It was the best one of Dan - honest)

  • 11 Mar 2018

    She didn’t have a clue

  • 10 Mar 2018

    You paint a great mural, and some idiot adds their ugly tag to the little of space you left to balance the composition.

Contact us

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

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

Wenrisc House
Meadow Court
Witney, OX28 6ER
United Kingdom