Addaw, ir a inicio Donar
wcag2.0

Criterio 2.4.3 - Orden del foco (A)

Si se puede navegar secuencialmente por una página web y la secuencia de navegación afecta su significado o su operación, los componentes que pueden recibir el foco lo hacen en un orden que preserva su significado y operabilidad.

La intención de este Criterio de Conformidad es asegurar que cuando los usuarios navegan secuencialmente a través del contenido, puedan encontrar la información en un orden que sea coherente con el significado y pueda ser operado con el teclado. Esto reduce la confusión al permitirle al usuario formarse un modelo mental consistente del contenido. Pueden existir diferentes órdenes que reflejen las relaciones lógicas en el contenido. Por ejemplo, moverse a través de los componentes de una tabla de a una fila o de a una columna por vez refleja las relaciones lógicas en el contenido. Cualquier orden puede satisfacer este Criterio de Conformidad.

El modo en que se determina el orden secuencial de navegación del contenido web es definido por la tecnología del contenido. Por ejemplo, el HTML simple define la navegación secuencial a través del orden de tabulación. El HTML Dinámico (DHTML) puede modificar la secuencia de navegación usando scripts junto al atributo tabindex para permitir el foco sobre elementos adicionales. Si no se utilizan scripts ni atributos tabindex, el orden de navegación es tal como aparece en el flujo de contenido. (Vea la Especificación HTML 4.01, sección 17.11, 'Dando foco a un elemento').

Un ejemplo de navegación por teclado que no corresponde al tipo de navegación secuencial considerado en este Criterio de Conformidad es cuando se usan las teclas de dirección para navegar por una estructura de árbol. El usuario puede utilizar las teclas de arriba y abajo para moverse de un nodo a otro. Al presionar la tecla izquierda puede expandir ese nodo y, presionando la tecla de abajo, recorrer los nuevos nodos expandidos. Esta secuencia de navegación es la que se espera en una estructura en forma de árbol: a medida que los nodos se expanden o contraen, son agregados o quitados de la secuencia de navegación.

El orden del foco puede no ser idéntico al orden de lectura determinado por software (vea el Criterio de Conformidad 1.3.2) siempre y cuando el usuario pueda de todas formas comprender y operar la página web. Como hay varios posibles órdenes lógicos de lectura del contenido, el orden del foco puede corresponder a cualquiera de ellos. Sin embargo, cuando el orden de una presentación en particular difiere del orden determinado por software, a los usuarios de estas presentaciones les puede resultar difícil entender y operar la página. Los autores deben considerar a todos estos usuarios cuando diseñen sus páginas web.

Por ejemplo, un usuario de lector de pantalla interactúa con el orden de lectura determinado por software mientras que un usuario que puede ver, que utiliza el teclado, interactúa con la presentación visual de la página. Se debe cuidar que el orden del foco tenga sentido para ambos usuarios y que ninguno de ellos sienta que salta de un elemento a otro en forma aleatoria.

Estas técnicas benefician a los usuarios de teclado que navegan secuencialmente los documentos y esperan que el orden del foco sea coherente con el orden de lectura.

  • Las personas con movilidad reducida que necesitan usar un teclado para operar la página se benefician con un orden del foco lógico y usable.

  • Las personas con dificultades para la lectura se pueden desorientar cuando la tabulación lleva a un lugar inesperado. Ellos se benefician con un orden del foco lógico.

  • Las personas con deficiencias visuales se pueden desorientar cuando el foco de la tabulación lleva a algún lugar inesperado o cuando no pueden encontrar fácilmente el contenido que rodea al elemento interactivo.

  • Only a small portion of the page may be visible to an individual using a screen magnifier at a high level of magnification. Such a user may interpret a field in the wrong context if the focus order is not logical.

  1. En un sitio web que contiene un árbol de controles interactivos, el usuario puede utilizar las teclas de arriba y abajo para moverse de un nodo a otro. Al presionar la tecla izquierda puede expandir ese nodo y, presionando la tecla de abajo, recorrer los nuevos nodos expandidos.

  2. Una página web implementa, mediante scripts, un cuadro de diálogo no modal (es decir, que permite continuar las operaciones en la ventana principal aún con el diálogo abierto). Cuando se activa un botón, el cuadro se abre y los elementos interactivos presentes en el diálogo se colocan en el orden del foco inmediatamente después del botón. Mientras se mantiene el diálogo abierto, el orden del foco pasa del botón a los elementos del cuadro, luego al elemento interactivo que está a continuación del botón. Cuando se cierra el diálogo, el foco pasa del botón al elemento siguiente.

  3. Una página web implementa, mediante scripts, un cuadro de diálogo modal. Cuando se activa un botón, se abre un cuadro de diálogo y el foco pasa al primer elemento interactivo del cuadro. Mientras el diálogo continúa abierto, el foco se limita a los elementos del cuadro. Cuando el diálogo se cierra, el foco retorna al botón o al elemento que sigue al botón.

  4. Se crea una página HTML con la lista de navegación lateral ubicada después del contenido principal y luego modificada con CSS para colocarla sobre el lado izquierdo de la página. Esto se hace para permitir que el foco pase directamente al contenido principal sin necesidad de usar el atributo tabindex o JavaScript.

    Nota: Si bien este ejemplo cumple el Criterio de Conformidad, no es necesariamente cierto que todos los posicionamientos con CSS lo harán. Algunos ejemplos de posicionamientos más complejos pueden o no preservar el sentido y la operabilidad.

  5. El siguiente ejemplo no satisface el Criterio de Conformidad:

    Un sitio web incluye un formulario que recoge datos y permite a los usuarios suscribirse a varios boletines informativos publicados por la empresa. La sección del formulario para recolección de datos incluye campos tales como nombre, dirección, ciudad y código postal. Otra sección del formulario incluye varias casillas de verificación para que los usuarios puedan indicar los boletines que desean recibir. Sin embargo, el orden de tabulación salta entre los campos de diferentes secciones del formulario, de modo que el foco pasa del campo para el nombre a una casilla, luego al campo para la dirección y, a continuación, a otra casilla de verificación.

Ver referencia Tecnicas y fallos
Financiado por la unión europea Gobierno de españa red.es Plan de recuperación transformación y resilencia kit digital