skip navigation links

23 Sep 2003

A recent article at The Web Standards Project alerted designers that ‘Skip Navigation’ links, traditionally 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 also uses display:none.

If you’ve got a long list of navigation links, skip links give users the option to go straight to the content, useful if you have a textbrowser, PDA or screenreader (doh!). It can be particularly painful to hear a screenreader speak al long list of links before finally getting to the content.

Put ‘em somewhere else

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, and if you do, you’ll need to add a ‘skip to navigation’ link instead!

Hide ‘em

The following workaround was developed by Bob Easton, who wrote the original article on CSS Discuss, and works in the top 3 screenreaders – Jaws 4.51, Window-Eyes 4.5(beta) and IBM Home Page Reader 3.02.

<div class=“skiplink”><a href=”#content”>Skip Navigation</a> </div>

.skiplink { 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. Bob also added width, font-size and line-height to allow for extra information such as a menu of your accesskeys. The width rule is a failsafe, to make sure that div doesn’t become visible. If your link is a small simple affair, you can remove the width and font attributes. Tom Gilder extends this further , with a clever technique that makes the div visible when a user is tabbing through.

Don’t hide ‘em

However, Joe Clark argues the case for making these links visible. He lists several ways of doing this, and keeping it small, suggesting that just the word ‘skip’ would be acceptable.

Recent Posts

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

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

Instagram Hickstagram

  • 20 Oct 2018

    Inktober Day 20: quick doodle without planning in pencil or looking at reference, which is usually a bad idea. Your turn @hicksmade! #inktober #inktober2018 #leighandjondoinktober

  • 20 Oct 2018

    Morning dog walk. Even the wheelie bins looked good in this light

  • 20 Oct 2018

    Inktober Day 19. Following @hicksmade’s marshmallows with more marshmallows 🤪 #inktober #inktober2018 #leighandjondoinktober #ghostbusters #staypuft

  • 18 Oct 2018

    Inktober Day 18. When @hicksmade did a prawn I was sure she was setting me up to do cocktails! #inktober #inktober2018 #leighandjondoinktober #cocktails

  • 18 Oct 2018

  • 18 Oct 2018

  • 18 Oct 2018

    Inktober day 17 . @hicksmade’s pen led me onto squid and their ink shooting abilities. I also found out that a part of the squids anatomy is called a ‘pen’. #inktober #inktober2018 #ink #leighandjondoinktober

  • 16 Oct 2018

    Inktober day 16 “The Pilot” - a response to @hicksmade’s barber shop poster. Experimenting with a different style on this one #inktober #inktober2018 #leighandjondoinktober #pilot

  • 15 Oct 2018

    Inktober Day 15. @hicksmade’s staircase led me to this. There must be a hairdressers somewhere called this? #inktober #inktober2018 #leighandjondoinktober #hairwaytosteven

  • 14 Oct 2018

    Inktober day 14 - from @hicksmade’s theme of escape, and tonight’s Dr Who, with a return to classic theme: running!. #inktober #inktober2018 #leighandjondoinktober #drwho #pictogram #signage

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