Paso 6.- Colocar primero el contenido principal.

Las personas que navegamos por la Web con navegadores visuales, del tipo IExplorer, Opera, Mozilla o Firefox, dirigimos nuestra mirada al contenido principal de la página, sin que la colocación de la barra de navegación de la Web visitada nos afecte para nada. Nos es indiferente que esté de forma horizontal o vertical, a la derecha o a la izquierda. Pero esto no es indiferente para las personas que navegan con lectores de pantalla (tipo JAWS), sólo texto (como Lynx o Links) o con dispositivos de salida braille. Para ellos una barra de navegación colocada antes del contenido principal puede ser una auténtica tortura, ya que cada vez que visitan una página de nuestra Web tendrán que escuchar o navegar por toda ella hasta llegar a lo que interesa: el contenido principal.
Por ello, a la hora de hacer nuestra bitácora accesible, podremos optar por alguna de estas fórmulas:

• Podemos elegir una plantilla prediseñada que muestre el menú de navegación en vertical a la derecha (como es el caso de esta misma bitácora). Nos cercioraremos de que en el código fuente de la plantilla el contenido principal está colocado antes que el menú de navegación. Esta, seguro, es la más cómoda y sencilla de las soluciones.
• Si optamos por elegir otra de las plantillas que llevan el menú de navegación a la izquierda tendremos que emplear un pequeño truco. Editaremos la plantilla principal (ya sabes, en la solapa plantilla de editor de Blogger) y seleccionaremos todo el texto contenido entre los comentarios <!-- Begin #sidebar --> y <!-- End #sidebar -->, incluyendo ambos comentarios, y lo trasladaremos detrás del contenido principal (que está colocado entre <!-- Begin #main --> y <!-- End #main -->). Los bloques <div> están maquetados y colocados en la página mediante los estilos de nuestra página. Por ese motivo, da igual el orden que lleven en el código fuente, siempre aparecerán en el lugar que les fija el estilo. Pero para los lectores de pantalla y navegadores que no interpretan las hojas de estilo, el orden del código fuente es el que se muestra en pantalla.
• Otra posibilidad, si optamos por una barra de navegación colocada antes que el contenido principal de la página, es proporcionar un marcador o vínculo interno que posibilite el "salto de la barra de navegación". ¿Cómo podemos hacerlo? Sigue estos pasos:
1. En tu hoja de estilos crea una clase que puedes llamar "ocultar" del siguiente modo:
   .ocultar {display:none;}
2. En el párrafo <p> donde vayas a colocar el enlace interno dale esa clase del esta forma:
   <p class="ocultar"><a href="#contenido">Salta menú</a>
3. Luego coloca el vínculo interno "contenido" justo al comienzo del bloque que contiene el contenido principal (ya sabes entre que comentarios se encuentra).
• La opción anterior, con ser buena, perjudica a aquellos que navegan visualmente pero utilizando sólo el teclado (personas con dificultades motrices en sus manos, fundamentalmente). Como el navegador no les muestra en pantalla el enlace para saltar la barra de navegación, que hemos ocultado, tendrán que ir saltando cada uno de los enlaces de nuestra barra de navegación hasta alcanzar el contenido principal y navegar por el mismo. Para resolver este pequeño problema, podemos optar por no ocultar completamente nuestro vínculo interno. Sólo lo ocultaremos visualmente, dando a sus letras el mismo color del fondo de nuestra página. Igual que hicimos antes, esto lo podemos controlar mediante la hoja de estilo, creando una clase como esta:
  .letratransparente{font-color:#FFFFFF} (donde FFFFFF es el color del fondo).
  Luego basta con dar esta clase al párrafo <p> donde irá el salto de la barra de navegación y todo arreglado.

Para aquellos que todavía maquetan con tablas (opción admitida, aunque no recomendada), les podemos aconsejar la siguiente fórmula.

Si su página está maquetada con una tabla de dos columnas donde la izquierda es el menú de navegación y la derecha el contenido principal, en lugar de la maquetación obvia:

<table>
<tr>
<td valign="top" align="left" width="25%">
... barra de navegación ...
</td>
<td valign="top" align="left">
... conetnido principal ...
</td>
</tr>
</table>

Pueden colocarla de esta forma:

<table>
<tr>
<!-- imagen espaciadora en la celda superior izquierda -->
<td>
<img src="/images/1.gif" width="1" height="1" alt="">
</td>
<!-- contenido principal en la primera celda, con rowspan=2 -->
<td valign="top" align="left" rowspan="2">
... conetindo principal ...
</td>
</tr>
<tr>
<td valign="top" align="left" width="25%">
... barra de navegación ...
</td>
</tr>
<table>


Siguiente paso.

Paso 7.- El uso de los colores.