\n"; } } } lecturas();

Sobre Accesibilidad - Enlaces de "saltar navegación"

Fuente: jlvelazquez.net

¿Ocultos o visibles?

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 leen

Para 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:
Regla aplicada	Forma de aplicación	JAWS 4.00.103	JAWS 4.50.138	JAWS 4.51.119	JAWS 5.00.812	Window - Eyes 4.2	Window - Eyes 4.5	IBM HPR 3.02
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".

¿Hay algo mejor que utilizar alguna de estas técnicas?

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).

Conclusiones

Intenta 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.

Enlaces de interés, referencias.

Blind for a day

Artículo del weblog "Mojombo's daily goods", en el que su autor decide navegar a ciegas por un día utilizando IBM Home Page Reader (HPR) 3.0. Muy didáctico, nos cuenta los principales problemas con los que se ha encontrado. También de obligada lectura es el hilo en la lista de la WAI que se originó a raíz de dicho artículo, y que dio pie a que escribiera lo que habeis leído aquí.

IBM Home Page Reader

La web de este navegador. Versión de prueba disponible gratuitamente (válida por 30 días).

Window-Eyes

Conoce más sobre este lector de pantalla.

JAWS

Otro conocido lector de pantalla.

Scour Design - Todos los Derechos Reservados - Carlos Carmona