Where we should put “skip to content” links?

StackOverflow https://stackoverflow.com/questions/1801752

  •  05-07-2019
  •  | 
  •  

Question

See place 1,2 and 3.

<body>
    <Place 1>

  <div id="container">

    <Place 2>

    <div id="header">

    <Place 3>

      <div id="logo">

      </div>

    </div>

  </div>
</body>
Was it helpful?

Solution

'Skip to content' and 'Skip to menu' links should be placed before any other link or text. It doesn't matter if there are 15 opening div before them.

The relevant Technique for WCAG 2.0 is G1: Adding a link at the top of each page that goes directly to the main content area

OTHER TIPS

I prefer on the top. In this case, it is more useful.

See following sample
http://www.w3.org/WAI/
http://websitetips.com/

It will no doubt vary from site to site, but I would put it before the navigation.

That way a screen reader can read out 'Skip to content' before it has to go through the main navigation list and say things like 'About Us. Links. Contact Us.' etc

Shouldn't place it at all -- place your content first in the HTML file, and put navigation/spammy stuff afterwards.

(I know a lot of places find this difficult in practice, but if you're going for screen reader/text-only browser support, you might as well go all the way)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top