Sam Brown

Skip to Content Link hover at top of site

Skip to Content links allow people who may be using screen readers, or mobile devices to skip to the main content container of your website quickly. They are important links on your website that do not necessarily have to be hidden or ugly, but are definitely a must have.

A new and very popular way of showing a Skip to Content link to all of your visitors without it being an eye sore is to create a hidden link, that is displayed when the user hovers at the very top of your page. See the example.

This is very easy to accomplish, here is how:

HTML

  1. <ul id="shortcuts">
  2. <li><a href="#content">Skip to Content</a></li>
  3. <li class="off"><a href="#sidebar">Skip to Sidebar</a></li>
  4. <li class="off"><a href="#search">Skip to Search</a></li>
  5. </ul>
  6. Download this code: /code/skiptocontent_html.txt

These shortcuts are essentially a list of links to areas on your page and I have ordered them in an unordered list (ul). The ul has an id of #shortcuts and several of the links have the .off class so that they are hidden.

CSS

  1. #shortcuts {
  2. font: bold 11px/25px Verdana, sans-serif;
  3. list-style: none;
  4. margin: 0;
  5. padding: 0;
  6. position: absolute;
  7. left: 0;
  8. top: 0;
  9. width: 100%;
  10. z-index: 25;
  11. }
  12. #shortcuts .off {display: none;}
  13. #shortcuts a {
  14. color: #000;
  15. display: block;
  16. text-decoration: none;
  17. text-indent: -9999px;
  18. }
  19. #shortcuts a:hover {
  20. background-color: #ff9;
  21. text-align: center;
  22. text-indent: 0;
  23. }
  24. Download this code: /code/skiptocontent_css.txt

The #shortcuts id positions the list item at the very top of your page, removes any padding, removes the list-style-icon, and sets the z-index to a value greater than 1. This will place the Skip to Content link hover over any other content on the page.

The link a is set as a block level element and the text is set off-screen. Lastly the a:hover sets a background colour, brings the text back on-screen and centers it.

That is it. You may view the source code of the example if you wish to see it in action.

Post a link to this on Twitter ↩

Comments

Sam 28 August 2006, 09:15 #1

Yes, I know I do not have the Skip to Content link available to click on this site, but it is there in the underlying code.

Chris 1 September 2006, 00:12 #2

Wow. Nice redesign!

Dave 5 September 2006, 02:30 #3

Hi Sam, nice example.

Is there any reason why you didn’t use visibility: hidden;/visibility: visible; instead of text-indent and display? I’ve never tried something like this myself so just curious to see if there is a reason?

Sam 5 September 2006, 04:13 #4

Hi Dave, there was no real reason other than that is what I had done in the past.

Commenting has closed for this article. Feel free to me.

Sam Brown co-founded Iterate, and was previously VP of Design at Foursquare. Based in NYC.

DribbbleEndorseFacebookFoursquareInstagramTwitter