¿Qué es Visualizador de orden de foco?

Pega cualquier HTML y visualiza el orden de tabulación del teclado. Cada elemento enfocable muestra un marcador numerado para que detectes problemas de navegación de un vistazo. Diseñado para auditores de accesibilidad y desarrolladores que verifican el cumplimiento de WCAG.

El visualizador detecta enlaces, botones, campos de formulario, áreas de texto, menús select, componentes details/summary, regiones contenteditable y cualquier elemento con un tabindex explícito. Cada elemento recibe una insignia numerada y una etiqueta que indica si su posición viene del orden del DOM (natural) o de un tabindex que la sobreescribe (personalizada). También puntúa la página sobre 100, señala los controles sin nombre accesible (el problema del botón con solo un icono) y muestra cuántos elementos interactivos nunca llegan a ser accesibles con Tab. Exporta los resultados como informe de texto plano o como CSV estructurado para registros de auditoría y gestores de incidencias.

Cómo usar

1. Pega el código HTML en el editor o sube un archivo HTML para comprobar su orden de tabulación.
2. Aparecen marcadores numerados en cada elemento enfocable (enlaces, botones, campos de entrada) mostrando la secuencia de tabulación.
3. Mira la puntuación de accesibilidad y el panel de problemas, corrige los elementos fuera de orden, sin etiquetar o inaccesibles por teclado, y luego exporta los resultados como informe de texto o CSV.

Cuándo usar

• Comprobación previa antes de enviar una página para certificación WCAG 2.1 AA.
• Localizar una regresión del orden de tabulación tras refactorizar un componente.
• Validar que un modal o menú lateral atrapa el foco donde corresponde.

Resultado

Un consultor de accesibilidad pega el HTML del formulario de registro de un cliente. El visualizador detecta que el boton 'Enviar' recibe el foco antes de la casilla de 'Terminos de servicio' porque un tabindex positivo reordeno los elementos. Eso es una infraccion de WCAG 2.4.3.

Preguntas frecuentes

¿Usar tabindex con un número positivo siempre es un error?

Casi siempre, sí. Los tabindex positivos (1, 2, 3…) sacan al elemento del orden del DOM y hacen saltar al usuario por la página de forma impredecible. Usa tabindex="0" para hacer enfocable un elemento no interactivo, o tabindex="-1" para sacarlo de la cadena de Tab manteniendo el foco programático.

¿Qué significan «natural» y «personalizado» en la lista?

Natural quiere decir que la posición Tab viene del lugar donde está el elemento en el código HTML. Personalizado significa que un tabindex positivo lo forzó a otra posición. Las posiciones personalizadas se marcan porque son la causa más frecuente de fallos WCAG 2.4.3.

¿Aparecen los elementos ocultos en el orden de foco?

Si están ocultos de verdad (display:none o visibility:hidden), el navegador los salta y el visualizador también. Pero aria-hidden por sí solo no quita la capacidad de recibir foco, lo cual es un bug habitual. La lista los mostrará y los datos del rectángulo te indicarán si son visibles.

¿Detecta si falta una trampa de foco en un modal?

Te muestra el orden, no si el foco escapa del modal. Pega el HTML del modal abierto y comprueba si el primero y el último elemento enfocables están dentro del diálogo. Si el orden salta al contenido del body, la trampa no está implementada.

¿Por qué falta de la lista un elemento que esperaba enfocable?

Los inputs deshabilitados, los anchor sin href y los div sin tabindex se saltan porque el navegador no los puede enfocar. Añade tabindex="0" si un div tiene que ser alcanzable, agrega href al anchor o quita el atributo disabled del input.

Herramientas relacionadas