Estos enlaces, cuya finalidad es la de evitar recorrer todos los enlaces del menú del sitio cuando navegamos con el teclado o con un lector de pantalla, suelen presentarse ocultos a la vista mediante distintas técnicas más o menos acertadas; generalmente utilizando atributos de CSS.
A continuación veremos las más comunes:
Oculto: Al enlace se le aplica el atributo display:none . Desplazado: Esta vez el enlace se oculta sacándolo del área visible del documento, generalmente aplicándole la regla text-indent:-100em . "Fantasma": Una imagen transparente es la que enlaza al contenido.En ocasiones, estos recursos suelen ir acompañados de una regla aplicada a la pseudo-clase :active y :focus , en las que se anula el indentado del enlace, de tal forma que los usuarios sin problemas de visión puedan percatarse de su presencia al tabular a través del mismo.
Lo que los lectores de pantalla leenPara aclararnos las dudas sobre qué lectores de pantalla interpretarán estos enlaces, Andrew Kirkpatrick (CPB/WGBH National Center for Accessible Media) ha cedido para esta web una comparativa del comportamiento de varios lectores de pantalla:
| Agentes de usuario: | ||||||||
| display: none | <style> | SÍ | SÍ | SÍ | SÍ | NO | NO | / |
| <link> | SÍ | NO | NO | NO | NO | NO | / | |
| style="..." | NO | NO | NO | NO | NO | NO | NO | |
| @import | SÍ | SÍ | SÍ | SÍ | NO | NO | / | |
| visibility: hidden | <style> | SÍ | NO | NO | NO | NO | NO | / |
| <link> | SÍ | NO | NO | NO | NO | NO | / | |
| style="..." | NO | NO | NO | NO | NO | NO | NO | |
| @import | SÍ | SÍ | SÍ | SÍ | NO | NO | / | |
| text-indent: -100px | <style> | SÍ | SÍ | SÍ | SÍ | SÍ | SÍ | / |
| <link> | SÍ | SÍ | SÍ | SÍ | SÍ | SÍ | / | |
| style="..." | SÍ | SÍ | SÍ | SÍ | SÍ | SÍ | / | |
| @import | SÍ | SÍ | SÍ | SÍ | SÍ | SÍ | / |
En vista de los resultados, debemos descartar tanto display:none como visibility:hidden . Si utilizamos una imagen transparente, es importante no olvidar su atributo alt="Saltar navegación" .
Por ahora hemos visto que alguno de estos trucos o hacks pueden cumplir su cometido si navegamos con un lector de pantalla. Pero la pregunta que surge llegados a este punto es ¿por qué tomarnos tantas molestias ocultándolos a la vista?
Parece como que estos enlaces son el patito feo del diseño web, cuando en realidad deberían ser tomados como una utilidad más, del estilo del mapa del web o del típico enlace que lleva a las características de accesibilidad del sitio.
No ocultarlos evitará que el usuario tenga que interactuar con su teclado para encontrarlo y minimizará el número de errores (por ejemplo, tabular hacia atrás porque me lo he pasado sin querer ).
ConclusionesIntenta evitar todo tipo de trucos a la hora de presentar tu enlace de "saltar navegación". Tus páginas serán más usables y te ahorrarás disgustos con las interpretaciones que hagan las próximas versiones de los lectores de pantalla.
Si los ocultas, utiliza un text-indent negativo, apoyado en una pseudo-clase :hover y :focus (esta última Opera no la interpretará) que permita a los usuarios sin discapacidades visuales distinguirlos.
Para rizar el rizo, asocia la letra S como tecla de acceso directo (accesskey) al mismo. Alan Chuter nos explica el por qué de esta asignación .
Usuarios que han visto este tema también han visto...
- Cómo debe ser entendido el programa AdSense
- Estándares Web
- 9 habilidades que separan buenos y grandes diseñadores
- Tips para conseguir miles de enlaces
- Pon Tu Radio en Internet
- Versión imprimible de este documento
- Enviar por e-mail este documento
Información legal | Política de Privacidad | Contacte con nosotros
Otro proyecto de Factoría de Internet. Copyright© 2003-2008 Factoría de Internet S.L.. Todos los derechos reservados.