viernes, 20 de julio de 2012

Consejo 20: Establece un orden de tabulación correcto en los formularios y en toda la página

Consejo: establece un orden de tabulación correcto entre los controles de un formulario y entre todos los elementos de una página web, para que un usuario que se desplace por la página con el teclado lo haga en el orden correcto.

Cómo lo hago: lo mejor es no hacer nada, es decir, escribir el contenido de la página en el orden adecuado en el que queremos que le aparezca al usuario. Sin embargo, a veces se modifica el orden  interno del contenido, aunque con CSS se puede situar visualmente en cualquier posición. Para evitar un orden indebido al desplazarse por la página se debe emplear el atributo tabindex, pero una vez que se empieza a utilizar hay que emplearlo en todos los elementos para evitar problemas, por lo que lo mejor es no tener que utilizarlo.

Cómo se benefician los usuarios: algunos grupos de usuarios, en especial aquellos que no utilizan el ratón para manejar el ordenador, sino que lo hacen con el teclado, se benefician ya que al desplazarse por la página lo hacen en el orden adecuado.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

2 comentarios:

Unknown dijo...
Este comentario ha sido eliminado por el autor.
Eligio dijo...

Personalmente recurro a un pequeño truco en los casos en los que quiero que ciertos campos tengan un orden de tabulacion, cuando el resto no es necesario que lo tenga. Es decir: imaginemos una pagina con 10 campos de tipo input, pero queremos que los 3 que estan en medio de la web, esten tabulados entre ellos. Para no tener que usar el tabindex en toooodos los componentes de mi pagina que tengan posibilidad de recibir el foco al tabular, solo uso el tabindex en los 3 elementos que me interesan tabular usando indices altos: Ejemplo tabindex="100", tabindex="101", tabindex="102".
Con esto consigo que cuando alguien se posicione en la primera de las casillas input y usen el tabulador, salte en el orden correcto