Orden del foco:
Comprender CC 2.4.3
2.4.3 Orden del foco: 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. (Nivel A)
Proposito de este Criterio de Conformidad
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.
Beneficios específicos del Criterio de Conformidad 2.4.3:
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.
Ejemplos del Criterio de Conformidad 2.4.3
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.
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.
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.
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.
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.
Recursos relacionados
Los recursos tienen un propósito puramente informativo y no implican ningún aval.
(ninguno documentado actualmente)
Técnicas y Fallos para el Criterio de Conformidad 2.4.3 - Orden del foco
Cada elemento enumerado en esta sección representa una técnica o una combinación de técnicas que el Grupo de Trabajo WCAG considera suficientes para cumplir con este Criterio de Conformidad. Las técnicas enumeradas sólo satisfacen el Criterio de Conformidad si se cumple con todos los requisitos de conformidad de las WCAG 2.0.
Técnicas suficientes
Dar foco a los elementos en un orden que mantenga las secuencias y relaciones dentro del contenido usando una de las siguientes técnicas:
Cambiar dinámicamente una página web usando una de las siguientes técnicas:
Técnicas adicionales (recomendables) para 2.4.3
Aunque no se requieren para lograr la conformidad, las siguientes técnicas adicionales deben ser consideradas a fin de hacer más accesibles los contenidos. No todas las técnicas podrán ser utilizadas o resultarán eficaces en todas las situaciones.
Proporcionar un mecanismo para destacar muy visiblemente los enlaces o controles cuando reciben el foco del teclado (futuro enlace)
Crear órdenes de presentación alternativos (futuro enlace)
Fallos comunes para el CC 2.4.3
Los siguientes son los errores comunes que son considerados fallos al Criterio de Conformidad 2.4.3 por el Grupo de Trabajo WCAG.
Términos clave
- navegada secuencialmente
Navegada en el orden definido para el avance del foco (de un elemento al próximo elemento) usando una interfaz de teclado.
- página web
El recurso no incrustado obtenido a partir de una URI única usando HTTP, junto con cualquier otro recurso que se use en la presentación o que pretenda ser presentado por una aplicación de usuario junto con él.
Nota 1: Aunque cualquier "otro recurso" sería procesado junto con el recurso principal, no necesariamente debe ser procesado simultáneamente.
Nota 2: A los efectos de la conformidad con estas pautas, un recurso debe ser "no incrustado", en el ámbito de la conformidad, para ser considerado una página web.
Ejemplo 1: Un recurso web incluyendo todas las imágenes y los elementos multimedia incrustados.
Ejemplo 2: Un programa de correo web desarrollado con AJAX (Asynchronous JavaScript and XML). Todo el programa reside en http://ejemplo.com/mail pero incluye una bandeja de entrada, un área de contactos y un calendario. Se proporcionan enlaces o botones que hacen aparecer estas secciones pero no cambian la URL de la página en su conjunto.
Ejemplo 3: Un portal personalizable, donde los usuarios pueden elegir el contenido a mostrar de entre un conjunto de diferentes módulos.
Ejemplo 4: Al entrar en "http://shopping.ejemplo.com", se ingresa a un ambiente interactivo de una tienda donde el usuario se puede mover visualmente, tomar productos de las estanterías y ponerlos en su carrito de compras. Al hacer clic sobre un producto se muestra al lado una hoja de especificaciones. Esto podría ser un sitio web de una sola página o una única página dentro de un sitio web.