skip navigation solutions

10 Sep 2003

I’ve just been reading on The Web Standards Project about the fact that ‘Skip Navigation’ links hidden with the CSS property display:none are invisible to screenreaders. This hadn’t occurred to me, even though I knew it was a problem with Fahner Image Replacement, which uses the same property.

Skip Navigation links give users the option to go straight to the content, useful if you use a textbrowser, PDA or screenreader (doh!). One way around this is to use a layout technique that allows navigation to be placed after the content, removing the need for the link. The Layout Reservoir at Blue Robot has useful examples on how this can be done. Navigation is positioned using position:absolute, which takes it out of the normal flow of the page, allowing it to go anywhere in your HTML. This won’t always be possible of course.

Another way is to use a similar technique to Seamus Leahy’s Image Replacement method at CSS Play, which is known to work with screenreaders. If your skip link looks like this:

<div class="hide"><a href="#content">Skip Navigation</a></div>

Then your CSS would look like this:

.hide {
	height: 0;
	width: 0;
	overflow: hidden;
	position: absolute; /* for the benefit of IE5 Mac */
}

Like display:none, this won’t take up any ‘physical space’. The only browser I found that had a problem with this was IE5 Mac, but it behaved itself after adding position:absolute to the code.

Please note: This has since been tested in screenreaders, and it isn’t quite up to the job. See the next post.

Recent Posts

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

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

Instagram Hickstagram

  • 08 Dec 2018

    More Red-crested Pochard

  • 08 Dec 2018

    Wigeon + Red Crested Pochard

  • 05 Dec 2018

    A small glimmer of light on a very dark day.

  • 29 Nov 2018

    View from the office. To the left, and to the right…

  • 25 Nov 2018

    Gorgeous pre-gig food at Turtle Bay

  • 25 Nov 2018

    Lego Noddy Holder!

  • 18 Nov 2018

  • 18 Nov 2018

  • 11 Nov 2018

    It’s got to the PowerPoint presentation part of Gruff Rhys’ set.

  • 11 Nov 2018

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