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

Troika #33: Endings

18 Feb 2019

Identity Design discussion on Elastic Brand podcast

23 Jan 2019

Using the iPad Pro as my main computer

07 Jan 2019

Hicks' top albums of 2018

22 Dec 2018

Hicks Studio Clearout!

17 Dec 2018

New Identity for iHasco

13 Nov 2018

Leigh and Jon did Inktober

01 Nov 2018

We are Oxvik

15 Oct 2018

The Hicks Logowall

05 Oct 2018

Instagram Hickstagram

  • 18 Feb 2019

    Troika #33 is out, for pleasuring your lug-holes! Link in the bio!

  • 17 Feb 2019

  • 15 Feb 2019

    I didn’t manage to do a single episode of the Troika Podcast in 2018, but I’ve managed to record one now. Doing the whole process on my iPad Pro is wonderful! Episode 33 coming soon…

  • 14 Feb 2019

    That time of year when I keep marvelling at “Still light at 5!” On my way home…

  • 03 Feb 2019

    Black-headed Gulls huddled together on the ice at Rushy Common. #birding #digiscoping

  • 02 Feb 2019

    Found a bundle of things from my birth while at my Dads today. Leaflets on maternity benefits, welfare services and my weight card (Johnathan? Have I been spelling my one name wrong all these years?!)

  • 01 Feb 2019

  • 01 Feb 2019

  • 27 Jan 2019

    For her birthday last year, some of Leigh’s chums clubbed together bought her a gin blending weekend at the Plough in Clanfield. We booked it for January (when it would be needed most). It was like a potions class, and after a lot of smelling, she now has a gin that tastes like pencil shavings! It’s even nicer than it sounds!

  • 23 Jan 2019

    Pondering about pictograms - we’re going to need a new symbol soon. #icons #pictograms #symbols #representations

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