Skip-a-dee-doo-dah és un artícle on s'explica una idea interessant per solucionar el tractament del polèmic Saltar menú (Skip navigation).

La idea és fer invisible l'enllaç mitjançant un overflow: hidden combinat amb una caixa d'alçada 0.

La clau és modificar l'alçada i el tractament de l'overflow als estats :active i :focus cosa que faria que si s'usa el tabulador per navegar pels enllaços aquest aparegués de tal manera que els lectors de pantalla que no saben tractar elements invisibles també ho llegirien.

Actualment (05-01-2007) aquest article només es pot trobar a l'arxiu, per conservar-ne el contingut faig una citació complerta:

Skip-a-dee-doo-dah

I thought I'd put down my "skip navigation" link method down in proper writing as people seem to like it (and it gives me something to write about!). Try moving through the links on this page using the keyboard - the first link should magically appear from thin air and allow you to quickly jump to the blog tools, which modern/visual/graphical/CSS-enabled browsers (someone really needs to come up with an acronym for that) should display to the left of the content.

That's the reverse of the most common usage for this, which is to skip over repetitive navigation. Anyway, here's how I do it:

.skip-link {
   position: absolute;
   overflow: hidden;
   width: 0;
   height: 0;
}
.skip-link:active, .skip-link:focus {
   position: absolute;
   overflow: visible;
   width: auto;
   height: auto;
   /*The rest are purely presentational properties to make the link stand out */
   background-color: yellow;
   color: red;
   top: 5px;
   left: 5px;
   padding: 5px;
   border: 2px solid red;
   font-weight: bold;
}

This method solves several problems of other skip link variants:

• Broken screen readers which don't understand media type still announce the link, unlike using display:none
• Visual users who are using the keyboard can still utilize the link, unlike using a hidden image
• The majority of users who use a mouse don't see a confusing and pointless link cluttering up the page

From a quick test, it works in:

• IE5.0, 5.5, 6 on Windows
• Konqueror 3.1
• Any Gecko-based browser (Mozilla, Netscape, etc), with the exception of Camino

It doesn't work in any Opera version (no pseudo-element is applied when you focus links with the keyboard), nor properly in IE5/mac (it doesn't like dynamically changing overflow, you can hack round it with @media if you so wish), and not at all in Safari due it not having any keyboard link navigation support.