tags:

views:

123

answers:

2

I'm using yaml builder to create a 3-column CSS layout. In the HTML it generates, there is one section that does not make any sense to me:

<!-- start: skip link navigation -->
<a class="skip" title="skip link" href="#navigation">Skip 
    to the navigation</a><span class="hideme">.</span>
<a class="skip" title="skip link" href="#content">Skip 
    to the content</a><span class="hideme">.</span>
<!-- end: skip link navigation -->

Class hideme looks like this:

.hideme {
  position: absolute;
  left: -1000em;  /* LTR */
  top: -1000em;
}

Apparently, removing it has no effect in browsers I tried, but I'm afraid it might come back to bite me later. Any ideas what's this for?

+2  A: 

It's for screen readers and braille displays that blind people use. The link is hidden in most nornal browsers, but the blind will "see" them. It allows them to skip the naviganion/menu. That way they don't have to sit listening to the computer reading out the entire the menu structure at every page load.

Sander Marechal
+3  A: 

This is used to provide accessibility to people using screen readers etc. If the page is being read out to you, it is very annoying to have to listen to 5 minutes of menus that are the same on every page before you get to the information you wanted.

These early links give these readers a chance to bypass the boiler plate stuff on your page and skip to the good stuff.

rikh