Día 11: "Saltar" sobre los vínculos de navegación
Si no encontraron la forma de hacer que sus plantillas presentaran su contenido principal al inicio, aquí hay una salida: provea un enlace para saltar sobre sus vínculos de navegación. No es una solución ideal (presentar su contenido principal inicialmente es mejor), pero es un arreglo aceptado que muchos sitios usan.
Este "enlace para salto" es solamente una etiqueta <a> común y corriente, como cualquier otro enlace, pero usaremos CSS para esconderlo de navegadores visuales como Internet Explorer o Netscape. No afectará la disposición de sus páginas en absoluto; será completamente invisible.
Quién se beneficia?
- Marcus se beneficia. Cuando el visite su pagina, el navegador Lynx mostrará el enlace y le permitirá saltar sobre su barra de navegación directamente hacia su contenido. Vea Día 10: Presentar inicialmente su contenido principal para encontrar un ejemplo que le enseñara por que esto es tan importante.
- Jackie se beneficia. Cuando ella visite su pagina, su lector de pantalla JAWS leerá el enlace de salto y le permitirá saltar sobre su barra de navegación e ir directamente al contenido principal.
Como hacerlo
Primero, use el Visor de Lynx (Lynx Viewer) en su propia página para determinar si su barra de navegación se presenta antes que su contenido principal. Si su contenido principal se muestra al inicio, entonces este consejo no le aplica, disfrute su día libre.
Ahora defina una regla de CSS para los vínculos, que los hará invisibles a los navegadores visuales. Si tiene una hoja de estilos externa, ponga esta regla al final de esta. (Si tiene múltiples hojas de estilos externas, ponga esta regla en la hoja compatible con Netscape 4). Si tiene una sección <style> en la parte superior de su plantilla, añada esta regla inmediatamente después de la etiqueta <style>:
.skiplink {display:none}
Luego, inserte el enlace de salto inmediatamente después del nombre y la descripción de su sitio. No puede encontrarlos? Busque las variables de plantilla apropiadas.
- Movable Type: busque
<$MTBlogTitle$>and<$MTBlogDescription$>. - Greymatter: : no existe ninguna variable específica; busque el nombre y el tagline de su sitio de Internet.
- Radio: busque
<%siteName%>y<%description%>. - Manila: busque
{homePageLink (siteName)}y{tagLine}. - Blogger: busque
<$BlogTitle$>.
Los encontró? Inmediatamente después del nombre y la descripción de su sitio, inserte el enlace de salto:
<a class="skiplink" href="#startcontent">Saltar sobre la barra de navegación</a>
OK, ahora necesita una etiqueta de anclaje a donde debe señalar el enlace; esta debería estar al principio de su contenido principal. No puede encontrar su contenido principal? No se asuste. Las variables de plantilla nuevamente al ataque.
- Movable Type: busque
<MTEntries>. - Greymatter: en su Plantilla de Indice Principal (Main Index Template), busque
{{logbody}}. En las Plantillas de Entrada de Pagina (Entry Page Templates), busque{{entrymainbody}}. - Radio: busque
<%bodytext%>. - Manila: busque for
{bodytext}. - Blogger: busque for
<Blogger>.
Ahora, el formato de su etiqueta de anclaje depende de que tipo de HTML esté usando. Consulte su DOCTYPE, y luego siga uno de los siguientes pasos:
Si está usando cualquier variante del
HTML 4, añada esto justo antes de su contenido principal:<a name="startcontent"></a>Si está usando cualquier variante del
XHTML 1.0, añada esto justo antes de su contenido principal:<a name="startcontent" id="startcontent"></a>Si está usando
XHTML 1.1, añada esto justo antes de su contenido principal:<a id="startcontent"></a>
Debería incluir esta clase de enlace de salto en cada página de su sitio de Internet, así que añádala a todas sus plantillas.