Principio 2/2.4 Navegable/2.4.3-A

2.4.3-A. Orden de tabulación lógico

2_Operable 2.4_Navegacion_clara

• Nivel: A
• Versión: 2.0
• Principio: 2_Operable
• Pauta: 2.4_Navegacion_clara
• Grupo: Navegación
• Subgrupo: Teclado_y_contenido

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

• Motriz – Barrera grave
• Visual total – Barrera grave
• Baja visión – Barrera moderada

Enunciado del criterio (Observatorio de Accesibilidad Web)

• El orden de tabulación por los enlaces, controles de formulario y demás elementos de interacción debe tener sentido.

Comprensión del criterio

Descripción resumida

El orden del foco al navegar con teclado debe ser comprensible y coincidir con el flujo visual y semántico de la página, garantizando que todos los elementos relevantes sean accesibles.

Objetivo

Asegurar que los usuarios puedan moverse por la interfaz con el teclado sin perder contexto ni acceso a los controles.

Importancia de cumplir el criterio

Un orden del foco incoherente genera confusión, impide completar formularios y puede dejar controles inaccesibles para quienes dependen exclusivamente del teclado o lectores de pantalla.

Referencias WCAG

• G59: Placing the interactive elements in an order that follows sequences and relationships within the content
• F44: Failure due to using tabindex to create a tab order that does not preserve meaning and operability

Recursos de apoyo

NO hay

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

1. Paso 1. Tabular con el teclado por todos los elementos de la página.
2. Paso 2. Verificar que el orden de la tabulación sigue el orden lógico que debería presentar la página.
   Nota: Si el comportamiento no es el adecuado, puede utilizarse la herramienta Web Developer Toolbar, activando Information → Display Tab Index para visualizar el atributo tabindex y ayudar a identificar el origen del problema.

Resultado esperado

El foco de teclado se mueve de forma predecible y lógica, respetando la estructura visual y semántica de la página.

Ejemplo

Codigo HTML con el orden natural del DOM.

<form>
  <label>Email</label>
  <input type="email">
  <label>Contraseña</label>
  <input type="password">
  <button type="submit">Entrar</button>
</form>

Otras herramientas de evaluación

• Plugin: Usa el plugin taba11y - Tab order accessibility testing para ver el orden de los elementos de la página.
• Navegación con teclado: recorrer la página con Tab y Shift + Tab para comprobar que el foco avanza en un orden lógico y coherente con la disposición visual.
• Inspección del DOM: revisar el orden de los elementos interactivos en el HTML para confirmar que coincide con el orden visual (evitar depender de CSS para el orden).
• Revisión de atributos: comprobar que no se usa tabindex de forma incorrecta (p. ej. valores mayores que 0 que rompen el orden natural).
• Pruebas con lectores de pantalla: (NVDA, JAWS, VoiceOver) verificar que el orden de navegación por foco es comprensible y no produce saltos inesperados.

Comentarios

A continuación se muestran comentarios sobre el criterio 2.4.3-A. Orden de tabulación lógico

Loading comments...