Día 10: Presentar inicialmente su contenido principal
Una de las ventajas principales de usar una disposición basada completamente en CSS es que es fácil reordenar elementos dentro del código fuente de su HTML sin afectar la presentación visual, para que su contenido principal se muestre mientras el resto de su página carga. Sin embargo, estoy al tanto de que la mayoría de los sitios de Internet usan disposiciones basadas en tablas, así que este consejo es para usted.
Si tiene una disposición basada en tablas con una barra de navegación dispuesta a la izquierda; su barra de navegación es presentada a usuarios no-videntes como Marcus y Jackie antes de su contenido principal. No hay forma de describir que tan grande es este problema, tiene que verlo con sus propios ojos:
- Disposición basada en tablas de muestra.
- Disposición modificada, con el contenido al inicio. Estas dos disposiciones deben lucir esencialmente iguales en navegadores visuales, pero en Lynx, la diferencia es obvia.
- La disposición original, procesada por Lynx.
- La disposición modificada, procesada por Lynx. El contenido se muestra primero, y luego la barra de navegación.
No necesita rediseñar la plantilla completa desde el principio para evitar este problema. Existe una técnica relativamente simple, llamada afectuosamente el "truco de la tabla" (table trick), que puede presentar su contenido principal primero, y manteniendo la barra de navegación del lado izquierdo.
Quién se beneficia?
- Marcus se beneficia. Según se demostró en los ejemplos anteriores, Lynx despliega el contenido en el orden en el que aparece en el código fuente del HTML. Esto significa que Marcus debe pasar por encima de toda la barra de navegación cada vez que visita su página. Y esto es incómodo.
- Jackie se beneficia. JAWS, como Lynx, presenta el contenido en el orden en que aparece en el código fuente del HTML, Con JAWS, el problema es peor, porque Jackie debe esperar a que JAWS lea su barra de navegación completa antes de escuchar cualquier contenido real, y no hay ninguna forma segura en que pueda dirigirse directamente al contenido principal.
- Google se beneficia. Google le da más peso al contenido que esta más cercano al tope de la pagina. De hecho, la mayoría de las personas que conocen esta técnica están en el negocio de la optimización de los motores de búsqueda; para ellos los beneficios de accesibilidad son secundarios.
Como hacerlo
Vea su propio sitio en el Visor Lynx (Lynx Viewer) y observe si sus apuntes diarios se despliegan primero, antes de la barra de navegación. La plantilla por defecto de Movable Type consigue hacerlo; si está usando la plantilla por defecto o algo basado en esta, probablemente no necesita hacer nada. Pero vea su sitio en el Visor Lynx de todos modos, porque esto le dará un conocimiento más profundo de los asuntos involucrados.
Si esta utilizando una de las plantillas por defecto de Radio, podría tener que ajustar sus tablas para poner su contenido principal primero. No existe una forma específica de hacer esto por copy-paste (copiar y pegar); tendrá que analizar más a fondo su propia plantilla y su estructura de tablas. La disposición de muestra y la disposición de muestra modificada muestran la técnica básica.
En lugar de la disposición por tablas obvia:
<table> <tr> <td valign="top" align="left" width="25%"> ... navigation bar ... </td> <td valign="top" align="left"> ... main content ... </td> </tr> </table>
Hacemos esto en su lugar:
<table> <tr> <!-- spacer GIF in upper-left cell --> <td><img src="/images/1.gif" width="1" height="1" alt=""></td> <!-- main content cell first, with rowspan=2 --> <td valign="top" align="left" rowspan="2"> ... main content ... </td> </tr> <tr> <td valign="top" align="left" width="25%"> ... navigation bar ... </td> </tr> </table>
Lectura añadida
- Visor Lynx (Lynx Viewer), sitio en inglés.
- A Promotion Guide: El Truco de la Tabla (The Table Trick), artículo en inglés.