Detección y Validación del Atributo tabindex

Propósito

Esta funcionalidad tiene como objetivo principal detectar, clasificar y validar el uso del atributo tabindex en los elementos del DOM. Se busca garantizar el cumplimiento de buenas prácticas de accesibilidad, minimizando errores de navegación por teclado y mejorando la experiencia de los usuarios que dependen del foco para interactuar con las interfaces.

Actualmente, la lógica opera sobre los elementos presentes en la página activa, y se planea su evolución para reducir falsos positivos mediante análisis más semánticos y contextuales.

---

Descripción General

El sistema identifica los elementos que contienen el atributo tabindex, evalúa su valor y contexto, y clasifica su uso como correcto o potencialmente problemático. En los casos en que la detección no permita determinar automáticamente si se trata de un uso válido, el sistema solicitará interacción del usuario (auditor o experto) para confirmar la intención.

La información recolectada se envía al a11ybot como parte del reporte de accesibilidad automático, permitiendo el seguimiento de errores y su resolución.

---

Clasificación de tabindex

El atributo tabindex puede adoptar distintos valores, que afectan directamente el orden de navegación por teclado:

• tabindex="0" → El elemento entra en el flujo natural de tabulación.
• tabindex="-1" → El elemento es excluido del flujo de tabulación, pero sigue siendo enfocable mediante JavaScript.
• tabindex="1" o superior → Se fuerza un orden personalizado de tabulación, lo cual puede romper la lógica de navegación esperada.

---

Criterios de Aceptación por Categoría

1. tabindex="-1" en Elementos Interactivos

Objetivo: Asegurar que los elementos excluidos del foco por teclado realmente estén ocultos o tengan justificación.

Requisitos:

• Detectar todos los elementos con tabindex="-1".
• Verificar si el elemento está:
  • Visualmente oculto por CSS (display: none, visibility: hidden, opacity: 0, etc.).

Acciones:

• Si se cumple alguna condición → No se reporta como error.
• Si no cumple ninguna condición → Preguntar al usuario si el comportamiento es intencionado.
  • Si es un error → Reportar como:
    Unfocused element with (Tab/Shift+Tab)

---

2. tabindex="0" en Elementos No Interactivos

Objetivo: Validar si los elementos no interactivos deben formar parte del flujo de tabulación.

Requisitos:

• Detectar elementos como <div>, <span>, <p>, etc. con tabindex="0".
• Determinar si actúan como contenedores de otros elementos que también reciben el foco.

Acciones:

• Preguntar al usuario si el uso de tabindex="0" es intencionado.
• Si se confirma como error:
  • Si es un contenedor con múltiples focos →
    Multiple focus on interactive controls due to nesting between them
  • Si es un elemento no interactivo individual →
    Non-interactive elements focused (Tab - Shift+Tab)

---

3. tabindex Positivo en Elementos Interactivos y No Interactivos

Objetivo: Detectar casos donde se altera el orden de navegación natural mediante valores positivos en tabindex.

Requisitos:

• Detectar tabindex positivo en:
  • Elementos interactivos (<button>, <a>, <input>, etc.).
  • Elementos no interactivos (<div>, <span>, <p>, etc.).
  • Contenedores no interactivos con hijos enfocados.

Acciones:

• Preguntar al usuario si el uso de tabindex positivo es intencionado.
• Si se confirma como error:
  • Para elementos interactivos →
    Focus order is not logical and intuitive in the (Tab - Shift+Tab) navigation order
  • Para elementos no interactivos →
    Non-interactive elements focused (Tab - Shift+Tab)
  • Para contenedores con focos múltiples →
    Multiple focus on interactive controls due to nesting between them

---

Interacción con el Usuario

Cuando el sistema no pueda determinar de forma automática si el uso de tabindex es correcto, se abrirá una interfaz de confirmación para que el usuario (auditor o experto) indique si el comportamiento es:

• Intencionado (no se reporta).
• Un error (se incluye en el reporte con la categoría correspondiente).

---

Integración con a11ybot

• Todos los datos recolectados, incluyendo la clasificación automática y las respuestas del usuario, son enviados a a11ybot.
• El bot integra esta información en el reporte de accesibilidad junto con otros hallazgos del análisis automático.

---

Estado Actual y Futuras Mejoras

Aspecto	Estado Actual	Futuro
Análisis contextual	Parcial	Mejora prevista
Discriminación semántica	Limitada	Mejora prevista
Evaluación automática de intención	Parcial	Mejora prevista

---

Notas Técnicas

• Esta funcionalidad debe ejecutarse en el contexto de la página activa.
• Los elementos se analizan en tiempo real al cargarse la página o al ejecutar manualmente el escaneo.
• Se deben manejar adecuadamente los falsos positivos mediante exclusiones y confirmaciones con el usuario.

---

Conclusión

Esta funcionalidad forma parte del esfuerzo integral por mejorar la accesibilidad de nuestras interfaces, asegurando que el foco de navegación por teclado sea lógico, predecible y accesible para todos los usuarios. Su correcta implementación y validación permitirá detectar errores difíciles de identificar y facilitará su corrección de forma colaborativa.