Orden de tabulación del teclado: pruébelo y corríjalo sin un desarrollador

Un orden de tabulación roto no solo se ve desordenado, puede impedir que alguien use su sitio en absoluto. Al presionar Tab, el foco debería recorrer todos los elementos interactivos en un orden lógico, y todo lo que el foco nunca alcanza simplemente no puede activarse para un usuario que solo usa el teclado. Puede probar su propio sitio en unos 60 segundos con nada más que la tecla Tab.

Puntos clave

• El orden de tabulación es la secuencia por la que se mueve el foco cuando alguien presiona la tecla Tab, sin usar el mouse. Shift+Tab recorre la misma secuencia hacia atrás.
• No es una preocupación de nicho. Quien no puede usar un mouse de forma fiable, por un temblor, una parálisis, una lesión por esfuerzo repetitivo o una lesión temporal, depende por completo de la navegación con teclado para usar un sitio web.
• Hay dos modos de fallo distintos, y uno es mucho peor que el otro. Un orden confuso es molesto. Un elemento interactivo al que Tab nunca llega es un bloqueo total, no una queja de usabilidad.
• Puede probarlo usted mismo, ahora mismo, sin desarrollador ni herramientas especiales. Haga clic en la barra de direcciones, luego presione Tab repetidamente y observe adónde va el foco.
• axe-core corrige automáticamente con alta confianza una versión específica de este problema, un valor positivo de tabindex, y marca algunos problemas relacionados que realmente necesitan el juicio de una persona, porque juzgar si un orden "tiene sentido" requiere entender la página.

Qué es realmente el orden de tabulación

Al presionar Tab, el foco del teclado pasa al siguiente elemento interactivo de la página: enlaces, botones, campos de formulario, todo aquello sobre lo que un usuario puede actuar. Shift+Tab retrocede. De forma predeterminada, esa secuencia sigue el orden en que los elementos aparecen en el HTML subyacente, que normalmente es el mismo orden en que los encontraría una persona que ve al leer de arriba abajo.

Un indicador de foco visible, normalmente un contorno alrededor de lo que tiene el foco en ese momento, le muestra al usuario de teclado dónde está. Sin él, o sin un orden razonable detrás, la navegación con teclado deja de ser utilizable, aunque nada parezca roto para quien usa un mouse.

Por qué importa

Alguien que no puede usar un mouse, por un temblor, una parálisis, un miembro faltante, párkinson, ELA o algo tan común como una muñeca rota, sigue necesitando pagar, completar un formulario y navegar un menú. El teclado es la manera en que hace todo eso. Los usuarios de lectores de pantalla también recorren con Tab los elementos interactivos como una de las varias formas de moverse por una página, así que esto se solapa con la accesibilidad para lectores de pantalla, pero no es idéntico.

Un orden de tabulación confuso es un problema real de usabilidad: el foco que salta de un enlace del encabezado directamente a un botón del pie de página, omitiendo todo el centro de la página, obliga a adivinar y a retroceder. Pero sigue siendo navegable, eventualmente. Un elemento interactivo al que el foco nunca llega es distinto en naturaleza, no en grado: un botón al que un usuario de teclado literalmente no puede llegar con Tab es un botón que no puede presionar, punto, sin solución disponible desde el teclado solo.

La prueba de 60 segundos con la tecla Tab

1. Haga clic primero en algún lugar neutro, como la barra de direcciones del navegador, para empezar desde una posición conocida y no desde donde el foco haya caído.
2. Presione Tab repetidamente y observe el contorno visible moverse por la página. ¿Se mueve en una secuencia que coincide aproximadamente con lo que vería al recorrer la página visualmente, de arriba abajo, de izquierda a derecha?
3. Intente activar lo que encuentre. Presione Enter en un enlace o botón, Espacio para marcar una casilla. ¿Funciona realmente desde el teclado, y no solo recibe el foco visualmente?
4. Compruebe que cada elemento interactivo tenga su turno. Elementos de menú, campos de formulario, botones, widgets personalizados como un selector de fecha o un acordeón: todos deberían poder alcanzarse así.
5. Esté atento a una trampa. Si Tab o Shift+Tab se atasca alguna vez y no lo saca de un elemento, es un problema más grave que el orden por sí solo, una trampa de teclado según la WCAG 2.1.2, y debe corregirse de inmediato.
6. Confirme que realmente puede ver dónde está. Si el foco se mueve pero ningún contorno visible muestra dónde, es un fallo distinto pero relacionado, la WCAG 2.4.7 Foco visible, que vale la pena anotar aunque no sea el tema principal aquí.

Cómo se ve realmente un orden de tabulación roto

Valores positivos de tabindex. Un desarrollador que intenta forzar un orden específico a veces agrega números explícitos: tabindex="1", tabindex="2", y así sucesivamente. Esto anula el orden natural del documento y se rompe en cuanto alguien agrega más tarde un elemento nuevo sin volver a numerar todo lo que lo rodea.

<!-- Falla: numeración forzada que se desincronizará con el tiempo -->
<input tabindex="3" name="email">
<input tabindex="1" name="name">
<input tabindex="2" name="phone">

<!-- Pasa: sin anulación, el orden natural del documento lo resuelve -->
<input name="name">
<input name="phone">
<input name="email">

Un reordenamiento visual que no toca el orden subyacente. Propiedades de CSS como order en un diseño flexbox o grid pueden cambiar lo que ve un usuario que ve sin cambiar la secuencia real del HTML que sigue Tab. El resultado: un usuario de mouse y un usuario de teclado viven dos órdenes distintos en la misma página, y nada se ve mal en pantalla.

Un elemento personalizado sin soporte real de teclado. Un <div> con estilo de botón, con un controlador de clic, pero sin tabindex="0" ni manejo de eventos de teclado, es completamente invisible para la navegación con Tab. No es un orden confuso, es un bloqueo total, ya que un usuario de teclado nunca puede llegar a él.

Un elemento oculto que sigue siendo enfocable. Un menú móvil colapsado cuyos enlaces siguen técnicamente presentes en la página, o un elemento pensado para ser invisible que sigue aceptando el foco, crea una parada de tabulación "fantasma": el foco se mueve visiblemente, pero hacia algo que el usuario no puede ver.

Qué detecta axe-core y qué solo usted puede juzgar

Regla	Qué verifica	Vía de corrección
tabindex	Un elemento tiene un valor de tabindex positivo	Siempre corregida automáticamente, reescrita a 0
aria-hidden-focus	Un elemento oculto sigue siendo enfocable individualmente	Corregida automáticamente, en la medida de lo posible y de forma acotada: corrige el elemento en sí, no un contenedor oculto que simplemente contiene un elemento enfocable
focus-order-semantics	Si el orden de tabulación real coincide con el orden visual y lógico de la página	Manual
scrollable-region-focusable	Una región desplazable a la que no se puede llegar ni operar con el teclado	Manual

El patrón es coherente con toda otra categoría de corrección sobre la que vale la pena ser honesto. Un valor positivo de tabindex es inequívoco, no hay ninguna razón legítima para él, así que axe-core lo reescribe con total confianza cada vez que lo encuentra. Si el orden de tabulación de una página entera tiene sentido lógico es un juicio sobre lo que esa página específica intenta comunicar, y necesita a una persona que pueda mirar la página y decidir.

Qué corrige Axeazy aquí

Axeazy corrige automáticamente los valores positivos de tabindex con total confianza, reescribiéndolos a 0 para que el orden natural del navegador tome el control. También corrige automáticamente el caso más acotado de elemento oculto pero enfocable, un elemento individual que no debería poder alcanzarse cuando está oculto. Ambas son correcciones automáticas reales y funcionales.

Todo lo relacionado con si un orden realmente tiene sentido, o si un widget personalizado tiene soporte real de teclado integrado, requiere que un desarrollador mire la página. No es una laguna que Axeazy esconda, es la misma línea honesta que traza al final toda categoría de corrección de esta lista: un script puede reescribir un atributo con confianza, no puede decidir en qué orden debe leerse lógicamente el contenido de una página.

La vía de corrección también depende de su plataforma. En un código React, Next.js u otro conectado a GitHub, la corrección de tabindex le llega como un pull request real. En Shopify, el escaneo igualmente lo encuentra, pero no hay cambio automático de código; se convierte en un elemento de una lista de verificación guiada. En WordPress, esta categoría específica no es una de las tres correcciones instantáneas del plugin gratuito (navegación de salto, atributo de idioma, texto alternativo de respaldo), así que actualmente tampoco tiene una vía automática en WordPress. Vea el desglose completo de las categorías de corrección.

Preguntas frecuentes

¿Cuál es la diferencia entre un orden de tabulación roto y una trampa de teclado?

El orden de tabulación es la secuencia por la que se mueve el foco cuando alguien presiona Tab. Una trampa de teclado es más grave: el foco queda atascado en un elemento y ni Tab ni Shift+Tab pueden sacarlo. Un orden confuso es un problema de usabilidad. Una trampa es un bloqueo total, y es su propio requisito de la WCAG, la 2.1.2 Sin trampas para el foco del teclado.

¿Agregar tabindex="0" lo arregla todo?

Hace que un elemento que de otro modo no sería enfocable, como un <div> con estilo que actúa como botón, sea alcanzable con Tab, y lo coloca en el orden natural del documento de la página. No garantiza que ese orden sea lógico. El lugar donde el elemento se encuentra en el HTML real sigue determinando cuándo recibe el foco.

¿Por qué un desarrollador usaría alguna vez un tabindex positivo si causa problemas?

Normalmente es un intento bienintencionado de forzar un orden específico sin reorganizar el HTML real. A menudo es menos trabajo a corto plazo y más trabajo después, porque cada elemento nuevo que se agrega luego necesita renumeración manual para no romper de nuevo la secuencia.

¿Puedo probar el orden de tabulación de la misma manera en mi teléfono?

No realmente. La navegación con la tecla Tab es una interacción de teclado físico, por lo que esta prueba específica está pensada para un navegador de escritorio. La accesibilidad del teclado en móviles sigue importando, sobre todo para quienes usan un teclado externo o un dispositivo de acceso por conmutador con un navegador móvil, pero se prueba de otra manera.

¿Corregir solo el orden de tabulación hace que mi navegación con teclado sea totalmente utilizable?

Ninguna corrección individual cubre todo lo que un usuario que solo usa el teclado puede encontrar. El orden de tabulación es una pieza real y significativa; una página aún puede tener otros problemas, como indicadores de foco ausentes o una trampa de teclado real, que necesitan su propia revisión por separado.

Fuentes

• W3C: Entender el criterio de éxito 2.1.1, Teclado
• W3C: Entender el criterio de éxito 2.4.3, Orden del foco
• W3C: Entender el criterio de éxito 2.1.2, Sin trampas para el foco del teclado