Sigo mejorando el blog para hacerlo más accesible, en el post anterior comenté como implementar la navegación mediante migas de pan para wordpress.

En esta ocasión voy a comentar brevemente la finalidad del enlace “Saltar al contenido”. La finalidad de este enlace evitar recorrer todos los enlaces del menú del sitio cuando navegamos con el teclado o con un lector de pantalla. Suelen ocultarse a la vista ya que su objetivo no es que se cliquen con el ratón sino mediante una tecla o orden al lector de pantalla.

Para ocultarlo suele usarse la propiedad de css display:none o visibilty:hidden.

En otras ocasiones se opta por sacarlo literalmente de la página mediante text-indent: -100em Mandar el enlace muy muy a la izquierda, de forma que no aparece en la parte visible de la web.

Hay gente que emplea una imagen transparente para enlazar al contenido (personalmente no me gusta nada este método).

Por último hay quien decide dejar visible el enlace, o semi visible como en mi caso. Me gustó mucho la forma de implementarlo que hacen en esta web.

El enlace ,que es lo primero que aparece en la web, tiene el mismo color que el fondo de tu web, de forma que no se verá hasta poner el ratón encima de la zona.
Para hacerlo visible simplemente hacemos que aparezca un fondo de otro color que contraste mucho con el fondo de la web.

Vamos a realizarlo paso por paso:

• Abrir el archivo header.php del theme que usemos actualmente.
• Crear un párrafo justo debajo de la etiqueta body con un enlace a el div donde empieza el contenido, generalmente a #content

  <p id=”psalta”><a id=”salta” xhref=”http://mi-blog.com/migue/#content” mce_href=”http://mi-blog.com/migue/#content” accesskey=”1″ title=”Ir al principio del contenido de esta página. (Atajo: tecla 1)”>Saltar al contenido</a></p>

• Guardamos y abrimos la hoja de estilos que use nuestro theme. Copiamos el siguiente texto al final del archivo:

  #psalta { margin: 0; padding: 0; }#salta {
  display: block;
  width: 100%;
  padding: 2px 0 3px 0;
  background: transparent;
  font-weight: bold;
  text-align: center;
  font-size:1.2em;
  }
  #salta:link, #salta:visited { color: #36393d; }
  #salta:hover, #salta:focus, #salta:active { background: #efefef; text-decoration:underline; }

Listo, ahora solo nos queda cambiar el color de #salta:active para usar el que más nos guste.

Enlace relacionado: Enlaces de “saltar navegación”